论坛首页 Web前端技术论坛

YUI 3 学习笔记(4)- Base基类

浏览 2153 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-03-05   最后修改:2010-04-05
YUI
Base是一个基础类,通过继承Base可以以一种统一的方式创建自己的具有新的属性、并可作为事件目的(Event target)的类。

1. 要使用Base,首先要引入YUI3的种子文件:
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

   然后加载相应模块:
YUI().use('base', function(Y) {
});


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


3. NAME属性
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"
});


4. ATTRS属性
可以用关联矩阵(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;
        }
    },
    ...
};


5.初始化函数和析构函数
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;
    }
});


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

7. 扩展
Base的build方法可以用来把一个主类与多个扩充类合并为一个新类,以下是示例代码,其中
Panel、Resizable、Modal是之前定义好的类。
var WindowPanel = Y.Base.build("windowPanel", Panel, [Resizable, Modal]);

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics