js 模塊化基礎和模塊規范AMD、CMD、ES6模塊

一、模塊基礎

1、基于文件的模塊化

把相關函數寫在一個文件里

1

2

3

4

5

6

7

8

9

缺點：污染了全局變量，無法保證不與其他模塊發生變量名沖突

2、基于對象的模塊化

把所有的模塊成員封裝在一個對象中

1

2

3

4

5

6

7

優點：避免了變量污染，只要保證模塊名唯一即可

缺陷：外部可以隨意修改內部成員

3、基于函數的模塊化

通過立即執行函數返回對象

1

2

3

4

5

6

7

8

9

10

11

12

優點：模塊外部無法修改我們沒有暴露出來的變量、函數

二、javaScript 模塊規范

其中【基于函數的模塊化】是模塊化的基礎

目前，通行的 javaScript 模塊規范主要有兩種：CommonJS 和 AMD

1、Node.js 實現 CommonJS

定義模塊：一個文件就是一個模塊，有單獨的作用域

模塊輸出：要導出的內容放入 module.exports 對象

加載模塊：require 返回 module.exports 對象

eg:

定義模塊

// a.js function func() { console.log("func"); } module.exports = { func: func, };

1

2

3

4

5

6

7

8

9

加載模塊

// b.js const myModule = require("./a"); myModule.func();

1

2

3

4

5

以上方法瀏覽器不直接支持

2、AMD 異步模塊定義

Asynchronous Module Definition

由 require.js 支持

文檔：https://requirejs.org/

實現接口：

// 定義模塊 define(id?, dependencies?, factory); id：模塊的標識，默認腳本文件名 dependencies：當前模塊依賴的模塊名稱數組 factory：模塊初始化要執行的函數或對象 // 加載模塊 require(dependencies, callback); dependencies: 所依賴的模塊數組 callback: 前面指定的模塊都加載成功后的回調函數

1

2

3

4

5

6

7

8

9

10

11

12

eg:

1、下載

wget https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js

1

2、helper.js 定義模塊

// 模塊名，模塊依賴，模塊的實現function define(function () { return { func: function () { console.log("hello"); }, }; });

1

2

3

4

5

6

7

8

2、app.js 引入模塊

require(["helper"], function (helper) { helper.func(); });

1

2

3

3、index.html 瀏覽器中使用

1

3、CMD 通用模塊定義

Common Module Definition

由 Sea.js 支持

文檔：https://seajs.github.io/seajs/docs/#intro

實現接口

// 定義模塊 define(id?, deps?, factory) 一般不在define的參數中寫依賴 factory = function(require, exports, module) require 用來獲取其他模塊提供的接口：require(id) exports 用來向外提供模塊接口 module 存儲了與當前模塊相關聯的一些屬性和方法

1

2

3

4

5

6

7

8

9

10

eg:

1、下載

wget https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js

1

2、helper.js 定義模塊

define(function (require, exports, module) { exports.func = function () { console.log("hello"); }; });

1

2

3

4

5

3、app.js 引入模塊

define(function (require, exports, module) { var helper = require("helper"); helper.func(); });

1

2

3

4

4、index.html 瀏覽器中使用

1

2

3

4

5

4、AMD 與 CMD 區別

AMD 推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊

CMD 推崇就近依賴，只有在用到某個模塊的時候再去 require

三、ES6 模塊

1、ES6 模塊與 CommonJS 模塊的差異

以下這些頂層變量在 ES6 模塊之中都是不存在的

arguments require module exports __filename __dirname

1

2

3

4

5

6

2、模塊加載

1、傳統方法

1

2

3

4

5

6

7

瀏覽器腳本的默認語言是 JavaScript，因此 type="application/javascript"可以省略

默認情況下，瀏覽器是同步加載 JavaScript 腳本，執行完腳本，再繼續向下渲染

2、異步加載腳本

1

2

3

4

5

3、ES6 加載

1

2

3

eg:

模塊文件 demo.js

export default function () { console.log("demo"); }

1

2

3

主文件 index.html

1

2

3

4

參考

前端模塊化，AMD 與 CMD 的區別

Module 的加載實現

elasticsearch JavaScript

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。