最近用了一个前端框架，使用起来有值得赞的地方，但也也有不少坑，不得不吐槽一下，以免小伙伴们重蹈覆辙。这框架就是BUI
BUI是什么？
据说BUI是某宝开发的一个前端框架，主要用来进行后台的搭建。上网搜索了一下，文档似乎很久没有维护了，已经长草。但看在现成的插件不少，看在项目时间紧的份上，姑且拿来用用。
要损先夸，BUI有些地方还是挺好用的。
赞一赞
- 现成页面多
这是一个亮点。对于我们程序员来说，效率就是金钱，金钱就是生命啊。不是我们写不出这样的框架（呃......摸摸良心，好像还真没写过），而是重新造个轮子太耗时耗力了。所以插件多，易扩展成了选择的必须。文档有代码有效果，拿来就用，赞啊。
- 数据绑定方便
BUI中有一个专门用来管理数据的DATA对象，其下有几个Store对象。Store是一种数据绑定技术，它可以看做是一个内存里的数据暂存区。
先看一段代码
data = [{a:'123',e:'2,3',f:false},{a:'cdd',c:1363924044176,f:true},{a:'1333',b:2222,d:2,f:false}];
store = new Store({
data : data,
autoLoad:true
})
上面定义了一个data数组，在new Store时传给data初始化,如果设置了autoLoad参数为true,初始化会自动加载data。
你还可以把store对象给一个展示插件，例如grid
//定义列
var columns = [
{title : '文本',dataIndex :'a',editor : {xtype : 'text',validator : validFn}}, //editor中的定义等用于 BUI.Form.Field.Text的定义
{title : '数字', dataIndex :'b',editor : {xtype : 'number',rules : {required : true}}},
{title : '日期',dataIndex :'c', editor : {xtype : 'date'},renderer : Grid.Format.dateRenderer},
{title : '单选',dataIndex : 'd', editor : {id:'mySelect',xtype :'select',items : enumObj,rules : {required : true},validator : valid},renderer : Grid.Format.enumRenderer(enumObj)},
{title : '多选',dataIndex : 'e', editor : {xtype :'select',select:{multipleSelect : true},items : enumObj},renderer : Grid.Format.multipleItemsRenderer(enumObj)},
{title : 'check',dataIndex :'f', checkable : true}
]
//定义grid
var grid = new Grid.Grid({
render:'#grid',
columns : columns,
width : 700,
forceFit : true,
tbar:{ //添加、删除
items : [{
btnCls : 'button button-small',
text : '<i class="icon-plus"></i>添加',
listeners : {
'click' : addFunction
}
},
{
btnCls : 'button button-small',
text : '<i class="icon-remove"></i>删除',
listeners : {
'click' : delFunction
}
}]
},
plugins : [editing,Grid.Plugins.CheckSelection,Grid.Plugins.ColumnChecked],
store : store
});
这样一来，数据传递就从data->store->grid形成一条链，操作非常方便。
还有更方便的
store对象可以这样定义
store = new Store({
autoLoad:true,
url : 'data/records.php',
//autoSync : true, //保存数据后自动调用store.load()方法
proxy : {
method : 'POST', //更改为POST
save : {
addUrl : 'data/add.php',
removeUrl : 'data/remove.php',
updateUrl : 'data/update.php'
}
}
})
这样初始化时，store会自动从url对应的路径远程加载数据。而当你执行
store.save('remove',{ids : ids.join(',')});
store会把参数自动发送到removeUrl远程接口。
只需要操作store就可以实现增删改查，并在grid同步现实。
这是目前来说我觉得最赞的地方。
吐槽一下
- 页面设计不百搭
说实话，我觉得BUI页面风格不好看。上方的标题高度太小了，颜色也不好看，表格和按钮的线性渐变效果还是winxp的风格啊，现在都扁平化了好不好。
于是我手贱，将标题高度变成两倍，还调整了一下样式文件。看起来是舒服了，后来出问题了：
如果在下面的内容页有弹出框，例如添加数据什么的，这个弹出框如果太高，会遮挡一部分内容，会连下面的确认按钮都看不到。
对于我24寸的前端高大上显示屏，那当然没问题。有没有考虑过笔记本的感受？浏览器可视区域高才600多，非得要按F11全屏才能用？
2.文档是外星语言
Grid.Plugins.Editing和Editor有什么区别和联系，或是两个根本不同的东西？
这里写了很多事件，但并不是每个都有效！
例子也是风马牛不相及，好像是从哪拷贝过来的,故意考验程序员举一反三的能力。
我想调用一下里面的editor对象，可eidtor是什么鬼？
总结
尽管看BUI的文档很痛苦，但你用过一次之后，还是会喜欢上它的数据绑定。如果你是做自己的项目，对界面功能要求不多，可以考虑用它。如果你做外包项目，它可能会让你崩溃，谨慎选择。
