子產品化曆史

一、原始寫法

function m1(){
	//...
}

function m2(){
	//...
}

二、對象寫法

var module1 = new Object({
	_count : 0,
　　　　
	m1 : function (){
		//...
	},

	m2 : function (){
		//...
	}

});

這樣的寫法會暴露所有子產品成員，内部狀态可以被外部改寫。比如，外部代碼可以直接改變内部計數器的值。

三、立即執行函數寫法

var module1 = (function(){
	var _count = 0;

	var m1 = function(){
		//...
	};

	var m2 = function(){
		//...
	};

	return {
		m1 : m1,
		m2 : m2
	};
})();

Javascript子產品的基本寫法。

四、放大模式

var module = (function (mod){
	mod.m3 = function () {
		//...
	};
	return mod;
})(module);

上面的代碼為

module

子產品添加了一個新方法

m3()

，然後傳回新的

module

子產品。

五、寬放大模式(Loose augmentation)

var module1 = ( function (mod){

	//...

	return mod;
})(window.module1 || {});

在浏覽器環境中，子產品的各個部分通常都是從網上擷取的，有時無法知道哪個部分會先加載。如果采用上一節的寫法，第一個執行的部分有可能加載一個不存在空對象，這時就要采用"寬放大模式"。

六、輸入全局變量

var module = (function ($, YAHOO) {

	//...

})(jQuery, YAHOO);

獨立性是子產品的重要特點，子產品内部最好不與程式的其他部分直接互動。為了在子產品内部調用全局變量，必須顯式地将其他變量輸入子產品。上面的

module

子產品需要使用

jQuery

庫和

YUI

庫，就把這兩個庫（其實是兩個子產品）當作參數輸入

module

。這樣做除了保證子產品的獨立性，還使得子產品之間的依賴關系變得明顯。

CommonJS規範

NodeJS是CommonJS規範的實作,webpack 也是以CommonJS的形式來書寫。

簡單應用

var math = require('math');
math.add(2,3); // 5

原理

浏覽器不相容CommonJS的根本原因，在于缺少四個Node.js環境的變量.

module

exports

require

global

隻要能夠提供這四個變量，浏覽器就能加載 CommonJS 子產品。

var module = {
  exports: {}
};

(function(module, exports) {
  exports.multiply = function (n) { return n * 1000 };
}(module, module.exports))

var f = module.exports.multiply;
f(5) // 5000

上面代碼向一個立即執行函數提供 module 和 exports 兩個外部變量，子產品就放在這個立即執行函數裡面。子產品的輸出值放在 module.exports 之中，這樣就實作了子產品的加載。

2、Browserify 的實作

知道了原理，就能做出工具了。Browserify是目前最常用的

CommonJS

格式轉換的工具。

請看一個例子，

main.js

子產品加載

foo.js

子產品。

// foo.js
module.exports = function(x) {
  console.log(x);
};

// main.js
var foo = require("./foo");
foo("Hi");

使用下面的指令，就能将main.js轉為浏覽器可用的格式。

$ browserify main.js > compiled.js

Browserify到底做了什麼？安裝一下browser-unpack，就能看清楚了。

$ npm install browser-unpack -g

然後，将前面生成的compile.js解包。

$ browser-unpack < compiled.js

[
  {
    "id":1,
    "source":"module.exports = function(x) {\n  console.log(x);\n};",
    "deps":{}
  },
  {
    "id":2,
    "source":"var foo = require(\"./foo\");\nfoo(\"Hi\");",
    "deps":{"./foo":1},
    "entry":true
  }
]

可以看到，

browerify

将所有子產品放入一個數組，

id

屬性是子產品的編号，

source

屬性是子產品的源碼，

deps

屬性是子產品的依賴。

因為

main.js

裡面加載了

foo.js

，是以

deps

屬性就指定

./foo

對應1号子產品。執行的時候，浏覽器遇到

require('./foo')

語句，就自動執行1号子產品的

source

屬性，并将執行後的

module.exports

屬性值輸出。

3、Tiny Browser Require

雖然

Browserify

很強大，但不能在浏覽器裡操作，有時就很不友善。

我根據

mocha

的内部實作，做了一個純浏覽器的

CommonJS

子產品加載器tiny-browser-require。完全不需要指令行，直接放進浏覽器即可，所有代碼隻有30多行。

