淺談模組化

模組化是指把一個複雜的系統分解到多個模組以方便編碼。

 名稱空間

開發網頁要透過名稱空間的方式來組織程式碼

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js">

• 名稱空間衝突，兩個庫可能會使用同一個名稱

• 無法合理地管理專案的依賴和版本；

• 無法方便地控制依賴的載入順序。

 CommonJS

CommonJS 是一種使用廣泛的JavaScript模組化規範，核心思想是透過require方法來同步地載入依賴的其他模組，透過 module.exports 匯出需要暴露的介面。

用法

採用 CommonJS 匯入及匯出時的程式碼如下：

// 匯入
const someFun= require('./moduleA');
someFun();

// 匯出
module.exports = someFunc;

 原理

a.js

let fs = require('fs');let path = require('path');let b = req('./b.js');
function req(mod) {    let filename = path.join(__dirname, mod);    
let content = fs.readFileSync(filename, 'utf8');    
let fn = new Function('exports', 'require', 'module', '__filename', '__dirname', 
content + 'n return module.exports;');    
let module = {        
   exports: {}
    };    
    return fn(module.exports, req, module, __filename, __dirname);
}

b.js

console.log('bbb');
exports.name = 'zfpx';

1.3 AMD

AMD 也是一種 JavaScript 模組化規範，與 CommonJS 最大的不同在於它採用非同步的方式去載入依賴的模組。 AMD 規範主要是為了解決針對瀏覽器環境的模組化問題，最具代表性的實現是 requirejs。

AMD 的優點

• 可在不轉換程式碼的情況下直接在瀏覽器中執行

• 可載入多個依賴

• 程式碼可執行在瀏覽器環境和 Node.js 環境下

AMD 的缺點

• JavaScript 執行環境沒有原生支援 AMD，需要先匯入實現了 AMD 的庫後才能正常使用。

1.3.1 用法

// 定義一個模組define('a', [], function () {    
return 'a';
});
define('b', ['a'], function (a) {    
return a + 'b';
});// 匯入和使用
require(['b'], function (b) {    
console.log(b);
});

1.3.2 原理

let factories = {};function define(modName, dependencies, factory) {
    factory.dependencies = dependencies;
    factories[modName] = factory;
}function require(modNames, callback) {    
let loadedModNames = modNames.map(function (modName) {        
let factory = factories[modName];        
let dependencies = factory.dependencies;        
let exports;        
require(dependencies, function (...dependencyMods) {
            exports = factory.apply(null, dependencyMods);
        });        return exports;
    })
    callback.apply(null, loadedModNames);
}

1.4 ES6 模組化

ES6 模組化是ECMA提出的JavaScript模組化規範，它在語言的層面上實現了模組化。瀏覽器廠商和Node.js 都宣佈要原生支援該規範。它將逐漸取代CommonJS和AMD`規範，成為瀏覽器和伺服器通用的模組解決方案。 採用 ES6 模組化匯入及匯出時的程式碼如下

// 匯入import { name } from './person.js';// 匯出export const name = 'zfpx';

ES6模組雖然是終極模組化方案，但它的缺點在於目前無法直接執行在大部分 JavaScript 執行環境下，必須透過工具轉換成標準的 ES5 後才能正常執行