前段模块化开发——AMD规范

CommonJS

commonJS用于服务端node.js的模块化

1. 定义模块
   根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性

2. 模块输出：
   模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象

3. 加载模块：
   加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象

commonJS用于node.js服务端的同步加载，而浏览器端的异步脚本加载使得不能使用commonJS

AMD规范

AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范
1. define和require这两个定义模块、调用模块的方法，合称为AMD模式。它的模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。
2. Define：定义模块

define( id?, dependencies?, factory );    
1. 第一个参数 id 为字符串类型，表示了模块标识，为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在，那么模块标识必须为顶层的或者一个绝对的标识。
2. 第二个参数，dependencies ，是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。
3. 第三个参数，factory，是一个需要进行实例化的函数或者一个对象。

示例：

define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
    export.verb = function(){
        return beta.verb();
        // or:
        return require("beta").verb();
    }
});

匿名模块:
define 方法允许省略第一个参数，这样就定义了一个匿名模块，这时候模块文件的文件名就是模块标识

define(["alpha"], function (alpha) {
　　return {
　　    verb: function(){
　　        return alpha.verb() + 2;
　　    }
　　}; 
});

独立模块:
被定义的模块是一个独立模块，不需要依赖任何其他模块，可以直接用define方法生成。

define({
    method1: function() {},
    method2: function() {},
});

//or
define(function () {
    return {
        method1: function() {},
        method2: function() {},
    };
});

3.Require:调用模块
require方法用于调用模块。它的参数与define方法类似。

//数组是模块的依赖
require(['foo', 'bar'], function ( foo, bar ) {
        foo.doSomething();
});

动态加载模块

define(function ( require ) {
    var isReady = false, foobar;

    require(['foo', 'bar'], function (foo, bar) {
        isReady = true;
        foobar = foo() + bar();

    return {
        isReady: isReady,
        foobar: foobar
    };
});