js-模块化开发总结

一.模块开发的概念

模块化开发是什么：模块化开发是一种生产方式，这种方式生产效率高，维护成本低。从软件开发的角度说，模块化开发是一种开发模式，写代码的一种方式，开发效率高，维护成本低。

为什么需要模块化开发：当一个项目开发的越来越复杂的时候，会遇到一些问题,比如命名冲突（重命名），文件依赖（代码重用时，引入的js文件少了或者顺序不对都会造成js无法运行，例如 jq必须要在bootstrap之前先引入）

二.模块开发的演变过程

1.全局函数：早期开发就是将一些重复的代码封装到函数中，然后将函数放到一个文件中，这种情况下只能认为他们是一个模块，这没有任何模块的概念，

存在的问题：污染全局变量，可能导致命名冲突，模块成员之间看不出联系（？）

2.对象封装--命名空间利用单例模式进行模块化开发

var calculator = { 
    add: function(a, b) { return parseFloat(a) + parseFloat(b); }, 
    subtract: function(a, b) {}, 
    multiply: function(a, b) {}, 
    divide: function(a, b) {} 
};

通过添加命名空间的方式从某种程度上解决了命名冲突的问题，但是并不能从根本上解决命名冲突（？）。不过此时从代码上可以看书那些函数属于同一模块

存在问题：暴露了所有的模块成员，内部状态可以被改写，不安全

3.私有公有成员分离

var calculator = (function () { 
    // 这里形成一个单独的私有的空间 
    // 私有成员的作用： 
    // 1、将一个成员私有化 
    // 2、抽象公共方法（其他成员中会用到的） 
    // 私有的转换逻辑 
    function convert(input){ return parseInt(input); } 
    function add(a, b) { return convert(a) + convert(b); } 
    function subtract(a, b) {} 
    function multiply(a, b) {}
    function divide(a, b) {} 
    return { add : add, subtract : subtract, multiply : multiply, divide : divide } 
})();

1.利用此种方式将函数包装成一个独立的作用域，私有空间的变量和函数不会影响到全局作用域

2.可以有选择的对外暴露成员方法或者成员属性

3.从某种意义上解决了变量名冲突的问题

4. 模块的扩展与维护

// 计算模块
(function (calculator) {
    function convert(input) {
        return parseInt(input);
    }
    calculator.add = function(a, b) {
        return convert(a) + convert(b);
    }
    window.calculator = calculator;
})(window.calculator || {});

// 新增需求
(function (calculator) {
    calculator.remain = function (a , b) {
        return a % b;
    }
    window.calculator = calculator;
})(window.calculator || {});
        
alert(calculator.remain(4,3));

利用此种方式，有利于对庞大的模块的子模块划分。
实现了开闭原则：对新增开发，对修改关闭。对于已有文件尽量不要修改，通过添加新文件的方式添加新功能。

总结：在什么场景下使用模块化开发

业务复杂
重用逻辑非常多
扩展性要求较

单例模式：

用单例模式来实现模块化开发

把描述同一个物体相同的属性和方法放在同一个命名空间下，且命名空间都是单独的个体，并且命名空间之间相互独立不冲突这叫做单例模式

通俗点说单例模式就是一个破对象