JavaScript 模組化簡述
- 阿神原創
- 2017-02-03 17:48:011240瀏覽
前言
關於模組化，最直接的表現就是我們寫的require 和import 關鍵字，如果查閱相關資料，就一定會遇到CommonJS 、C AMD AMD），以及ReMD等陌生框架。例如SeaJS 的官網這樣描述自己: 「簡單友善的模組定義規範，Sea.js 遵循CMD 規範。自然直覺的程式碼組織方式，依賴的自動載入…」
作為前端新手，我表示實在是一臉懵逼，理解不能。按照我一貫的風格，介紹一個東西之前總得解釋為什麼需要這個東西。
JavaScript 基礎
做客戶端的同學對 OC 的 #import "classname"、Swift 的 Modpackule 的檔案不會修飾符。我們習慣了引用一個檔案就是引用一個類別的模式。然而在JavaScript 這種動態語言中，事情又有一些變化，舉個例子說明:
<html>
<head>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<p id="hello"> Hello Wrold </p>
<input type="button" onclick="onPress()" value="Click me" />
</body>
</html>// index.js
function onPress() {
var p = document.getElementById('hello');
p.innerHTML = 'Hello bestswifter';
}HTML 中的<script> 標籤可以理解為import，這樣按鈕的onclick 事件就可以調用定義在index.js 中的onPress 函數了。 </script>
假設隨著專案的發展，我們發現點擊後的文字需要動態生成，並且由別的 JS 檔案生成，那麼簡單的 index.js 就無法勝任了。我們假設產生的內容定義在math.js 檔案中:
// math.js
function add(a, b) {
return a + b;
}按照客戶端的思維，此時的index.js 檔案應該這樣寫:
// index.js
import "math.js"
function onPress() {
var p = document.getElementById('hello');
p.innerHTML = add(1, 2);
}很不幸，JavaScript 並不支援import 這種寫法，也就是說在一個JS 檔案中根本無法引用別的JS 檔案中的方法。正確的解決方案是在index.js 中直接呼叫add 方法，同時在index.html 中引用math.js:
<html>
<head>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="math.js"></script>
</head>
<body>
<p id="hello"> Hello Wrold </p>
<input type="button" onclick="onPress()" value="Click me" />
</body>
</html>// index.js
function onPress() {
var p = document.getElementById('hello');
p.innerHTML = add(1, 2);
}可以看到這種寫法並不優雅， index.js 對別的JS 檔案中的內容並沒有控制權，能否呼叫add 方法完全取決於使用自己的HTML 檔案有沒有正確引用別的JS 檔案。
初步模組化
剛剛所說的痛點其實可以分為兩種:
1.index.
剛剛所說的痛點其實可以分為兩種：H js 中無法對add 方法的來源做區分，缺少命名空間的概念第一個問題留在後面解答，我們先著手解決第二個問題，例如先把函數放到一個物件中，這樣我們可以暴露一個對象，讓使用者呼叫這個物件的多個方法://index.js
function onPress() {
var p = document.getElementById('hello');
p.innerHTML = math.add(1, 2);
}
//math.js
var math = {
base: 0,
add: function(a, b) {
return a + b + base;
},
};可以看到在index.js 中已經可以指定一個簡易版的命名空間了(也就是math)。但目前還有一個小問題，像是 base 這個屬性會被暴露給外界，也可以被修改。所以更好的方式是將 math 定義在一個閉包裡，從而隱藏內部屬性:// math.js
var math = (function() {
var base = 0;
return {
add: function(a, b) {
return a + b + base;
},
};
})();到目前為止，我們實現了模組的定義和使用。不過模組化的一大精髓在於命名空間，也就是說我們希望自己的 math 模組不是全局的，而是按需導入，這樣一來，即使多個檔案暴露同名物件也不會出問題。就像 node.js 中那樣，需要暴露的模組定義自己的 export 內容，然後呼叫方使用 require 方法。 其實可以簡單模擬一下node.js 的工作方式，透過增加一個中間層來解決: 首先定義一個全域變數:// global.js
var module = {
exports: {}, // 用来存储所有暴露的内容
};然後在math.js 中暴露物件:var math = (function() {
var base = 0;
return {
add: function(a, b) {
return a + b + base;
},
};
})();
module.exports.math = math;使用者index.js 現在應該是:var math = module.exports.math;
function onPress() {
var p = document.getElementById('hello');
// math
p.innerHTML = math.add(1, 2);
}
現有模組化方案
CommonJS
比较知名的规范有 CommonJS、AMD 和 CMD。而知名框架 Node.js、RequireJS 和 Seajs 分别实现了上述规范。
最早的规范是 CommonJS，Node.js 使用了这一规范。这一规范和我们之前的做法比较类似，是同步加载 JS 脚本。这么做在服务端毫无问题，因为文件都存在磁盘上，然而浏览器的特性决定了 JS 脚本需要异步加载，否则就会失去响应，因此 CommonJS 规范无法直接在浏览器中使用。
AMD
浏览器端著名的模块管理工具 Require.js 的做法是异步加载，通过 Webworker 的 importScripts(url); 函数加载 JS 脚本，然后执行当初注册的回调。Require.js 的写法是:
require(['myModule1', 'myModule2'], function (m1, m2){
// 主回调逻辑
m1.printName();
m2.printName();
});由于这两个模块是异步下载，因此哪个模块先被下载、执行并不确定，但可以肯定的是主回调一定在所有依赖都被加载完成后才执行。
Require.js 的这种写法也被称为前置加载，在写主逻辑之前必须指定所有的依赖，同时这些依赖也会立刻被异步加载。
由 Require.js 引申出来的规范被称为 AMD(Asynchronous Module Definition)。
CMD
另一种优秀的模块管理工具是 Sea.js，它的写法是:
define(function(require, exports, module) {
var foo = require('foo'); // 同步
foo.add(1, 2);
...
require.async('math', function(math) { // 异步
math.add(1, 2);
});
});Sea.js 也被称为就近加载，从它的写法上可以很明显的看到和 Require.js 的不同。我们可以在需要用到依赖的时候才申明。
Sea.js 遇到依赖后只会去下载 JS 文件，并不会执行，而是等到所有被依赖的 JS 脚本都下载完以后，才从头开始执行主逻辑。因此被依赖模块的执行顺序和书写顺序完全一致。
由 Sea.js 引申出来的规范被称为 CMD(Common Module Definition)。
ES 6 模块化
在 ES6 中，我们使用 export 关键字来导出模块，使用 import 关键字引用模块。需要说明的是，ES 6 的这套标准和目前的标准没有直接关系，目前也很少有 JS 引擎能直接支持。因此 Babel 的做法实际上是将不被支持的 import 翻译成目前已被支持的 require。
尽管目前使用 import 和 require 的区别不大(本质上是一回事)，但依然强烈推荐使用 import 关键字，因为一旦 JS 引擎能够解析 ES 6 的 import 关键字，整个实现方式就会和目前发生比较大的变化。如果目前就开始使用 import 关键字，将来代码的改动会非常小。