bui框架与php结合,吐槽一下BUI的那些坑

最近用了一个前端框架，使用起来有值得赞的地方，但也也有不少坑，不得不吐槽一下，以免小伙伴们重蹈覆辙。这框架就是BUI

BUI是什么？

据说BUI是某宝开发的一个前端框架，主要用来进行后台的搭建。上网搜索了一下，文档似乎很久没有维护了，已经长草。但看在现成的插件不少，看在项目时间紧的份上，姑且拿来用用。

Paste_Image.png

要损先夸，BUI有些地方还是挺好用的。

赞一赞

现成页面多

这是一个亮点。对于我们程序员来说，效率就是金钱，金钱就是生命啊。不是我们写不出这样的框架(呃......摸摸良心，好像还真没写过)，而是重新造个轮子太耗时耗力了。所以插件多，易扩展成了选择的必须。文档有代码有效果，拿来就用，赞啊。

Paste_Image.png

数据绑定方便

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 : '添加',

listeners : {

'click' : addFunction

}

},

{

btnCls : 'button button-small',

text : '删除',

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的风格啊，现在都扁平化了好不好。

Paste_Image.png

于是我手贱，将标题高度变成两倍，还调整了一下样式文件。看起来是舒服了，后来出问题了：

如果在下面的内容页有弹出框，例如添加数据什么的，这个弹出框如果太高，会遮挡一部分内容，会连下面的确认按钮都看不到。

对于我24寸的前端高大上显示屏，那当然没问题。有没有考虑过笔记本的感受？浏览器可视区域高才600多，非得要按F11全屏才能用？

2.文档是外星语言

Grid.Plugins.Editing和Editor有什么区别和联系，或是两个根本不同的东西？

Paste_Image.png

这里写了很多事件，但并不是每个都有效！

Paste_Image.png

例子也是风马牛不相及，好像是从哪拷贝过来的,故意考验程序员举一反三的能力。

Paste_Image.png

我想调用一下里面的editor对象，可eidtor是什么鬼？

Paste_Image.png

总结

尽管看BUI的文档很痛苦，但你用过一次之后，还是会喜欢上它的数据绑定。如果你是做自己的项目，对界面功能要求不多，可以考虑用它。如果你做外包项目，它可能会让你崩溃，谨慎选择。