YUI 3 学习笔记（4）- Base基类

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

[b]1. 要使用Base，首先要引入YUI3的种子文件：[/b]

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

然后加载相应模块：

YUI().use('base', function(Y) {
});

[b]2. 继承Base[/b]
以下是继承Base的示例代码：

YUI().use("base", function(Y) {
    function MyClass(config) {
        // 调用Base的构造函数，并将参数传入
        MyClass.superclass.constructor.apply(this, arguments);
    }
    Y.extend(MyClass, Y.Base, {
        // 这里可以定义新类的方法
    });
});

[b]3. NAME属性[/b]
NAME属性是用来标识类的字符串，Base会自动将NAME作为该类激发事件名称的前缀，和定义事件监听器时事件名称的前缀。

在指定NAME
MyClass.NAME = "myClass";
的情况下：

MyClass.prototype.doSomething = function() {
    // 实际激发的事件是"myclass:enabled"
    this.fire("enabled");
}
...

var o = new MyClass(cfg);
o.on("enabled", function() {
    // 实际监听的是"myclass:enabled".
});

o.on("myclass:enabled", function() {
    // 监听的也是 "myclass:enabled"
});

[b]4. ATTRS属性[/b]
可以用关联矩阵(associative array)的方式定义类的属性，以下是定义类Drag的属性的代码片段，关于属性的配置可参见下一篇文章（关于attribute的）

Drag.ATTRS = {
    node: {
        setter: function(node) {
            var n = Y.one(node);
            if (!n) {
                Y.fail('DD.Drag: Invalid Node Given: ' + node);
            }
            return n;
        }
    }，
    ...
};

[b]5.初始化函数和析构函数[/b]
Base在初始化时会自动调用各级类的initializer函数，在析构时会自动调用destructor函数，所以有初始或者析构处理只需定义相应的方法就可以了，不用显式调用父类的方法，以下是一个例子：

Y.extend(MyClass, Y.Base, {
    initializer : function(cfg) {
        this._wrapper = Y.Node.create('<div class="yui-wrapper"></div>');
    },

    destructor : function() {
        Y.Event.purgeElement(this._wrapper);
        this._wrapper.get("parentNode").removeChild(this._wrapper);
        this._wrapper = null;
    }
});

[b]6. Plugins[/b]
Plugins机制可以用来在类的实例（而不是类本身）上动态添加特性。
Base的plug(pluginClass, pluginConfig)方法用于添加，其命名空间是pluginClass的NS属性。
Base的unplug(pluginClass) 和 unplug(namespace)方法用于移除
关于Plugin类的开发请参见相关文档。

[b]7. 扩展[/b]
Base的build方法可以用来把一个主类与多个扩充类合并为一个新类，以下是示例代码，其中
Panel、Resizable、Modal是之前定义好的类。

var WindowPanel = Y.Base.build("windowPanel", Panel, [Resizable, Modal]);