JS模塊化編程

時間  2019-12-05
標籤 模塊化 編程 欄目 JavaScript 简体版
原文   原文鏈接

前言

什麼是模塊化？javascript

模塊就是實現特定功能的一組方法,而模塊化是將模塊的代碼創造本身的做用域，只向外部暴露公開的方法和變量，而這些方法之間高度解耦。

寫 JS 爲何須要模塊化編程？
當寫前端還只是處理網頁的一些表單提交，點擊交互的時候，尚未強化 JS 模塊化的概念，當前端邏輯開始複雜，交互變得更多，數據量愈來愈龐大時，前端對 JS 模塊化編程的需求就越增強烈。前端

在不少場景中，咱們須要考慮模塊化：java

  1. 團隊多人協做，須要引用別人的代碼
  2. 項目交接，咱們在閱讀和重構別人的代碼
  3. 代碼審查時，檢驗你的代碼是否規範，是否存在問題
  4. 寫完代碼，回顧本身寫的代碼是否美觀：）
  5. 不一樣的環境，環境變量不一樣

基於以上場景，因此，當前 JS 模塊化主要是這幾個目的：jquery

  1. 代碼複用性
  2. 功能代碼鬆耦合
  3. 解決命名衝突
  4. 代碼可維護性
  5. 代碼可閱讀性

先給結論：JS 的模塊化編程經歷了幾個階段：webpack

  1. 命名空間形式的代碼封裝
  2. 經過當即執行函數(IIFE)建立的命名空間
  3. 服務器端運行時 Nodejs 的 CommonJS 規範
  4. 將模塊化運行在瀏覽器端的 AMD/CMD 規範
  5. 兼容 CMD 和 AMD 的 UMD 規範
  6. 經過語言標準支持的 ES Module

先給結論圖：
web

1、命名空間

咱們知道，在 ES6 以前，JS 是沒有塊做用域的，私有變量和方法的隔離主要靠函數做用域，公開變量和方法的隔離主要靠對象的屬性引用。編程

封裝函數gulp

在 JS 尚未模塊化規範的時候，將一些通用的、底層的功能抽象出來，獨立成一個個函數來實現模塊化：
比方寫一個 utils.js 工具函數文件瀏覽器

//  utils.js
function add(x, y) {
    if(typeof x !== "number" || typeof y !== "number") return;
    return x + y;
}

function square(x) {
    if(typeof x !== "number") return;
    return x * x;
}

<script src="./utils.js"></script>
<script>
    add(2, 3);
    square(4);
</script>

經過 js 函數文件劃分的方式，此時的公開函數實際上是掛載到了全局對象 window 下，當在別人也想定義一個叫 add 函數，或者多個 js 文件合併壓縮的時候，會存在命名衝突的問題。緩存

掛載到全局變量下：

後來咱們想到經過掛載函數到全局對象字面量下的方式，利用 JAVA 包的概念，但願減輕命名衝突的嚴重性。

var mathUtils1 = {
    add: function(x, y) {
        return x + y;
    },
}

var mathUtils2 = {
    add: function(x, y, z) {
        return x + y + z;
    },
}

mathUtils.add();

mathUtils.square();

這種方式仍然建立了全局變量，但若是包的路徑很長，那麼到最後引用方法可能就會以module1.subModule.subSubModule.add 的方式引用代碼了。

IIFE
考慮模塊存在私有變量，因而咱們利用IIFE(當即執行表達式)建立閉包來封裝私有變量：

var module = (function(){
    var count = 0;
    return {
        inc: function(){
            count += 1;
        },
        dec: function(){
            count += -1;
        }
    }
})()

module.inc();
module.dec();

這樣私有變量對於外部來講就是不可訪問的，那若是模塊須要引入其餘依賴呢？

var utils = (function ($) {
    var $body = $("body"); 
    var _private = 0;
    var foo = function() {
        ...
    }
    var bar = function () {
        ...
    }
    
    return {
        foo: foo,
        bar: bar
    }
})(jQuery);

以上封裝模塊的方式叫做：模塊模式，在 jQuery 時代，大量使用了模塊模式:

