深入理解模块化编程

小周sir

发布于 2019-09-23 16:28:00

4290

发布于 2019-09-23 16:28:00

1.模块化开发规范

JavaScript中所有对象的属性都是公共的，并没有什么明确的方法来表明属性能否从对象的外部被访问，而有时候我们并不希望对象的属性被外界访问。一种方式方式通过命名约定的形式，比如在变量的前面加下划线（_）。还有一些其他的方式是属性完全私有化。

2.为什么要模块化

在模块化没有出现之前，我们JavaScript脚本大概是这样的：

<script src="module1.js"></script>
    <script src="module2.js"></script>
    <script src="module3.js"></script>
    <script src="module4.js"></script>
    ....

但我们引入多个js文件时，会存在一些问题：

把所有的代码放到全局环境会引起冲突
各个脚本必须按照严格的依赖顺序放置
在大型的项目中，可能会引入很多的js脚本，script就会变得很多，并且难以维护。

为了解决这些问题，涌现了各种模块化的方案。

3.模块化的方式

这种方式是创建对象的一种方法，用于创建具有私有属性的对象。基本思路是使用一个立即执行的函数表达式，返回一个对象。该函数表达式可以包含任意数量的局部变量，这些变量从函数的外部是无法访问到的。因为返回的对象是在自执行函数内部声明的，所以对象中定义的方法可以访问自执行函数内的局部变量，这些方法被具有特权的方法。

 var p2 = (function(){

            var money = 30000;

            return {
                name: 'lisi',
                sayMoney: function(){
                    return money;
                }
            };

        }());

4. CommonJS

我们在前端的js代码在没有模块化之前也能正常执行，但是在服务器端的js脚本必须要被模块化才能正常工作。所以虽然JavaScript在前端发展了这么多年，第一个流行的模块化规范却是由服务器端的js应用发展起来的。CommonJS规范是由NodeJS发扬光大的。

定义模块

在CommonJS规范中，一个单独的JS文件就是一个模块。每个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。

模块输出

模块只有一个出口，module.exports对象，我们需要把需要输出的内容放入该模块

加载模块

加载模块使用require()方法，该方法读取一个文件并执行，返回文件内部的module.exprots对象

例如，我们写了这样一个文件myModule1.js：

var name = '无忌';
function sayName(){
    console.log(name);
};

function sayFullName(firstName){
    console.log(firstName + name);
};
module.exports = {
    printName:sayName,
    printFullName:sayFullName
};

我们的模块定义好了，那我们怎样使用这个模块呢？例如，我们创建了myModule2.js文件：

var module1 = require('./myModule1.js');

module1.printName();
module1.printFullName('张');

在node环境下，require方法在引入其他模块的时候是同步的，可以轻松的控制模块的引入顺序，保证了模块之间的依赖顺序。但是在浏览器中却不是这样的，因为我们的<script>标签天生异步，在加载js文件的时候是异步的，也就意味着不能保证模块之间的正确依赖。

5. AMD规范

AMD即Asynchronous Module Definition，异步模块定义。它是在浏览器端实现模块化开发的规范。由于该规范不是JavaScript原始支持的，使用AMD规范进行开发的时候需要引入第三方的库函数，也就是鼎鼎大名的RequireJS。

RequireJS主要解决两个问题：

多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器。
js加载的时候浏览器会停止页面渲染，加载的文件越多，页面失去响应的时间越长。
定义模块

RequireJS定义了一个define函数，用来定模块。

define(id, [dependencies], factory);

id：可选参数，用来定义模块的标识，如果没有提供参数的话，默认为文件的名字。
dependencies：当前模块依赖的其他模块，数组。
factory：工厂方法，初始化模块需要执行的函数或对象。如果为函数，它只被执行一次。如果是对象，此对象会作为模块的输出值。

// amdModule1.js

define('amdModule1',[],function(){
    
    console.log('模块一');
    
    var name= '张三';
    
    var money = 1000;
    
    var sayName = function(){
        return name;
    }
    var sayMoney = function(){
        return money;
    }
    return {
        sayName:sayName,
        sayMoney:sayMoney
    }
})

// module2.js


define('amdModule2',['amdModule1'],function(amdModule1){
    
    console.log('模块二');
    
    var name = '李四';
    
    var weight = 80;
    
    var sayName = function(){
        return amdModule1.sayName();
    }
    var sayWeight = function(){
        return weight;
    }
    return {
        sayWeight:sayWeight,
        name:name,
        sayName:sayName
    };
})

在页面中加载模块

加载模块需要使用require()函数。

require([dependencies], function(){});

dependencies：该参数是一个数组，表示所依赖的模块。
function：这是一个回调函数，当所依赖的模块都加载成功之后，将调用该回调方法。依赖的模块会以参数的形式传入该函数，从而在回调函数内部就可以使用这些模块。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script src="require.js"></script>
        <script type="text/javascript" src="amdModule1.js"></script>
        <script type="text/javascript" src="amdModule2.js"></script>
        <script type="text/javascript">
            require(['amdModule1','amdModule2'],function(amdModule1,amdModule2){
                console.log(amdModule1.sayName());  //张三
                console.log(amdModule1.name); //undefined
                console.log(amdModule2.sayName()); //张三
                console.log(amdModule2.sayWeight()); //80
            });
        </script>
    </body>
</html>

require()函数在加载依赖的模块时，是异步加载的，这样浏览器就不会失去响应，回调函数只有在所依赖的全部模块都被被成功加载之后才执行，因此，解决了依赖性的问题。

6. CMD规范

CMD即Common Module Definition通用模块定义。它解决的问题和AMD规范是一样的，只不过在模块定义方式和模块加载时机上不同。CMD也需要额外的引入第三方的库文件，SeaJS。

SeaJS推崇一个模块一个文件，遵循统一的写法：

define(id, dependencies, factory);

因为CMD推崇一个文件一个模块，所以经常使用文件名作为模块的ID；CMD推崇就近原则，所以一般不再define的参数中写依赖，在factory函数中写。

require：我们定义的模块可能会依赖其他模块，这个时候就可使用require()引入依赖。
exports：等价于module.exports，只是为了方便我们使用
module.exports：用于存放模块需要暴露的属性

定义模块

// cmdModule1.js

define(function(require,exports,module){
    var name = '张三';
    function sayName(){
        return name;
    }
    module.exports={
        sayName:sayName
    }
})

// cmdModule2.js


define(function(require,exports,module){
    
    var cmdModule1 = require('cmdModule1.js');
    console.log('模块');
    function sayName(){
        return cmdModule1.sayName();
    }
    module.exports={
        sayName:sayName
    }
})

使用模块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script src="sea.js"></script>
        <script src="cmdModule2.js"></script>
        <script src="cmdModule1.js"></script>
        <script type="text/javascript">
            seajs.use(['cmdModule2.js','cmdModule1.js'],function(cmdModule2,cmdModule1){
                console.log(cmdModule2.sayName());
                console.log(cmdModule1.sayName());
            })
        </script>
    </body>
</html>