高级4-模块化

1. 为什么要使用模块化？

最主要的目的：
解决命名冲突
依赖管理

其他价值：
提高代码可读性
代码解耦，提高复用性

2.CMD、AMD、CommonJS 规范分别指什么？有哪些应用

CommonJS: 服务器端的模块化

流程：
1.定义模块 根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
2.模块输出： 模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象
3.加载模块： 加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象
示例：

//定义模块a.js
function sayHello(){
    console.log('HelloWorld!')
}
module.exports = {
    sayHello: sayHello
}

//同一路径b.js中加载该模块
var sayModule = require('./a.js')
sayModule.sayHello()

AMD：Asynchronous Module Definition，异步模块定义，一个在浏览器端模块化开发的规范

requireJS主要解决两个问题：
1.多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
2.js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长
示例：

//定义模块a.js
define(['dependency'], function(){
    function sayHello{
        console.log('HelloWorld!')
    }
    return {
        sayHello: sayHello
    }
})

//加载该模块
require(['a'], function(my){
    my.sayHello()
})

优点： RequireJS是前端模块化工具的老牌，它在推广过程中推出了AMD的开发理念，解放了生产力，在推出初期拥有不可磨灭的影响力，同时在它的发展过程中推出了许多插件，促进了整个生态的发展，也为广大前端开发者提供了极大的便利。

缺点： 在多个文件同时加载的过程中，会产生过多请求，浪费网络资源，降低性能；必须引入require.js文件，对于轻量级应用而言，尤其是移动端项目，未免有些臃肿庞大。

CMD：Common Module Definition，通用模块化定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同

//定义模块a.js
define(function(require, exports, module){
    var $ = require('jquery.js')    //接受其他模块的接口
        console.log($(window).width())    //需要jquery时加载
    exports.init = function(){
        //实现代码
    }
        var sayHello = require('sayHello.js')    //需要sayHello时加载
        console.log('sayHello.name'+'loaded')
})
//加载模块
<script src='sea.js'></script>
<script>seajs.use(['a.js']), function(my){
    my.init()
}</script>

优点： CMD规范推崇依赖后置，我们可以在需要使用模块的地方再使用引入语句 require，更符合人的自然思维，而不需要像Require.js一样在定义一个模块的时候就把依赖写上（新版本的RequireJS好像也可以依赖后置了）。

缺点： sea.js的文档不完善，社区衰落。
3.
代码
demo