模块化-向日葵屋

模块化

1.什么是模块化？

它是将一个复杂的系统分解为多个模块，方便编码。

2.为什么要用模块化？

降低复杂性，降低代码的耦合度，部署方便，提高效率

3.模块化的好处？

1.避免命名冲突，减少变量空间污染
2.更好的分离代码，按需加载
3.更高复用性
4.更高可维护性

4.模块化规范
4-1.什么是CommonJs

据CommonJs规范规定每一个Js文件都可以看做一个模块，其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。该规范最初是用在服务端的node环境中。
CommonJs采用同步加载不同模块文件，适用于服务端的。因为模块文件都存在服务端的各个硬盘上，读取加载时间快，适合服务端，不适应浏览器。
浏览器不兼容CommonJs,原因是浏览器缺少module, exports, require,global四个环境变量。如要使用需要工具转换(可以通过工具转换browserify 就可以在浏览器中使用 browserify main.js -o bundle.js)。
CommonJs的核心思想就是通过require方法来同步加载所需依赖的其他模块，然后通过exports或者module.exports来导出需要暴露的接口。
暴露接口方式：
module.exports = value;
exports.xxx = value;
暴露的模块是什么（exports的本质是什么？）：
exports本质是一个空对象。
引入模块var m1 = require(’./module/xxx’);

4-2.什么是AMD

AMD规范则是异步加载模块，允许指定回调函数。等模块异步加载完成后即可调用回调函数。AMD得意的产物就是require.js
AMD的核心思想就是通过define来定义一个模块，通过return …暴露出去，然后使用require来加载一个模块。AMD规范的使用依赖于require.js

需要一个主入口文件main.js，放到index.html
<script src='require.js' data-main='main.js'></script>
//main.js
<script>
    (function(){
        require.config({
            paths:{
                index:'../module/index',//引入所有用到的模块
                module1:'../module/modul1'
            }
        });
        require(['index'],function(index){
        })
    })();
</script>
//index.js
<script>
    define(moudleId,['module1'],function(m1){
        return {
        }
    })
</script>

4-3.CMD规范

CMD异步加载，跟AMD的主要区别在于，AMD依赖前置，提前加载依赖。而CMD就近加载，按需加载。主要产物是seaJs，CMD的核心思想就是通过define来定义一个模块，然后使用require来加载一个模块。

需要一个主入口文件，放到index.html
<script>seajs.use('main.js')</script>
//module1
define(function(require,exports,module){
    var arr = [1,2,4];
    exports.module1 = arr;
})
//main.js
define(function(require){
    var module1 = require('module1.js');
})