成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

初識EMCASCRIPT 模塊化

Bamboy / 3370人閱讀

摘要：到目前為止，我們完成了模塊的簡易定義與使用。但是模塊化的一大精髓是命名空間，就是按需導(dǎo)入，而此時卻是一個全局變量。

為什么需要模塊化？

當(dāng)我們在html中調(diào)用一個js函數(shù)時，如果我們把這個函數(shù)寫在另外的一個js文件中，那么調(diào)用的時候我們需要在html的頭部引入那個js文件。

index.html


    


    
Hello world

index.js

function Girl(){
    var p = document.getElementById("boy");
    p.innerHTML = "I am a boy";
}

此時，若我們需要在index.js中生成的文字是動態(tài)的，且由另一個js(matn.js)產(chǎn)生，那么如果在java中可以在index.js中使用import package+class模式引用另一個文件中的方法，但是對于javascript這種動態(tài)的語言來說是不可以的。因此如果我們要在index.js中能夠調(diào)用math.js中的函數(shù)，那么我們需要同時在index.html中引入math.js。

index.html


    
    


    
Hello world

index.js

//import "math.js" 不支持這種寫法
function Girl(){
    var p = document.getElementById("boy");
    p.innerHTML = add(1,2);
}

math.js

function add(a,b){
    return a + b;
}

我們可以看到這種寫法并不優(yōu)雅，index.js對于math.js沒有控制權(quán)，能不能調(diào)用到add()函數(shù)完全取決于自己的html有沒有正確的引入math.js。
所以這邊就產(chǎn)生了幾個問題：
1.index.js無法import,依賴html的引用
2.index.js中無法對add方法的來源做區(qū)別分，缺少命名空間的概念
3.Js中只有兩種作用域，一個是函數(shù)作用域，當(dāng)函數(shù)執(zhí)行完后變量會釋放。而一個是全局作用域，從頁面打開到關(guān)閉的過程中，變量會一直存在，就會造成全局變量的污染，所以js模塊化編程很重要

初步模塊化

解決第二個問題，也就是命名空間的概念。
我們把math中的函數(shù)放進(jìn)去一個以math命名的對象中,這樣就形成了一個簡易版的命名空間了。

math.js

var math = {
    base: 5,
    add: function(a,b){
        return a + b;
    },
};

index.js

function Girl(){
    var p = document.getElementById("boy");
    p.innerHTML = math.add(1,2);//我們知道了這個方法來自math這個文件
}

但是這里math對象中的另一個屬性base也會被暴露和修改,因此我們升級一下。

math.js

var math = (function(){
    var base = 7;
    return {
        add: function(a,b){
            return a + b + base;
        },
    };
})();

我們把math定義在一個閉包中，從而隱藏了內(nèi)部屬性。
index.js

function Girl(){
    var p = document.getElementById("boy");
    p.innerHTML = math.add(1,2);
    document.write(math.base);//undefine
}

到目前為止，我們完成了模塊的簡易定義與使用。但是模塊化的一大精髓是命名空間，就是按需導(dǎo)入，而此時math卻是一個全局變量。因此我們可以引入中間件來解決這個問題。

引入中間件

我們定義一個全局變量

global.js

var module = {
    export: {}
}

在math.js中

var math = (function(){
    var base = 7;
    return {
        add: function(a,b){
            return a + b + base;
        },
    };
})();
mmodule.export.math = math;//把math注冊

index.js

var math = module.export.math;//指定了math.js中的math方法
function Girl(){
    var p = document.getElementById("boy");
    p.innerHTML = math.add(1,2);
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82281.html

相關(guān)文章

  • 細(xì)說 Javascript 拾遺篇（二） : undefined 和 null

    摘要：有兩個可以表示空的值，分別是和，比較有作用的是前者。訪問聲明但未初始化的變量。有返回值時函數(shù)的表達(dá)式?jīng)]有顯式的返回任何內(nèi)容。然而，為了比較其他變量和值，我們需要提前取得的值。因此，從標(biāo)準(zhǔn)實(shí)行后，全局變量已經(jīng)是不再可寫。 Javascript 有兩個可以表示空的值，分別是 undefined 和 null，比較有作用的是前者。 undefined undefined 是一種值為 un...

    My_Oh_My 評論0 收藏0

  • angular - 收藏集 - 掘金

    摘要：如何在中使用動畫前端掘金本文講一下中動畫應(yīng)用的部分。與的快速入門指南推薦前端掘金是非常棒的框架，能夠創(chuàng)建功能強(qiáng)大，動態(tài)功能的。自發(fā)布以來，已經(jīng)廣泛應(yīng)用于開發(fā)中。 如何在 Angular 中使用動畫 - 前端 - 掘金本文講一下Angular中動畫應(yīng)用的部分。 首先，Angular本生不提供動畫機(jī)制，需要在項目中加入Angular插件模塊ngAnimate才能完成Angular的動畫機(jī)制...

    AlexTuan 評論0 收藏0

  • Javascript簡介

    摘要：以下內(nèi)容都是一些概念性的知識點(diǎn)弄懂這些基本的概念是我們在世界看得更遠(yuǎn)的墊腳石誕生于年年公司開發(fā)發(fā)布時臨時將名字改為當(dāng)時它的主要目的是處理以前由服務(wù)端語言負(fù)責(zé)的輸入驗(yàn)證操作隨著其發(fā)展現(xiàn)在已不再局限于數(shù)據(jù)驗(yàn)證而是具備了與瀏覽器窗口及其內(nèi)容等幾乎 以下內(nèi)容都是一些概念性的知識點(diǎn),弄懂這些基本的概念是我們在JavaScript世界看得更遠(yuǎn)的墊腳石. Javascript Javascript誕...

    Near_Li 評論0 收藏0

  • ES2015入門系列1-初識ES2015

    EcmaScript 其實(shí)是一種語言規(guī)范，常見的 JavaScript, ActionScript 等都是其具體實(shí)現(xiàn)，平時使用中一般可以將其和Javascript對等稱呼，本系列教程主要講述 EcmaScript2015(ES6) 為JavaScript帶來的新的特性，并初步掌握如何利用其進(jìn)行開發(fā)。 本系列面向有一定基礎(chǔ)知識的ES5使用者，不適合初學(xué)者。 先來看兩段代碼： Human.js exp...

    hellowoody 評論0 收藏0

  • 那些年初識Angular(1)

    摘要：它包含多個屬性，這些屬性值叫做元數(shù)據(jù)。會根據(jù)元數(shù)據(jù)渲染組件，并執(zhí)行組件邏輯。元數(shù)據(jù)會告訴圖和將這個類處理成一個組件。元數(shù)據(jù)這段代碼表示這個組件可以通過這個標(biāo)簽來調(diào)用。 那些年初識Angular 由于工作需要初識了Angular，由于個人在學(xué)習(xí)一門新語言的時候喜歡買一本相關(guān)的書籍自己鉆研，還記得自己的第一本Angular書籍是關(guān)于Angular2的學(xué)習(xí)，自此正式踏入Angular的學(xué)習(xí)。...

    Flink_China 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<