初识EMCASCRIPT 模块化

2019年8月31日 195次阅读 来源: jackzong

为何须要模块化？

当我们在html中挪用一个js函数时，假如我们把这个函数写在别的的一个js文件中，那末挪用的时刻我们须要在html的头部引入谁人js文件。

index.html

<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.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

<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模块化编程很主要

开端模块化

处理第二个题目，也就是定名空间的观点。
我们把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);
}
    原文作者：jackzong
    原文地址: https://segmentfault.com/a/1190000008880751
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