KISSY RichBase 使用

[keyapril]

RichBase是一个基础类，通过继承RichBase可以以一种统一的方式创建自己的具有新的属性、并可作为事件目的(RichBase继承自Base，所以拥有Attribute，EventTarget的能力)的类。

如何引用

要使用RichBase，首先要引入KISSY的种子文件：

html代码：

<script src="http://a.tbcdn.cn/s/kissy/1.3.0/seed-min.js"></script>

js代码：

KISSY.use('rich-base',function(S,RichBase){

});

or

KISSY.add("brix/core/chunk", function(S, RichBase) {

}, {
    requires: ["rich-base"]
});

继承RichBase

下面的代码定义完，Chunk就和RichBase有了同样的功能

KISSY.add("brix/core/chunk", function(S, RichBase) {
    var Chunk = RichBase.extend({},{});
    return Chunk;
}, {
    requires: ["rich-base"]
});

接下来会为大家介绍更多……

构造函数

我们上面定义的Chunk类并没有显示指定构造函数，RichBase内部会动态的构建一个function作为Chunk的构造函数，并且名字是"RichBaseDerived",要显示的指定名称，只需要在在继承的最后一个参数写上名称即可

var Chunk = RichBase.extend({},{},'Chunk');

那如果我们需要显示的定义构造函数应该怎么办呢,看下面的代码？

var Chunk = RichBase.extend({
    constructor: function Chunk() {
        var self = this;
        //显示的调用父类的构造函数，这句很重要。
        Chunk.superclass.constructor.apply(self, arguments);
    }
},{});

初始化函数和析构函数

RichBase在初始化时会自动调用各级类的initializer函数，在析构时会自动调用destructor函数，所以有初始或者析构处理只需定义相应的函数就可以了，不用显式调用父类的函数。

var Chunk = RichBase.extend({
    initializer: function() {

    },
    destructor: function() {

    }
},{});

ATTRS属性

可以用关联矩阵(associative array)的方式定义类的属性和配置参数,具体请查看“Base ATTRS”

var Chunk = RichBase.extend({
},{
    ATTRS: {
        attr: {
            valule:value,
            valueFn:function(){
            },
            setter:function(){
            },
            getter: function(s) {
            }
        }
});

ATTRS的bind和sync

RichBase提供了对属性值初始化的同步以及变化的事件监听。先看一下代码

var Chunk = RichBase.extend({
    _onSetAttr:function(){
    }
},{
    ATTRS: {
        attr: {
            valule:value,
            valueFn:function(){
            },
            setter:function(){
            },
            getter: function(s) {
            }
        }
});

实例化Chunk类并设置attr属性值

var chunk = new Chunk({attr:1});
chunk.set('attr',2);

上面的实例化和设置属性值，都会同步调用到类中定义的_onSetAttr函数。具体的调用可查看RichBase源码中的bindInternal和syncInternal函数。

Plugins

Plugins机制可以用来在类的实例（而不是类本身）上动态添加特性。RichBase提供了一个配置（plugins）和三个函数（plug、unplug和getPlugin）用来管理插件。

plugins

plugins的类型是Array，在类实例化的时候实例化plugin，并调用plugin的pluginInitializer初始化函数。在销毁的时候调用pluginDestructor析构函数。

plug(plugin)

参数plugin可以是类，也可以是实例，如果是类则无参实例化plugin。
两者都会调用plugin的pluginInitializer初始化函数

直接传实例化的示例代码：

new Editor().plug(new FontSize({
  default: '14px'
}))

unplug(plugin)

从plugins数组中移除plugin，并调用pluginDestructor析构函数。

getPlugin(id)

通过类plugin定义的的p.get('pluginId') || p.pluginId来拿到plugin的实例。

扩展

RichBase的extend还提供了扩展功能，把一个主类与多个扩充类合并为一个新类。KISSY内部的很多组件都是基于这个完成的。

给个Overlay示例代码吧,具体的Overlay的实现并不仅仅如此

var Overlay = RichBase.extend([
        Extension.ContentBox,
        Extension.Position,
        Loading,
        Extension.Align,
        Close,
        Mask,
        OverlayEffect
    ], {}, {
        ATTRS: {}
});

listeners

差点忘记了listeners，这个配置项是用来在实例化类的时候增加事件的监听,看一下代码你就明白了。

var chunk = new Chunk({
        attr:1,
        listeners:{
            myfire:function(e){

            },
            hefire :{
                fn:function(){},
                //上下文
                context:{}  
           }
        }});
chunk.fire('myfire');

总结

RichBase为我们提供了如此多的特性，采用KISSY开发模块和组件的同学，果断的用RichBase吧。

[yiminghe]

补充

plugin

plugin 参数可以是构造器或者实例

允许实例，就允许给插件传递一些特殊参数

new Editor().plug(new FontSize({
  default: '14px'
}))

listeners

listener 允许指定 context，例如

listeners: {
   my :{
      fn:function(){},
      context:{}  
   }
}

[keyapril]

已经补充@yiminghe提的两点。

[cyjake]

可以指定 constructor 很棒噢，希望它和 initializer、destructor 不会被人搞混，哈哈

波哥示例里的 attr 和 _onSetAttr 名字太水了，用个稍微具体点的 name 之类的会好写；我第一眼查看把 _onSetAttr 理解成针对所有 ATTRS 里的属性的回调……

p.s. ember.js 里的回调名字取得很好，是一对，willSetAttr 和 didSetAttr ，设之前和设之后，很容易理解， @yiminghe 有兴趣参考不

[minghe]

关于继承，写的不够详细，补充下，如果想要混入其他子类，跟以前的KISSY.extend()继承base的写法不同，举个例子，有二个类ClassA和ClassB，那么写法是_RichBase.extend([ClassA,ClassB],{constructor:function(){}})_。RichBase.extend({},{})，后面的{}混入的是静态方法，这是有区别的。

[minghe]

https://gist.github.com/4464771 一个使用rich base的demo代码

[keyapril]

@minghe 你说的继承应该就是我上面提到的“扩展”吧