它的邏輯非常簡單，就是把子產品讀入數組，加載路徑就是子產品的id。

function require(p){
  var path = require.resolve(p);
  var mod = require.modules[path];
  if (!mod) throw new Error('failed to require "' + p + '"');
  if (!mod.exports) {
    mod.exports = {};
    mod.call(mod.exports, mod, mod.exports, require.relative(path));
  }
  return mod.exports;
}

require.modules = {};

require.resolve = function (path){
  var orig = path;
  var reg = path + '.js';
  var index = path + '/index.js';
  return require.modules[reg] && reg
    || require.modules[index] && index
    || orig;
};

require.register = function (path, fn){
  require.modules[path] = fn;
};

require.relative = function (parent) {
  return function(p){
    if ('.' != p.charAt(0)) return require(p);
    var path = parent.split('/');
    var segs = p.split('/');
    path.pop();

    for (var i = 0; i < segs.length; i++) {
      var seg = segs[i];
      if ('..' == seg) path.pop();
      else if ('.' != seg) path.push(seg);
    }

    return require(path.join('/'));
  };
};

使用的時候，先将上面的代碼放入頁面。然後，将子產品放在如下的立即執行函數裡面，就可以調用了。

<script src="require.js" /><script>

require.register("moduleId", function(module, exports, require){
  // Module code goes here
});
var result = require("moduleId");
</script>

還是以前面的

main.js

加載

foo.js

為例。

require.register("./foo.js", function(module, exports, require){
  module.exports = function(x) {
    console.log(x);
  };
});

var foo = require("./foo.js");
foo("Hi");

注意，這個庫隻模拟了

require

、

module

、

exports

三個變量，如果子產品還用到了

global

或者其他

Node

專有變量（比如

process

），就通過立即執行函數提供即可。

加載機制

CommonJS子產品的加載機制是，輸入的是被輸出的值的拷貝。也就是說，一旦輸出一個值，子產品内部的變化就影響不到這個值，但是引用類型的資料,如對象,數組還是會受影響。

AMD規範

因為CommonJS規範是同步的，如果加載時間很長，整個應用就會停在那裡等。這對伺服器端不是一個問題，因為所有的子產品都存放在本地硬碟，可以同步加載完成，等待時間就是硬碟的讀取時間。但是，對于浏覽器，這卻是一個大問題，因為子產品都放在伺服器端，等待時間取決于網速的快慢，可能要等很長時間，浏覽器處于"假死"狀态。

是以，浏覽器端的子產品，不能采用"同步加載"（synchronous），隻能采用"異步加載"（asynchronous）。這就是AMD規範誕生的背景。

CommonJS是主要為了JS在後端的表現制定的，他是不适合前端的，AMD(異步子產品定義)出現了，它就主要為前端JS的表現制定規範。

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步子產品定義"。它采用異步方式加載子產品，子產品的加載不影響它後面語句的運作。所有依賴這個子產品的語句，都定義在一個回調函數中，等到加載完成之後，這個回調函數才會運作。

AMD也采用require()語句加載子產品，但是不同于CommonJS，它要求兩個參數：

require([module], callback);

第一個參數[module]，是一個數組，裡面的成員就是要加載的子產品；第二個參數callback，則是加載成功之後的回調函數。如果将前面的代碼改寫成AMD形式，就是下面這樣：

require(['math'], function (math) {
	math.add(2, 3);
});

math.add()與math子產品加載不是同步的，浏覽器不會發生假死。是以很顯然，AMD比較适合浏覽器環境。目前，主要有兩個Javascript庫實作了AMD規範：require.js和curl.js。

詳細概括：下面以RequireJS為例說明AMD規範

require.js的誕生，就是為了解決這兩個問題：

一、為什麼要用require.js？

（1）實作js檔案的異步加載，避免網頁失去響應；

（2）管理子產品之間的依賴性，便于代碼的編寫和維護。

二、require.js的加載

<script src="js/require.js" defer async="true" ></script>

加載require.js以後，下一步就要加載我們自己的代碼了。假定我們自己的代碼檔案是main.js，也放在js目錄下面。那麼，隻需要寫成下面這樣就行了：

<script src="js/require.js" data-main="js/main"></script>

data-main屬性的作用是，指定網頁程式的主子產品。在上例中，就是js目錄下面的main.js，這個檔案會第一個被require.js加載。由于require.js預設的檔案字尾名是js，是以可以把main.js簡寫成main。

