`
yiyu
  • 浏览: 186293 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多
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]);

分享到:
评论

相关推荐

    yui-yuidoc-yuidoc-50-529-gc631758

    【标题】"yui-yuidoc-yuidoc-50-529-gc631758" 指向的是一个关于 Yahoo User Interface Library (YUI) 和 YUIDoc 的特定版本或修订版。YUI 是一个开源的 JavaScript 库,提供了一系列模块化的工具,用于构建富有交互...

    yuicompressor-maven-plugin

    **yuicompressor-maven-plugin详解** `yuicompressor-maven-plugin`是一款强大的Maven插件,主要用于优化前端资源,特别是JavaScript和CSS文件。这个插件是基于YUI Compressor,一个由Yahoo开发的开源工具,它能...

    yui-compressor 2.4.6 2011-04-15发布YUI

    yui compressor 2.4.6 发布日期:2011-04-15 用例: java -jar yuicompressor-2.4.6.jar myfile.js -o myfile-min.js

    eclipse yuicompressor-maven-plugin

    ### 3. eclipse yuicompressor-maven-plugin `yuicompressor-maven-plugin`是Maven的一个插件,它将YUI Compressor集成到Maven的构建流程中。在Eclipse环境中,开发者可以方便地使用此插件在构建项目时自动对.js和....

    yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件.zip

    yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件 [[Flattr this git repo] ( http://api.flattr.com/button/flattr-badge-large.png)]...

    YUI-EXT使用详解

    4. **表单(Forms)**:YUI-EXT提供了丰富的表单组件,如文本框、选择框、复选框、下拉列表等,同时支持表单验证和数据提交,方便构建交互性强的表单应用。 5. **Ajax交互(Ajax Interactions)**:YUI-EXT集成了...

    yui_2.9.0前端UI

    YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...

    yui3-master.zip

    通过“yui3-master.zip”这个压缩包,开发者不仅可以了解到YUI3的基本架构,还可以通过阅读源码来学习和掌握JavaScript的最佳实践,提升自身的前端开发能力。无论是初学者还是经验丰富的开发者,都能从中受益匪浅。...

    支持中文的 YUI Compressor Ant 任务驱动 - Shane版

    如果用 Ant 执行 YUI Compressor 任务时出现了中文乱码,请下载此资源,用这里边 dist 目录里边的 YUIAnt-zh_CN.jar 替换掉官方提供的 YUIAnt.jar ,然后在对应的 Ant 任务中,用 encoding="xxx" 指定源文件的字符...

    YUI文件定位器Locator-Yui.zip

    Locator-Yui 是 YUI 文件定位器插件。它可以与 Locator 组件(from Yahoo! to shift YUI' modules)集成使用,生成 YUI Loader 元数据。已编译的模块则可以通过 express-yui在服务器和客户端中使用。 标签:...

    Yui_ext 学习笔记

    【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    webstorm_phpstorm_yuicompressor-2.4.8.jar

    4. **配置参数**: - `Program`:指定刚刚解压得到的`yuicompressor-2.4.8.jar`的完整路径。 - `Arguments`:输入命令行参数,通常为`--type js --charset UTF-8 $FileName$ -o $FileNameWithoutExtension$.min.js...

    yuicompressor-2.4.8.jar

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yuicompressor-...

    Yahoo YUI2.7中文API 完整版

    4. **事件处理**:YUI 提供了一套完善的事件系统,可以方便地监听和处理页面中的各种事件,如点击、滚动、键盘输入等。 5. **AJAX 支持**:通过 Connection Manager 提供 AJAX 功能,允许异步与服务器进行通信,...

    YUIcompressor

    js、css 压缩工具jar

    yui-hotel-calendar.rar

    #酒店价格日历 ####基于YUI3开发的价格日历组件 @name:Y.PriceCalendar @requires:['node', 'base-base', 'event-mouseenter']

    前端开源库-yui-compressor

    npm install yui-compressor ``` 安装完成后,可以使用以下命令对JavaScript或CSS文件进行压缩: ```bash java -jar path/to/yuicompressor.jar --type js input.js -o output.min.js java -jar path/to/yui...

Global site tag (gtag.js) - Google Analytics