前言
關於模組化,最直接的表現就是我們寫的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 关键字,将来代码的改动会非常小。