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