<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="utils.js"></script>
<script src="base.js"></script>
<script src="main.js"></script>

jQuery 的插件必須在 JQuery.js 文件以後 ，文件的加載順序被嚴格限制住，依賴越多,依賴關係越混亂，越容易出錯。

2、CommonJS

Nodejs 的出現，讓 JavaScript 可以運行在服務端環境中，此時迫切須要創建一個標準來實現統一的模塊系統，也就是後來的 CommonJS。

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

// base.js
var math = require("./math.js");
math.add(2, 3);  // 5

// 引用核心模塊
var http = require('http');
http.createServer(...).listen(3000);

CommonJS 規定每一個模塊內部，module 表明當前模塊，這個模塊是一個對象，有 id,filename, loaded,parent, children, exports 等屬性，module.exports 屬性表示當前模塊對外輸出的接口，其餘文件加載該模塊，實際上就是讀取 module.exports 變量。

// utils.js
// 直接賦值給 module.exports 變量
module.exports = function () {
    console.log("I'm utils.js module");
}

// base.js
var util = require("./utils.js")
util();  // I'm utils.js module

或者掛載到 module.exports 對象下
module.exports.say = function () {
    console.log("I'm utils.js module");
}

// base.js
var util = require("./utils.js")
util.say();

爲了方便，Node 爲每一個模塊提供一個 exports 自由變量，指向 module.exports。這等同在每一個模塊頭部，有一行這樣的命令。

var exports = module.exports;

exports 和 module.exports 共享了同個引用地址，若是直接對 exports 賦值會致使二者再也不指向同一個內存地址，但最終不會對 module.exports 起效。

// module.exports 能夠直接賦值
module.exports = 'Hello world';  

// exports 不能直接賦值
exports = 'Hello world';

CommonJS 總結：
CommonJS 規範加載模塊是同步的，用於服務端，因爲 CommonJS 會在啓動時把內置模塊加載到內存中，也會把加載過的模塊放在內存中。因此在 Node 環境中用同步加載的方式不會有很大問題。

另，CommonJS模塊加載的是輸出值的拷貝。也就是說，外部模塊輸出值變了，當前模塊的導入值不會發生變化。

3、AMD

CommonJS 規範的出現，使得 JS 模塊化在 NodeJS 環境中獲得了施展機會。但 CommonJS 若是應用在瀏覽器端，同步加載的機制會使得 JS 阻塞 UI 線程，形成頁面卡頓。

利用模塊加載後執行回調的機制，有了後面的 RequireJS 模塊加載器， 因爲加載機制不一樣，咱們稱這種模塊規範爲 AMD(Asynchromous Module Definition 異步模塊定義)規範, 異步模塊定義誕生於使用 XHR + eval 的開發經驗，是 RequireJS 模塊加載器對模塊定義的規範化產出。

AMD 的模塊寫法：

// 模塊名 utils
// 依賴 jQuery, underscore
// 模塊導出 foo, bar 屬性
<script data-main="scripts/main" src="scripts/require.js"></script>

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

// 定義 utils 模塊，使用 jQuery 模塊
define("utils", ["jQuery", "underscore"], function($, _) {
    var body = $("body");
    var deepClone = _.deepClone({...});
    return {
        foo: "hello",
        bar: "world"
    }
})
</script>

AMD 的特色在於：

  1. 延遲加載
  2. 依賴前置

AMD 支持兼容 CommonJS 寫法：

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

  someModule.sayHi();
  anotherModule.sayBye();

  exports.asplode = function (){
    someModule.eat();
    anotherModule.play();
  };
});

4、CMD

SeaJS 是國內 JS 大神玉伯開發的模塊加載器，基於 SeaJS 的模塊機制，全部 JavaScript 模塊都遵循 CMD（Common Module Definition） 模塊定義規範.

CMD 模塊的寫法：

<script src="scripts/sea.js"></script>
<script>
// seajs 的簡單配置
seajs.config({
  base: "./script/",
  alias: {
    "jquery": "script/jquery/3.3.1/jquery.js"
  }
})