三、主子產品的寫法

// main.js

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
	// some code here
});

require.js會先加載jQuery、underscore和backbone，然後再運作回調函數。主子產品的代碼就寫在回調函數中。

四、子產品的加載

上一節最後的示例中，主子產品的依賴子產品是[‘jquery’, ‘underscore’, ‘backbone’]。預設情況下，require.js假定這三個子產品與main.js在同一個目錄，檔案名分别為jquery.js，underscore.js和backbone.js，然後自動加載。

使用require.config()方法，我們可以對子產品的加載行為進行自定義。require.config()就寫在主子產品（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個子產品的加載路徑。

require.config({
	paths: {
		"jquery": "lib/jquery.min",
		"underscore": "lib/underscore.min",
		"backbone": "lib/backbone.min"
	}
});

require.config({
	baseUrl: "js/lib",
	paths: {
		"jquery": "jquery.min",
		"underscore": "underscore.min",
		"backbone": "backbone.min"
	}
});

require.config({
	paths: {
		"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
	}
});

require.js要求，每個子產品是一個單獨的js檔案。這樣的話，如果加載多個子產品，就會發出多次HTTP請求，會影響網頁的加載速度。是以，require.js提供了一個優化工具，當子產品部署完畢以後，可以用這個工具将多個子產品合并在一個檔案中，減少HTTP請求數。

五、AMD子產品的寫法

require.js加載的子產品，采用AMD規範。也就是說，子產品必須按照AMD的規定來寫。

具體來說，就是子產品必須采用特定的define()函數來定義。如果一個子產品不依賴其他子產品，那麼可以直接定義在define()函數之中。

簡單示例

define(function(){
	var exports = {};
	exports.method = function(){...};
	return exports;
});

假定現在有一個math.js檔案，它定義了一個math子產品。那麼，math.js就要這樣寫：

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

加載方法如下：

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

如果這個子產品還依賴其他子產品，那麼define()函數的第一個參數，必須是一個數組，指明該子產品的依賴性。

define(['myLib'], function(myLib){
	function foo(){
		myLib.doSomething();
	}
	return {
		foo : foo
	};
});

當require()函數加載上面這個子產品的時候，就會先加載myLib.js檔案。

六、加載非規範的子產品

這樣的子產品在用require()加載之前，要先用require.config()方法，定義它們的一些特征。

舉例來說，underscore和backbone這兩個庫，都沒有采用AMD規範編寫。如果要加載它們的話，必須先定義它們的特征。

require.config({
	shim: {
		'underscore':{
			exports: '_'
		},
		'backbone': {
			deps: ['underscore', 'jquery'],
			exports: 'Backbone'
		}
	}
});

require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性之外，還有一個shim屬性，專門用來配置不相容的子產品。具體來說，每個子產品要定義（1）exports值（輸出的變量名），表明這個子產品外部調用時的名稱；（2）deps數組，表明該子產品的依賴性。

七、require.js插件

require.js還提供一系列插件，實作一些特定的功能。

domready插件，可以讓回調函數在頁面DOM結構加載完成後再運作。

require(['domready!'], function (doc){
	// called once the DOM is ready
});

text和image插件，則是允許require.js加載文本和圖檔檔案。

define(
	['text!review.txt','image!cat.jpg'],
	function(review,cat){
		console.log(review);
		document.body.appendChild(cat);
	}
);

類似的插件還有json和mdown，用于加載json檔案和markdown檔案。

這有AMD的WIKI中文版，講了很多蠻詳細的東西，用到的時候可以檢視：AMD的WIKI中文版

CMD規範

官網位址

define(function(require,exports,module){...});

SeaJS與 RequireJS 的異同

相同之處

RequireJS 和 Sea.js 都是子產品加載器，倡導子產品化開發理念，核心價值是讓 JavaScript 的子產品化開發變得簡單自然。

不同之處

