7、插件机制

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

定义好一个数组，然后在后续的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;
    }
});

这么设计有如下好处：

代码里不用写判断浏览器的方法，更加规范了单一组件职责原则
可以做到动态根据全局属性进行组件的变化

Page tree

7、插件机制