JS 3種規範 CommonJS AMD UMD

JS 3種規範 CommonJS AMD UMD

標籤（空格分隔）： CommonJS AMD UMD

---

參考文章：
1.commonJS、AMD、UMD 快速概覽： http://web.jobbole.com/82238/
2.詳解 commonJS、AMD、UMD : http://www.cnblogs.com/chenguangliang/p/5856701.html
3.AMD編譯過程講解: http://web.jobbole.com/85382/?utm_source=blog.jobbole.com&utm_medium=relatedPosts

1.CommonJS (nodejs 模塊規範實現)

寫法：require(‘xxx’) // 同步加載模塊

分析：
a.對服務器端幾乎不影響，因爲是讀取本地文件
b.對前端瀏覽器使用有影響，需要等待網絡時間來導入包

優缺點：
優點：規範後端編程規範和包管理
缺點：同步加載模塊，對前端的時間響應有影響

commonJS 如何使用?

cmd 導出包:

var xxx = {}
module.exports = xxx

cmd 引入包:

var xxx = require('xxx')

2.AMD (Asynchronous Module Definition)

寫法：define([‘a’,’b’],function(a,b){}) // 異步代碼，適用於前端和後端

第三方庫：

主要有兩個Javascript庫實現了AMD規範：require.js 和 curl.js。

require 如何使用?

配置

require.config({
    baseUrl: "js/lib",
    paths: {
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",
　　　　"underscore": "underscore.min",
        "backbone": "backbone.min"
　　　　}
　　});

AMD 如何使用?

AMD導出包:
返回的是一個對象

// math.js
define(function (){
　　var add = function (x,y){
　　　　return x+y;
　　};
　　return {
　　　　add: add
　　};
});

// main.js
//如果依賴其他包,依賴包參數必須是 **數組**：
define(['otherLib'], function(otherLib){
　　function foo(){
　　　　myLib.doSomething();
　　}
　　return {
　　　　foo : foo
　　};
});

AMD引用包：

require(['math'], function (math){
　　alert(math.add(1,1));
});

3.UMD (同時支持上述兩種規範)

用法：(function(root,fn){}(this,fn))

例子：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之類的
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // 瀏覽器全局變量(root 即 window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    方法
    function a(){};    //    私有方法，因爲它沒被返回 (見下面)
    function b(){};    //    公共方法，因爲被返回了
    function c(){};    //    公共方法，因爲被返回了

    //    暴露公共方法
    return {
        b: b,
        c: c
    }
}));