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

http://www.builive.com/

BUI是什么？

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

Paste_Image.png

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

赞一赞

1. 现成页面多

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

Paste_Image.png

2. 数据绑定方便

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同步现实。

这是目前来说我觉得最赞的地方。

吐槽一下

1. 页面设计不百搭
   说实话，我觉得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的文档很痛苦，但你用过一次之后，还是会喜欢上它的数据绑定。如果你是做自己的项目，对界面功能要求不多，可以考虑用它。如果你做外包项目，它可能会让你崩溃，谨慎选择。