BUI入门系列-Combine 模块

Combine 概念

我们先来看一下下面几个问题：

1. 我引入了已经包含所有模块的JS(bui-min.js)文件，请求的文件很大，但是仅仅用到了几个模块
2. 我使用按需加载，但是在使用时产生多个js文件的请求
3. 我如何做到仅使用一个请求，又仅加载自己需要的JS文件呢

我们可以打包合并需要的模块，引入一个js文件的链接，但是存在的问题是：不灵活，复用度低，每一个应用场景都有可能需要独立的打包合并一个js文件。

业界的流行方案是资源文件服务器，支持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;">

2. <link href="http://a.tbcdn.cn/s/??a.css,b.css" rel="stylesheet">
3. <script src="http://a.tbcdn.cn/s/??a.js,b.js,c.js"></script>

</pre>

Combine的概念简单地说就是根据参数把多个js文件合并成一个文件，当然Combine也有其优缺点，用户可以根据场景分析判断是否使用。

• 优点：使用灵活，便于增删模块；有效的减小文件大小和请求数量
• 缺点：多个页面间利用缓存效率不高，难以复用浏览器的缓存js文件。

BUI 的模块

BUI一个模块对应一个单独的JS文件，一个模块中有多个类，下图是所有模块的对应关系：

image

1. common: 包含util类，如JSON、Array、UA等;包含所有UI控件的基类：component
2. data: 包含Store、Proxy等类进行数据加载管理
3. calendar : 日历控件，包含日期、时间和月份选择
4. menu : 菜单，可以通过自定义样式和html渲染自定义菜单
5. list : 列表，可以通过自定义样式和html渲染各种列表
6. overlay: 包括：Dialog,Message 等悬浮的元素
7. select : 包括 Select、Combox和Suggest等选择框
8. toolbar : 包括 一般的bar、分页栏、数字分页栏等工具栏
9. grid: 表格，包括SimpleGrid,Grid以及一系列Plugins
10. tab : 切换标签，可以用于切换内容和导航
11. mask: 屏蔽DOM；显示正在加载的屏蔽层
12. cookie: 处理cookie
13. form: 表单控件，验证、提示信息等强大的表单功能
14. editor: 编辑器，可以编辑DOM的数据；编辑列表数据
15. picker: 弹出选择列表，单选或多选记录
16. tooltip: 鼠标移动到元素显示自定义的提示信息
17. tree: 功能丰富的树控件，勾选、连接线、异步加载等功能

Combine BUI模块

BUI所使用的cdn支持combine语法，可以自由地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;">

1. <link href="https://s.tbcdn.cn/g/fi/bui/css??dpl-min.css,bui-min.css" rel="stylesheet">

2. <script src="https://s.tbcdn.cn/g/fi/bui??common-min.js,data-min.js,list-min.js"></script>

3. <script>

4. BUI.use(['bui/data','bui/list'],function(Data,List){

5. //TO DO

6. });

7. </script>

</pre>

Combine的讨论

组合JS或者CSS并非全部是优点，必须以项目环境来决定，不足之处：

• 服务器需要支持combine语法
• 需要知道模块的依赖关系，并且手工组合所有的模块文件
• 调试不方便
• 多页面如果combine不同，缓存的利用效率很低

综上所述：在使用单页面或者页面较少而又近似度很高的页面；请求模块特别多，并且影响页面加载性能的页面，推荐使用combine模式