JS裡的模組化

模組化開發是一種管理方式，是一種生產方式，一種解決問題的方案，乙個模組就是實現特定功能的檔案，有了模組，我們就可以更方便地使用別人的**，想要什麼功能，就載入什麼模組。

amd依賴前置，即在定義模組的時候就要宣告其依賴的模組。使用此規範的代表有requirejs。

requirejs定義了乙個函式 define，它是全域性變數，用來定義模組.

define(id?, dependencies?, factory)

require([dependencies], function(){})

cmd依賴就近，即只有在用到某個模組的時候再去require，使用此規範的代表有seajs。

sea.js 推崇乙個模組乙個檔案，遵循統一的寫法。

define(id?, deps?, factory)

factory是乙個函式，有三個引數，function(require, exports, module)

nodejs就採用了commonjs。

//

模組中使用module.export匯出
//使用則使用require匯入

es6提供的模組化

//

匯入用import
//匯出用export

import和require區別

相同點：

作用和行為上基本一致，都是以阻塞的方式載入模組

區別：

require

import

載入執行時載入(即動態載入)

在編譯時載入(即靜態載入)

匯入匯入整個模組物件，不能僅匯入部分內容

可以匯入模組中的所有匯出內容或者部分匯出內容

匯出module.export 之後,匯出的值就不能再變化(輸出值的拷貝)

export之後匯出的值可以變化（輸出值的對映）

書寫位置

可以寫在**任何地方執行比如if判斷當中

必須寫在檔案的頂部

效能效能較低，因為require是在執行時才引入模組並且還賦值給某個變數

效能較高，因為import只需要依據import中的介面在編譯時引入指定模組所以效能稍高

值的拷貝和值的對映示例：

var a = 6export 

default
a = 7 //
在es6中的export可以
var a = 6module.export =a
a = 7 //
在common.js中，這樣是錯誤的

import()動態匯入

webpack實際上會將es匯入轉換為commonjs規範

js 模組化補充

補充 除了第一種的套路，還可以這樣使用第二種。都是用來自執行函式的。第二種的好處是，還可以返回乙個true。常用 function 小技巧 如果不加上！會報錯，加上之後還能返回true呢。但由於衡返回true。所以只有某些函式是只執行，不在於返回結果的可以用這種。function 相容套路1 適用於...

js模組化規範

標記已經載入成功的個數 var req total 0 模組匯出 window.exports 記錄各個模組的順序 var exp arr 判斷是否陣列 function isarray param require 真正實現 function require arr,callback else va...

理解JS 模組化

module.exports與exports，export與export default之間的關係和區別 js 模組化規範 最早是閉包的寫法，防止變數的汙染 多個js 用 defer 和 async amd 和 cmd 在es6 module 出現之後就退出歷史的舞台了 es6 module 瀏覽器...