定位有差異。RequireJS 想成為浏覽器端的子產品加載器，同時也想成為 Rhino / Node 等環境的子產品加載器。Sea.js 則專注于 Web 浏覽器端，同時通過 Node 擴充的方式可以很友善跑在 Node 環境中。
遵循的規範不同。RequireJS 遵循 AMD（異步子產品定義）規範，Sea.js 遵循 CMD （通用子產品定義）規範。規範的不同，導緻了兩者 API 不同。Sea.js 更貼近 CommonJS Modules/1.1 和 Node Modules 規範。
推廣理念有差異。RequireJS 在嘗試讓第三方類庫修改自身來支援 RequireJS，目前隻有少數社群采納。Sea.js 不強推，采用自主封裝的方式來“海納百川”，目前已有較成熟的封裝政策。
對開發調試的支援有差異。Sea.js 非常關注代碼的開發調試，有 nocache、debug 等用于調試的插件。RequireJS 無這方面的明顯支援。
插件機制不同。RequireJS 采取的是在源碼中預留接口的形式，插件類型比較單一。Sea.js 采取的是通用事件機制，插件類型更豐富。
SeaJS隻會在真正需要使用(依賴)子產品時才執行該子產品,執行子產品的順序也是嚴格按照子產品在代碼中出現(require)的順序;而RequireJS會先盡早地執行(依賴)子產品, 相當于所有的require都被提前了, 而且子產品執行的順序也不一定100%就是先mod1再mod2. 注意我這裡說的是執行(真正運作define中的代碼)子產品,而非加載(load檔案)子產品.子產品的加載都是并行的, 沒有差別, 差別在于執行子產品的時機,或者說是解析.RequireJS的做法是并行加載所有依賴的子產品, 并完成解析後, 再開始執行其他代碼, 是以執行結果隻會"停頓"1次, 完成整個過程是會比SeaJS要快.而SeaJS一樣是并行加載所有依賴的子產品, 但不會立即執行子產品, 等到真正需要(require)的時候才開始解析, 這裡耗費了時間, 因為這個特例中的子產品巨大, 是以造成"停頓"2次的現象, 這就是我所說的SeaJS中的"懶執行".

總之，如果說 RequireJS 是 Prototype 類庫的話，則 Sea.js 緻力于成為 jQuery 類庫。

ES6 Modules

ES6正式提出了内置的子產品化文法，我們在浏覽器端無需額外引入requirejs來進行子產品化。

ES6中的子產品有以下特點：

子產品自動運作在嚴格模式下
在子產品的頂級作用域建立的變量，不會被自動添加到共享的全局作用域，它們隻會在子產品頂級作用域的内部存在；
子產品頂級作用域的 this 值為 undefined
對于需要讓子產品外部代碼通路的内容，子產品必須導出它們

定義子產品

使用export關鍵字将任意變量、函數或者類公開給其他子產品。

//導出變量
export var color = "red";
export let name = "cz";
export const age = 25;

//導出函數
export function add(num1,num2){
    return num1+num2;
}

//導出類
export class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
}

function multiply(num1, num2) {
    return num1 * num2;
}

//導出對象，即導出引用
export {multiply}

重命名子產品

重命名想導出的變量、函數或類的名稱

function sum(num1, num2) {
    return num1 + num2;
}

export {sum as add}

這裡将本地的sum函數重命名為add導出，是以在使用此子產品的時候必須使用add這個名稱。

導出預設值

子產品的預設值是使用 default 關鍵字所指定的單個變量、函數或類，而你在每個子產品中隻能設定一個預設導出。

export default function(num1, num2) {
    return num1 + num2;
}

此子產品将一個函數作為預設值進行了導出， default 關鍵字标明了這是一個預設導出。此函數并不需要有名稱，因為它就代表這個子產品自身。對比最前面使用export導出的函數，并不是匿名函數而是必須有一個名稱用于加載子產品的時候使用，但是預設導出則無需一個名字，因為子產品名就代表了這個導出值。

也可以使用重命名文法來導出預設值。

function sum(num1, num2) {
    return num1 + num2;
}

export { sum as default };

加載子產品

在子產品中使用import關鍵字來導入其他子產品。

import 語句有兩個部分，一是需要導入的辨別符，二是需導入的辨別符的來源子產品。此處是導入語句的基本形式：

import { identifier1,identifier2 } from "./example.js"

大括号中指定了從給定子產品導入的辨別符
from指明了需要導入的子產品。子產品由一個表示子產品路徑的字元串來指定。

當從子產品導入了一個綁定時，你不能在目前檔案中再定義另一個同名變量（包括導入另一個同名綁定），也不能在對應的 import 語句之前使用此辨別符，更不能修改它的值。

導入單個綁定

