初識EMCASCRIPT 模塊化

Bamboy 發布于2019-08-20 15:28 / 3358人閱讀

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

為什么需要模塊化？

當我們在html中調用一個js函數時，如果我們把這個函數寫在另外的一個js文件中，那么調用的時候我們需要在html的頭部引入那個js文件。

index.html


    


    Hello world

index.js

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

此時，若我們需要在index.js中生成的文字是動態的，且由另一個js(matn.js)產生，那么如果在java中可以在index.js中使用import package+class模式引用另一個文件中的方法，但是對于javascript這種動態的語言來說是不可以的。因此如果我們要在index.js中能夠調用math.js中的函數，那么我們需要同時在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;
}

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

初步模塊化

解決第二個問題，也就是命名空間的概念。
我們把math中的函數放進去一個以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定義在一個閉包中，從而隱藏了內部屬性。
index.js

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

到目前為止，我們完成了模塊的簡易定義與使用。但是模塊化的一大精髓是命名空間，就是按需導入，而此時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);
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82281.html

細說 Javascript 拾遺篇（二） : undefined 和 null

摘要：有兩個可以表示空的值，分別是和，比較有作用的是前者。訪問聲明但未初始化的變量。有返回值時函數的表達式沒有顯式的返回任何內容。然而，為了比較其他變量和值，我們需要提前取得的值。因此，從標準實行后，全局變量已經是不再可寫。 Javascript 有兩個可以表示空的值，分別是 undefined 和 null，比較有作用的是前者。 undefined undefined 是一種值為 un...

My_Oh_My 2019-08-19 14:45 評論0 收藏0
angular - 收藏集 - 掘金

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

AlexTuan 2019-08-20 17:19 評論0 收藏0
Javascript簡介

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

Near_Li 2019-08-21 10:40 評論0 收藏0
ES2015入門系列1-初識ES2015

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

hellowoody 2019-08-20 17:37 評論0 收藏0
那些年初識Angular(1)

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

Flink_China 2019-08-02 11:36 評論0 收藏0