js模塊化(AMD/CMD/UMD/ES6 module)

序

模塊化設計，簡單地說就是程序的編寫不是開始就逐條錄入計算機語句和指令，而是首先用主程序、子程序、子過程等框架把軟件的主要結構和流程描述出來，並定義和調試好各個框架之間的輸入、輸出鏈接關係。逐步求精的結果是得到一系列以功能塊爲單位的算法描述。以功能塊爲單位進行程序設計，實現其求解算法的方法稱爲模塊化。模塊化的目的是爲了降低程序複雜度，使程序設計、調試和維護等操作簡單化。

js模塊化常見方式

• 命名空間
• commonJs
• AMD/CMD/UMD
• ES6 module

命名空間法

通常做法“庫名.類別名.方法名”

案例一

var MyModule = {};
MyModule.type = MyModule.type || {};
MyModule.type.method = function () {
    //handle
};

案例二

//YUI模塊化做法

YUI.add('shopClass', function (Y) {
    Y.davglass = function () {
        Y.log('shop here!');
    };
}, '2.0.1', {
    requires: ['flower', 'fruits']
});

YUI.use('shopClass', function (Y) {
    Y.shopClass();
});

//或者
YUI().applyConfig({
    modules: {
        shopClass: {
            fullpath: './shopClass.js'
        }
    }
});

YUI().use('shopClass', function (Y) {
    Y.shopClass();
    //module shopClass will be avaliable here.
});

CommonJS

依賴於nodejs服務端

案例

var students = require('./students');
var teacher = require('./teacher');
var school = require('./school');

var createAppModule = {
    //handle
};

exports = module.exports = createAppModule;

AMD模塊化

AMD是Async Module Definition ，即異步方式的模塊化。
經典案例RequireJS 的模塊化方式。

特點：

• 用require加載模
• 使用define定義模塊
• 依賴前置，提前執行

查看參考規範說明

requirejs案例演示

//定義底層模塊，通常採用匿名法實現
define('student', function () { //通常不寫student
    var student = {};
    student.name = 'zhangwuji';
    student.age = 18;
    return student;
});
//老師模塊,依賴學生模塊student
define('teacher', ['student'], function (student) { // //通常不寫teacher
    var teacher = {};
    teacher.name = 'zhangsanfeng';
    teacher.student = student;
    return teacher;
});

//school模塊,引用模塊student，teacher
require(['student', 'teacher'], function (student, teacher) {
    //handle
});

CMD模塊化

CMD是Common Module Definition，即公共模塊定義法

特點：

• 一個文件一個模塊
• 使用define來定義一個模塊
• 使用require來加載一個模塊
• 懶執行

SeaJS案例演示：

define(function (require, exports, module) {
    var $ = require('jquery');
    var storages = require('./lib/storages');
    //通過exports對外提供接口
    exports.storageSomething = {
        //handle
    };
    //或者 通過 module.exports 提供整個接口
    module.exports = {
        //handle
    }
});

UMD模塊化法

UMD 是Universal Module Definition的縮寫，即通用模塊的定義法。

通用的模塊化方式，首先判斷是否支持AMD，再判斷是否支持CommonJs，否則都沒有的話，則使用全局變量的方式來實現。

案例演示：

(function (win, factory) {
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else if (typeof exports === 'object') {
        module.exports = factory();
    } else {
        win.returnExports = factory();
    }
})(this, function () {
    return {
        //handle
    };
});

ES6 module法

歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發大型的、複雜的項目形成了巨大障礙。

在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，後者用於瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。

es6 模塊化案例

通常採用匿名導出

export default class {
    //handle
}

模塊導入

import test from './test';

更多關於es6模塊化