1. 在接觸規(guī)范之前,我們用模塊化來(lái)封裝代碼大多為如下:
;(function (形參模塊名, 依賴項(xiàng), 依賴項(xiàng)) { // 通過 形參模塊名 修改模塊 window.模塊名 = 形參模塊名 })(window.模塊名 || {}, 依賴項(xiàng), 依賴項(xiàng))
-
分號(hào)是什么作用?
答:為了防止前面的代碼沒有添加分號(hào)造成語(yǔ)法解析錯(cuò)誤,也可能會(huì)是 "!", "+" 等
-
為什么要將代碼放入一個(gè)自執(zhí)行函數(shù)中
答:為了避免全局命名空間污染,核心就是利用函數(shù)的私有作用域
-
為什么將依賴項(xiàng)作為參數(shù)傳進(jìn)來(lái)
答:為了減少作用域查找機(jī)制
2. 常見的 JavaScript 模塊化規(guī)范
規(guī)范其實(shí)就是這些庫(kù)在推廣的過程中逐漸形成的一套規(guī)則。
所謂的規(guī)范也就是:
定義了模塊的書寫格式 以及模塊之間的交互規(guī)則
Node 環(huán)境
CommonJS
瀏覽器環(huán)境
AMD RequireJS CMD Common Module Definition CMD 就是 SeaJS 這個(gè)模塊加載器在推廣的過程中定義的一個(gè)模塊規(guī)范 ECMAScript ECMAScript 6
CMD、AMD、CommonJS 都是社區(qū)制定出來(lái)的模塊規(guī)范,他們的目的都是為了解決 JavaScript 沒有模塊化系統(tǒng)的問題。 他們都有如何定義模塊成員,以及模塊成員之間如何進(jìn)行通信交互的規(guī)則。
1.SeaJS基本介紹
-
在SeaJS中,一個(gè)js腳本文件就是一個(gè)模塊
模塊具有兩個(gè)特性:
1. 模塊要有一個(gè)私有作用域:避免全局命名空間污染 2. 模塊可以向外導(dǎo)出內(nèi)部成員,供別的模塊加載和使用
所以:只要使用了SeaJS,那所有的js文件都通過define函數(shù)去定義該模塊,并且將所有的模塊代碼寫到 define 定義的回調(diào)函數(shù)中
define 方法的回調(diào)函數(shù)中分別傳遞三個(gè)固定參數(shù):
1. require: 2. exports 3. module
-
每一個(gè)模塊中有一個(gè)require函數(shù)可以用來(lái)加載指定模塊,需要接收一個(gè)模塊路徑
1. 加載指定模塊并且執(zhí)行該模塊中的代碼 2. 得到該模塊中的暴露的接口對(duì)象:module.exports
-
模塊的作用域和導(dǎo)出
模塊天生就是一個(gè)私有作用域,在該模塊內(nèi)部定義的所有成員
如果模塊內(nèi)部的成員想要被外部所訪問:
必須通過使用