模块化

1、模块化

• 为什么要使用模块化
  Javascript在发展初期就是为了实现简单的页面交互逻辑，故简单的引入几个脚本即可满足需求；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等各种前端库层出不穷，前端代码日益膨胀；
  这时候的JavaScript作为嵌入式脚本语言的定位动摇了，JavaScript没有为组织代码提供任何明显帮助，甚至没有类 or package的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码了。

• 模块化的作用：
  主要目的：解决命名冲突、依赖管理
  其他目的：提高代码可读性、代码解耦（提高复用性）

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

**CommonJS : **
CommonJS主要是针对服务端的一个模块化规范，是NodeJS中的规范标准

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

demo 一个简单的例子

//模块定义 myModel.js
var name = 'my'

function printName() {
  console.log(name)
}
function printFullName(firstName) {
  console.log(firstName + name)
}
//模块输出
modules.exports = {
  printName : printName,
  printFullName : printFullName
}


//加载模块
var nameModule = require('myModel.js');
nameModule.printName();

AMD:
AMD(Asynchronous Module Definition),即异步模块定义，这是一个在浏览器端模块化开发的规范

由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是被广泛运用的RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出

RequireJS 主要解决了两个问题

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

demo:一个requireJS的例子

定义模块myModule.js
define(['myModule'],function() {
  var name =  'my'
  function printName(){
        console.log(name);
    }

  return {
    printName: printName
  };
})

//加载模块
require(['myModule'],function(my) {
  my.printName()
})

语法分析
requireJS定义了一个函数 define，它是全局变量，用来定义模块
define(id?, dependencies?, factory)

• 1、id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
• 2、dependencies：是一个当前模块依赖的模块名称数组
• 3、factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值

加载模块
require([dependencies], function(){});

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

语法
定义模块
define(id?, deps?, factory)

• 一个文件一个模块，所以经常就用文件名作为模块id
• CMD推崇依赖就近，所以一般不在define的参数中写依赖，在factory中有三个参数function(require, exports, module)
  1、require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口
  2、exports 是一个对象，用来向外提供模块接口
  3、module 是一个对象，上面存储了与当前模块相关联的一些属性和方法

demo

// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加载模块
seajs.use(['myModule.js'], function(my){

});