JS里的模塊化


定義

模塊化開發是一種管理方式,是一種生產方式,一種解決問題的方案,一個模塊就是實現特定功能的文件,有了模塊,我們就可以更方便地使用別人的代碼,想要什么功能,就加載什么模塊。

規范

  • AMD(依賴前置)
  • CMD(依賴就近)
  • CommonJS
  • ES6的模塊化

AMD規范(異步模塊定義)

AMD依賴前置,即在定義模塊的時候就要聲明其依賴的模塊使用此規范的代表有requireJS。

requireJS定義了一個函數 define,它是全局變量,用來定義模塊.

define(id?, dependencies?, factory)

  • id:可選參數,用來定義模塊的標識,如果沒有提供該參數,腳本文件名(去掉拓展名)
  • dependencies:是一個當前模塊依賴的模塊名稱數組
  • factory:工廠方法,模塊初始化要執行的函數或對象。如果為函數,它應該只被執行一次。如果是對象,此對象應該為模塊的輸出值
  • 在頁面上使用require函數加載模塊

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

  • 第一個參數是一個數組,表示所依賴的模塊
  • 第二個參數是一個回調函數,當前面指定的模塊都加載成功后,它將被調用。加載的模塊會以參數形式傳入該函數,從而在回調函數內部就可以使用這些模塊

CMD規范(通用模塊定義)

CMD依賴就近,即只有在用到某個模塊的時候再去require,使用此規范的代表有seaJS。

Sea.js 推崇一個模塊一個文件,遵循統一的寫法。

define(id?, deps?, factory)

factory是一個函數,有三個參數,function(require, exports, module)

  • require 是一個方法,接受 模塊標識 作為唯一參數,用來獲取其他模塊提供的接口:require(id)
  • exports 是一個對象,用來向外提供模塊接口
  • module 是一個對象,上面存儲了與當前模塊相關聯的一些屬性和方法

CommonJS

NodeJS就采用了CommonJS。

//模塊中使用module.export導出
//使用則使用require導入

ES6的模塊化

ES6提供的模塊化

// 導入用import
// 導出用export

import和require區別

相同點:

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

區別:

 

require

import

加載

運行時加載(即動態加載)

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

導入

導入整個模塊對象,不能僅導入部分內容

可以導入模塊中的所有導出內容或者部分導出內容

導出

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

export之后導出的值可以變化(輸出值的映射)

 

 

書寫位置

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

必須寫在文件的頂部

性能

性能較低,因為require是在運行時才引入模塊並且還賦值給某個變量

性能較高,因為import只需要依據import中的接口在編譯時引入指定模塊所以性能稍高

 值的拷貝和值的映射示例:

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

import()動態導入

webpack實際上會將ES導入轉換為CommonJS規范


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM