Combine 概念
我們先來(lái)看一下下面幾個(gè)問(wèn)題：
- 我引入了已經(jīng)包含所有模塊的JS(bui-min.js)文件，請(qǐng)求的文件很大嘱蛋，但是僅僅用到了幾個(gè)模塊
- 我使用按需加載，但是在使用時(shí)產(chǎn)生多個(gè)js文件的請(qǐng)求
- 我如何做到僅使用一個(gè)請(qǐng)求椅寺，又僅加載自己需要的JS文件呢
我們可以打包合并需要的模塊浑槽，引入一個(gè)js文件的鏈接，但是存在的問(wèn)題是：不靈活返帕，復(fù)用度低桐玻，每一個(gè)應(yīng)用場(chǎng)景都有可能需要獨(dú)立的打包合并一個(gè)js文件。
業(yè)界的流行方案是資源文件服務(wù)器荆萤，支持combine語(yǔ)法镊靴，例如：
<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;">
- <link rel="stylesheet">
- <script src="http://a.tbcdn.cn/s/??a.js,b.js,c.js"></script>
</pre>
Combine的概念簡(jiǎn)單地說(shuō)就是根據(jù)參數(shù)把多個(gè)js文件合并成一個(gè)文件，當(dāng)然Combine也有其優(yōu)缺點(diǎn)链韭，用戶(hù)可以根據(jù)場(chǎng)景分析判斷是否使用偏竟。
- 優(yōu)點(diǎn)：使用靈活，便于增刪模塊敞峭；有效的減小文件大小和請(qǐng)求數(shù)量
- 缺點(diǎn)：多個(gè)頁(yè)面間利用緩存效率不高踊谋，難以復(fù)用瀏覽器的緩存js文件。
BUI 的模塊
BUI一個(gè)模塊對(duì)應(yīng)一個(gè)單獨(dú)的JS文件旋讹，一個(gè)模塊中有多個(gè)類(lèi)殖蚕，下圖是所有模塊的對(duì)應(yīng)關(guān)系：
- common: 包含util類(lèi)，如JSON沉迹、Array睦疫、UA等;包含所有UI控件的基類(lèi)：component
- data: 包含Store、Proxy等類(lèi)進(jìn)行數(shù)據(jù)加載管理
- calendar : 日歷控件鞭呕，包含日期蛤育、時(shí)間和月份選擇
- menu : 菜單，可以通過(guò)自定義樣式和html渲染自定義菜單
- list : 列表葫松，可以通過(guò)自定義樣式和html渲染各種列表
- overlay: 包括：Dialog,Message 等懸浮的元素
- select : 包括 Select瓦糕、Combox和Suggest等選擇框
- toolbar : 包括 一般的bar、分頁(yè)欄进宝、數(shù)字分頁(yè)欄等工具欄
- grid: 表格刻坊，包括SimpleGrid,Grid以及一系列Plugins
- tab : 切換標(biāo)簽，可以用于切換內(nèi)容和導(dǎo)航
- mask: 屏蔽DOM党晋；顯示正在加載的屏蔽層
- cookie: 處理cookie
- form: 表單控件谭胚，驗(yàn)證徐块、提示信息等強(qiáng)大的表單功能
- editor: 編輯器，可以編輯DOM的數(shù)據(jù)灾而；編輯列表數(shù)據(jù)
- picker: 彈出選擇列表胡控，單選或多選記錄
- tooltip: 鼠標(biāo)移動(dòng)到元素顯示自定義的提示信息
- tree: 功能豐富的樹(shù)控件，勾選旁趟、連接線(xiàn)昼激、異步加載等功能
Combine BUI模塊
BUI所使用的cdn支持combine語(yǔ)法，可以自由地combine所需要的模塊
<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;">
<link rel="stylesheet">
<script src="https://s.tbcdn.cn/g/fi/bui??common-min.js,data-min.js,list-min.js"></script>
<script>
BUI.use(['bui/data','bui/list'],function(Data,List){
//TO DO
});
</script>
</pre>
Combine的討論
組合JS或者CSS并非全部是優(yōu)點(diǎn)锡搜，必須以項(xiàng)目環(huán)境來(lái)決定橙困，不足之處：
- 服務(wù)器需要支持combine語(yǔ)法
- 需要知道模塊的依賴(lài)關(guān)系，并且手工組合所有的模塊文件
- 調(diào)試不方便
- 多頁(yè)面如果combine不同耕餐，緩存的利用效率很低
綜上所述：在使用單頁(yè)面或者頁(yè)面較少而又近似度很高的頁(yè)面凡傅；請(qǐng)求模塊特別多，并且影響頁(yè)面加載性能的頁(yè)面肠缔，推薦使用combine模式