如果一個子產品隻導出了一個函數（或變量或類），或者導出了多個接口但是隻選擇導入其中的一個，那麼就可以寫成下面單個導入的模式：

import {sum} from './example.js'

導入多個綁定

從一個子產品中導入多個綁定：

import {sum,multiply} from './example.js'

完全導入一個子產品

還有一種情況，就是将整個子產品當做單一對象導入，該子產品的所有導出都會作為對象的屬性存在：

import * as example from './example.js'
example.sum(1,2);
example.multiply(2,3);

在此代碼中， example.js 中所有導出的綁定都被加載到一個名為 example 的對象中，具名導出（ sum() 函數、 multiple() 函數）都成為 example 的可用屬性。

這種導入格式被稱為命名空間導入，這是因為該 example 對象并不存在于 example.js 檔案中，而是作為一個命名空間對象被建立使用，其中包含了 example.js 的所有導出成員。

然而要記住，無論你對同一個子產品使用了多少次 import 語句，該子產品都隻會被執行一次。

在導出子產品的代碼執行之後，已被執行個體化的子產品就被保留在記憶體中，并随時都能被其他 import 所引用.

import { sum } from "./example.js";
import { multiply } from "./example.js";
import { magicNumber } from "./example.js";

盡管此處的子產品使用了三個 import 語句，但 example.js 隻會被執行一次。若同一個應用中的其他子產品打算從 example.js 導入綁定，則那些子產品都會使用這段代碼中所用的同一個子產品執行個體。

重命名導入

與導出相同，我們同樣可以重命名導入的綁定：

import { sum as add} from './example.js'

導入預設值

如果一個子產品導出了預設值，那麼可以這樣導入預設值：

import sum from "./example.js";

這個導入語句從 example.js 子產品導入了其預設值。注意此處并未使用花括号，與之前在非預設的導入中看到的不同。本地名稱 sum 被用于代表目标子產品所預設導出的函數，是以無需使用花括号。

如果一個子產品既導出了預設值、又導出了一個或更多非預設的綁定的子產品：

export let color = "red";

export default function(num1, num2) {
    return num1 + num2;
}

可以像下面這樣使用一條import語句來導入它的所有導出綁定：

import sum,{color} from "./example.js"

逗号将預設的本地名稱與非預設的名稱分隔開，後者仍舊被花括号所包裹。

要記住在 import 語句中預設名稱必須位于非預設名稱之前。

導入的再導出

有時想在目前的子產品中将已導入的内容再導出去，可以像下面這樣寫：

import {sum} from './example.js'
……
export {sum}

但是有一種更簡潔的方法：

export {sum} from './example.js'

同樣可以重命名：

export { sum as add } from "./example.js";

也可以使用完全導出：

export * from "./example.js";

限制

export 與 import 都有一個重要的限制，那就是它們必須被用在其他語句或表達式的外部，而不能使用在if等代碼塊内部。原因之一是子產品文法需要讓 JS 能靜态判斷需要導出什麼，正因為此，你隻能在子產品的頂級作用域使用 export與import。

# 相容

AMD規範允許輸出的子產品相容CommonJS規範，這時define方法需要寫成下面這樣：

define(function(require,exports,module){
    var someModule = require("someModule");
    var anotherModule = require("anotherModule");
    ……
    exports.asplode = function(){

    }
})

參考資料

SeaJS與RequireJS的異同
CommonJS、requirejs、ES6的對比
SeaJS與RequireJS最大的差別
阮一峰教程

JS子產品化:CommonJS，AMD與CMD# 相容

子產品化曆史

CommonJS規範

AMD規範

CMD規範

ES6 Modules

限制

# 相容

參考資料

繼續閱讀

attachEvent 與addEventListener 差別

Java調用DOS指令

Java調用DOS指令方法

如何存取圖檔到資料庫(SQL Server)

以管理者身份在目前目錄打開指令行視窗以管理者身份在目前目錄打開指令行視窗

用JS模拟實作二叉樹(含周遊)

Windows 通過指令行設定環境變量

Windows指令行打開方式Windows指令行打開方式

Windows辦公技能——在目前檔案夾中打開指令行視窗

VBA調用cmd指令行下執行的指令

在目前位置打開指令行視窗的技巧

關于 underscore 中模闆引擎的應用示例

【JavaScript文法】函數對象的淺拷貝、深拷貝

JS--運算符

數組和類數組

jquery_126_demo