初識EMCASCRIPT 模塊化

時間 2019-11-07

標籤 emcascript 模塊化简体版

原文原文鏈接

爲何須要模塊化？

當咱們在html中調用一個js函數時，若是咱們把這個函數寫在另外的一個js文件中，那麼調用的時候咱們須要在html的頭部引入那個js文件。javascript

index.htmlhtml

<head>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <h1 id="boy">Hello world</h1>
    <input type="button" onclick="Girl()" value="click">
</body>
</html>

index.jsjava

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閉包

<head>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="math.js"></script>
</head>
<body>
    <h1 id="boy">Hello world</h1>
    <input type="button" onclick="Girl()" value="click">
</body>
</html>

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模塊化編程很重要code

初步模塊化

解決第二個問題，也就是命名空間的概念。
咱們把math中的函數放進去一個以math命名的對象中,這樣就造成了一個簡易版的命名空間了。htm

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);
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。