// 加載入口模塊
seajs.use("./main")
</script>

// 定義模塊
// utils.js
define(function(require, exports, module) {
  exports.each = function (arr) {
    // 實現代碼 
  };

  exports.log = function (str) {
    // 實現代碼
  };
});

// 輸出模塊
define(function(require, exports, module) {
  var util = require('./util.js');
  
  var a = require('./a'); //在須要時申明，依賴就近
  a.doSomething();
  
  exports.init = function() {
    // 實現代碼
    util.log();
  };
});

CMD 和 AMD 規範的區別：
AMD推崇依賴前置，CMD推崇依賴就近：
AMD 的依賴須要提早定義，加載完後就會執行。
CMD 依賴能夠就近書寫，只有在用到某個模塊的時候再去執行相應模塊。
舉個例子：

// main.js
define(function(require, exports, module) {
  console.log("I'm main");
  var mod1 = require("./mod1");
  mod1.say();
  var mod2 = require("./mod2");
  mod2.say();

  return {
    hello: function() {
      console.log("hello main");
    }
  };
});

// mod1.js
define(function() {
  console.log("I'm mod1");
  return {
    say: function() {
      console.log("say: I'm mod1");
    }
  };
});

// mod2.js
define(function() {
  console.log("I'm mod2");
  return {
    say: function() {
      console.log("say: I'm mod2");
    }
  };
});

以上代碼分別用 Require.js 和 Sea.js 執行，打印結果以下：
Require.js:
先執行全部依賴中的代碼

I'm mod1
I'm mod2
I'm main
say: I'm mod1
say: I'm mod2

Sea.js:
用到依賴時，再執行依賴中的代碼

I'm main

I'm mod1
say: I'm mod1
I'm mod2
say: I'm mod2

5、UMD

umd（Universal Module Definition） 是 AMD 和 CommonJS 的兼容性處理,提出了跨平臺的解決方案。

(function (root, factory) {
    if (typeof exports === 'object') {
        // commonJS
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
        // AMD
        define(factory);
    } else {
        // 掛載到全局
        root.eventUtil = factory();
    }
})(this, function () {
    function myFunc(){};

    return {
        foo: myFunc
    };
});

應用 UMD 規範的 JS 文件其實就是一個當即執行函數，經過檢驗 JS 環境是否支持 CommonJS 或 AMD 再進行模塊化定義。

6、ES6 Module

CommonJS 和 AMD 規範都只能在運行時肯定依賴。而 ES6 在語言層面提出了模塊化方案, ES6 module 模塊編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。ES6 模塊化這種加載稱爲「編譯時加載」或者靜態加載。

寫法：

// math.js
// 命名導出
export function add(a, b){
    return a + b;
}
export function sub(a, b){
    return a - b;
}
// 命名導入
import { add, sub } from "./math.js";
add(2, 3);
sub(7, 2);

// 默認導出
export default function foo() {
  console.log('foo');
}
// 默認導入
import someModule from "./utils.js";
ES6 模塊的運行機制與 CommonJS 不同。JS 引擎對腳本靜態分析的時候，遇到模塊加載命令import，就會生成一個只讀引用。等到腳本真正執行時，再根據這個只讀引用，到被加載的那個模塊裏面去取值。原始值變了，import加載的值也會跟着變。所以，ES6 模塊是動態引用，而且不會緩存值，模塊裏面的變量綁定其所在的模塊。

另，在 webpack 對 ES Module 打包， ES Module 會編譯成 require/exports 來執行的。

總結

JS 的模塊化規範通過了模塊模式、CommonJS、AMD/CMD、ES6 的演進，利用如今經常使用的 gulp、webpack 打包工具，很是方便咱們編寫模塊化代碼。掌握這幾種模塊化規範的區別和聯繫有助於提升代碼的模塊化質量，好比，CommonJS 輸出的是值拷貝，ES6 Module 在靜態代碼解析時輸出只讀接口，AMD 是異步加載，推崇依賴前置，CMD 是依賴就近，延遲執行，在使用到模塊時纔去加載相應的依賴。

@Starbucks 2019/03/10
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程