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

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

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

這篇文章帶給大家的內容是關於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中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除