模塊

什么是模塊？在前端領(lǐng)域可以把模塊認(rèn)為是完成一個(gè)系統(tǒng)一部分功能的代碼片段赡勘，我們往往把模塊定義在一個(gè)文件內(nèi)，同時(shí)也會(huì)合并模塊一起加載捞镰。Javascript的模塊間的依賴闸与，默認(rèn)方式是按照script標(biāo)簽的前后順序進(jìn)行的，但是這種依賴關(guān)系十分脆弱岸售，而且需要手工維護(hù)践樱。

模塊之間存在依賴關(guān)系，所以執(zhí)行一個(gè)模塊前凸丸，必須加載并執(zhí)行它所依賴的模塊拷邢，同時(shí)我們也要避免循環(huán)依賴，所以想在前端領(lǐng)域使用模塊我們必須搞清楚模塊的定義屎慢，依賴和加載方式瞭稼，目前比較流行的2種方式是CMD和 AMD

CMD的概念

模塊概念

CMD（Common Module Definition）是seajs推廣過(guò)程中模塊定義規(guī)范化的產(chǎn)物，寫法類似于Nodejs的模塊定義方式差異在于：

• NodeJS 里腻惠，模塊文件里的 this === module.exports环肘；SeaJS 里，this === window集灌。
• NodeJS 里悔雹，模塊文件里的 return xx 會(huì)被忽略；SeaJS 里，return xx 等價(jià) module.exports = xx荠商。
• NodeJS 里寂恬，require 是懶加載 + 懶執(zhí)行的。在 SeaJS 里是提前加載好 + 懶執(zhí)行莱没。
• SeaJS 里初肉，require(id) 中的 id 必須是字符串直接量。NodeJS 里沒(méi)這個(gè)限制饰躲。

創(chuàng)建模塊

通過(guò)以下示例了解CMD中模塊的創(chuàng)建

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

1. define('hello', ['bui/common'], function(require, exports, module) {

2. var BUI = require('bui/common');

3. // 模塊代碼

4. });

</pre>

• 模塊名稱: 用于加載模塊時(shí)使用牙咏，可以為空，根據(jù)路徑和文件名作為模塊名稱
• 依賴的模塊 : 設(shè)置依賴的模塊嘹裂，可以為空妄壶，則按照模塊內(nèi)部使用require函數(shù)時(shí)確定依賴的模塊（未指定模塊依賴關(guān)系時(shí)，不能更改require參數(shù)名稱）
• 回調(diào)函數(shù)： 模塊執(zhí)行時(shí)執(zhí)行的函數(shù)寄狼，在第一次被require前丁寄，函數(shù)內(nèi)的代碼不會(huì)執(zhí)行。

加載模塊

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

1. seajs.use('hello',function(Hello){

2. });

</pre>

• 沒(méi)有全局性的require函數(shù)
• 回調(diào)函數(shù)執(zhí)行前泊愧，hello模塊必須加載并執(zhí)行完畢
• hello依賴的模塊也必須加載伊磺、執(zhí)行完畢

AMD的概念

定義

AMD（Asynchronous Module Definition）,是基于requireJS指定并推廣開來(lái)的一種模塊定義方式，AMD基本兼容CMD 定義模塊的方式删咱，但是回調(diào)函數(shù)中屑埋，不提供exports和modules對(duì)象，只提供return 的方式定義模塊

• 使用define方法定義模塊痰滋，通過(guò)回調(diào)函數(shù)（factory）生成模塊
• 定義模塊時(shí)指定模塊依賴（也可以省略）
• 多次依賴一個(gè)模塊摘能，只加載一遍
• 傳遞依賴的模塊的引用到factory函數(shù)
• 不需要合并模塊時(shí)，不需要指定模塊id

模塊創(chuàng)建

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

1. //Calling define with module ID, dependency array, and factory function

2. define('myModule', ['dep1', 'dep2'], function (dep1, dep2) {

3. //Define the module value by returning a value.

4. return function () {};

5. });

</pre>

模塊加載

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

1. require('myModule',function(MyModule){

2. });

</pre>

AMD的模塊加載使用全局函數(shù)require

Kissy的模塊

模塊的創(chuàng)建

Kissy的模塊定義跟CMD和AMD有相同點(diǎn)敲街，但是也有不同點(diǎn)团搞，依賴模塊寫在最后面，factory里傳入的是模塊引用多艇。

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

1. KISSY.add('myModule',function(dep1,dep2){

2. },{

3. requires : ['dep1', 'dep2']

4. });

</pre>

模塊的加載

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

1. KISSY.use('myModule',function(S,MyModule){

2. });

</pre>

Kissy加載模塊時(shí)莺丑，跟CMD，AMD最大的差異在于墩蔓，factory函數(shù)的第一個(gè)參數(shù)是KISSY本身

BUI加載模塊

BUI的模塊定義按照CMD的寫法梢莽，無(wú)論使用seajs還是Kissy作為L(zhǎng)oader。

加載模塊時(shí)奸披，可以按照seajs的寫法昏名，也可以按照Kissy的寫法，但是一般情況下按照BUI封裝的寫法阵面，可以兼容seajs和Kissy

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

1. BUI.use('myModule',function(MyModule){

2. });

</pre>

下一步學(xué)習(xí)

BUI的基礎(chǔ)內(nèi)容到這里告一段落轻局，你可以去看一下BUI提供的工具類洪鸭，然后進(jìn)入到BUI控件編寫的學(xué)習(xí)中。