我们希望系统中的某些地方可以被修改或者被重写,一般的做法是,例如有个导航条

定义好一个数组,然后在后续的js中push某个选项按钮到这个数组中,这样做有两点缺点:
fineui中的插件机制是基于组件的,一切在页面中的组件都可以被修改或被覆盖,这样就解决了上面的两个问题,注册组件提供了两种形式
注册组件json,该方法可以实现替换某个组件,或修改组件的属性,具体用法是
BI.Plugin.registerWidget("bi.label", function (widget) {
//widget.type = "fct.label";//替换成自己的组件类型
return widget;
}); |
注册组件对象,该方法可以对已经生成好的组件对象进行修改操作,可以利用这个机制完成日志记录操作,具体用法是:
BI.Plugin.registerObject("bi.label", function (obj) {
console.log(obj);
}); |
fineui中很多地方都用到了这种设计,比如在布局中,以水平垂直居中布局为例,在IE8这种低版本浏览器下,实现这种布局需要用到table标签去实现,在新版本浏览器下就可以用到flex属性实现居中布局,我们的做法是,实现两套居中布局,一个是bi.center_layout,一个是bi.flex_center_layout,然后
BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
if (isSupportFlex && ob.items && ob.items.length <= 1) {
//有滚动条的情况下需要用到flex_wrapper_center布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
//不是IE用flex_wrapper_center布局
if (!BI.isIE()) {
return BI.extend(ob, {type: "bi.flex_wrapper_center"});
}
return ob;
}
return BI.extend(ob, {type: "bi.flex_center"});
} else {
return ob;
}
}); |
这么设计有如下好处: