浏览 2153 次
锁定老帖子 主题:YUI 3 学习笔记(4)- Base基类
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-03-05
最后修改:2010-04-05
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]); 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |