搜尋

首頁  >  文章  >  web前端  >  JavaScript模組化程式設計的詳細介紹（程式碼範例）

JavaScript模組化程式設計的詳細介紹（程式碼範例）

不言
不言轉載
2019-03-11 17:07:082856瀏覽

這篇文章帶給大家的內容是關於JavaScript模組化程式設計的詳細介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

什麼是模組化？

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

寫 JS 為什麼需要模組化程式設計？  
當寫前端還只是處理網頁的一些表單提交，點擊交互的時候，還沒有強化JS 模組化的概念，當前端邏輯開始複雜，交互變得更多，數據量越來越龐大時，前端對JS 模組化程式的需求就越加強烈。

在很多場景中，我們需要考慮模組化：

  1. 團隊多人協作，需要引用別人的程式碼
  2. #專案交接，我們在閱讀和重構別人的程式碼
  3. 程式碼審查時，檢驗你的程式碼是否規範，是否有問題
  4. 寫完程式碼，回顧自己寫的程式碼是否美觀：）
  5. 不同的環境，環境變數不同

基於上述場景，所以，目前JS 模組化主要是這幾個目的：

  1. 程式碼複用性
  2. 函數程式碼鬆耦合
  3. 解決命名衝突
  4. 程式碼可維護性
  5. 程式碼可閱讀性

先給結論：JS 的模組化程式設計經歷了幾個階段：

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

先給結論圖：

JavaScript模組化程式設計的詳細介紹（程式碼範例）

一、命名空間

我們知道，在ES6 之前，JS 是沒有塊作用域的，私有變數和方法的隔離主要靠函數作用域，公開變數和方法的隔離主要靠物件的屬性參考。

封裝函數

在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></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></script>
<script></script>
<script></script>
<script></script>
<script></script>

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

二、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模組載入的是輸出值的拷貝。也就是說，外部模組輸出值變了，目前模組的導入值不會改變。

三、AMD

CommonJS 规范的出现，使得 JS 模块化在 NodeJS 环境中得到了施展机会。但 CommonJS 如果应用在浏览器端，同步加载的机制会使得 JS 阻塞 UI 线程，造成页面卡顿。

利用模块加载后执行回调的机制，有了后面的 RequireJS 模块加载器， 由于加载机制不同，我们称这种模块规范为 AMD(Asynchromous Module Definition 异步模块定义)规范, 异步模块定义诞生于使用 XHR + eval 的开发经验，是 RequireJS 模块加载器对模块定义的规范化产出。

AMD 的模块写法：

// 模块名 utils
// 依赖 jQuery, underscore
// 模块导出 foo, bar 属性
<script></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"
    }
})

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();
  };
});

四、CMD

SeaJS 是国内 JS 大神玉伯开发的模块加载器，基于 SeaJS 的模块机制，所有 JavaScript 模块都遵循 CMD（Common Module Definition） 模块定义规范.

CMD 模块的写法：

<script></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

五、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 再进行模块化定义。

六、ES6 Module

CommonJS 和 AMD 规范都只能在运行时确定依赖。而 ES6 在语言层面提出了模块化方案, ES6 module 模块编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 模块化这种加载称为“编译时加载”或者静态加载。

JavaScript模組化程式設計的詳細介紹（程式碼範例）

写法：

// 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 是依赖就近，延迟执行，在使用到模块时才去加载相应的依赖。

以上是JavaScript模組化程式設計的詳細介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

Java JavaScript jquery gulp es6 webpack 命名空间 封装 require 全局变量 接口 线程 闭包 JS 对象 作用域 异步 ui 重构
陳述：
本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：deno通訊實作的方法（附程式碼）下一篇：deno通訊實作的方法（附程式碼）

相關文章

看更多