高级任务4-模块化

为什么要使用模块化？

• 解决命名冲突
  在浏览器运行的 js 实际上会合并代码挂载到全局对象（window）下，虽然有匿名函数，但对于变量和定义好的函数名，是很有可能冲突的。同时，如果多人合作，命名冲突就更可能发生了，此时就需要解决这个问题了。

• 依赖管理
  代码不可能全写再一个文件里，我们都会分开几个甚至几十个文件，这样拆分更容易维护，便于重用封装。但这些文件的依赖关系可能很混杂，顺序很重要，比如我们再引用 jQuery 的时候，在所有用到 jQ 的代码前引入，这是常识，但依赖有很多的时候，比如 100 个，这样人为去维护顺序就显的力不从心了。

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

• CommonJS 规范
  Node的出现才是js真正模块化的开始。每个文件就是一个模块，有自己的作用域。CommonJS规范规定每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性是对外的接口。加载某个模块，其实是加载该模块的module.exports，require方法用于加载模块。

// a.js
var aFnc = function () {
  console.log('this is a!')
}
var a = 1
module.exports.a = a
module.exports.aFnc = aFnc

//b.js
var a = require('./a.js')
console.log(a.a)
a.aFnc()

对于服务端语言，模块化就是读取下文件内容的事情，是同步进行的，因为读取硬盘速度很快，可以等待。但在浏览器里，同步等待js 的加载可能会出现因为网速问题，导致网页加载时间过长，因此需要新的标准。

• AMD是“Asynchronous Module Definition”的缩写，意思就是“异步模块定义”。是RequireJS在推广过程中的规范化产出。该规范定义了一个函数define，它是全局变量。

单独模块的定义：

define({
  method: function(){}
})

//另一种写法
define(function(){
  return {
    method: function(){}
  }
})

非独立模块：

define(['module1', 'module2'], function(m1, m2){
  ...
})

• CMD 规范
  CMD 是 SeaJS 在推广过程中的规范化产出。

与 AMD 的区别：
对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
CMD 推崇依赖就近，AMD 推崇依赖前置

模块定义：

define(function(require, exports, module) {   
  var a = require('./a')   
  a.doSomething()   
  // 此处略去 100 行   

  var b = require('./b') 
  // 依赖可以就近书写   
  b.doSomething()   
  // ... 
})

• 应用
  CommonJS 适用于服务端，基于 Node，可用 Glup、 Webpack 之类的打包压缩再用于浏览器环境。
  AMD 用于浏览器环境，如 RequireJS
  CMD 用于浏览器环境， SeaJS 推广中产出

使用 requirejs 完善入门任务15

源码地址：https://github.com/jirengu-inc/jrg-renwu11/tree/master/homework/%E5%BC%A0%E6%99%93%E8%BE%B0/require