js模块化编程与AMD规范

模块就是实现特定功能的一组方法。

随着前端项目的日渐庞大，前端工程模块化成为必须。

原始写法

定义：

function func1() {
    // statement
}

function func2() {
    // statement
}

使用：

func1();
func2();

缺点：

• 函数名污染了全局变量
• 可能与其他模块冲突
• 模块之间的依赖关系不明显

对象写法

将模块写成一个对象。

定义：

var module_name = new Object({
    count: 0,
    func1: function() {},
    func2: function() {}
});

使用：
module_name.func1();
module_name.count

缺点：
会暴露模块的所有属性和方法，外部可以随意改写模块。

IIFE

使用立即执行函数可以不暴露模块中的属性和方法。

定义：

IIFE写法

var module_name = (function(){
    var count = 0;
    var func1 = function() {

    };
    var func2 = function() {

    };

    return {
        func1: func1,
        func2: func2
    };
})();

这样外部就无法读取模块内部的属性和方法了。

放大模式

module_name模块

var module_name = (function(mod){
    mod.func3 = function() {
        // statement
    }
})(module_name);

module_name模块被添加了一个新的方法func3()，也就是被放大了。

宽放大模式

就是让放大模式的参数可以为空对象。

var module_name = (function (mod) {
    // ...
    return mod;
})(window.module_name || {});

输入全局变量

模块是独立的，想要在模块内部调用全局变量必须显式地将变量传入模块。

var module_name = (function(brand_a, brand_b){
    // ...
})(samsung, apple);

模块规范

流行的js模块规范有CommonJS和AMD。

CommonJS（适合后端）

node.js的模块化就是参考CommonJS设计的。

CommonJS使用require()加载模块。

require()

var math = require('math');

调用模块中的方法

var math = require('math');
math.add(1,2);

浏览器环境

上面使用CommonJS如果运行在浏览器会有问题，浏览器要等待require()完成才能继续执行。

故而，为了采用异步加载，AMD诞生了。

AMD规范（适合浏览器端）

AMD就是异步模块定义，加载是异步的。

AMD规范的实现有require.js和curl.js

AMD也是用require()加载模块，但是有两个参数。

require([module1, module2], callback);