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" 指向的是一个关于 Yahoo User Interface Library (YUI) 和 YUIDoc 的特定版本或修订版。YUI 是一个开源的 JavaScript 库,提供了一系列模块化的工具,用于构建富有交互...
**yuicompressor-maven-plugin详解** `yuicompressor-maven-plugin`是一款强大的Maven插件,主要用于优化前端资源,特别是JavaScript和CSS文件。这个插件是基于YUI Compressor,一个由Yahoo开发的开源工具,它能...
yui compressor 2.4.6 发布日期:2011-04-15 用例: java -jar yuicompressor-2.4.6.jar myfile.js -o myfile-min.js
### 3. eclipse yuicompressor-maven-plugin `yuicompressor-maven-plugin`是Maven的一个插件,它将YUI Compressor集成到Maven的构建流程中。在Eclipse环境中,开发者可以方便地使用此插件在构建项目时自动对.js和....
yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件 [[Flattr this git repo] ( http://api.flattr.com/button/flattr-badge-large.png)]...
4. **表单(Forms)**:YUI-EXT提供了丰富的表单组件,如文本框、选择框、复选框、下拉列表等,同时支持表单验证和数据提交,方便构建交互性强的表单应用。 5. **Ajax交互(Ajax Interactions)**:YUI-EXT集成了...
通过“yui3-master.zip”这个压缩包,开发者不仅可以了解到YUI3的基本架构,还可以通过阅读源码来学习和掌握JavaScript的最佳实践,提升自身的前端开发能力。无论是初学者还是经验丰富的开发者,都能从中受益匪浅。...
如果用 Ant 执行 YUI Compressor 任务时出现了中文乱码,请下载此资源,用这里边 dist 目录里边的 YUIAnt-zh_CN.jar 替换掉官方提供的 YUIAnt.jar ,然后在对应的 Ant 任务中,用 encoding="xxx" 指定源文件的字符...
Locator-Yui 是 YUI 文件定位器插件。它可以与 Locator 组件(from Yahoo! to shift YUI' modules)集成使用,生成 YUI Loader 元数据。已编译的模块则可以通过 express-yui在服务器和客户端中使用。 标签:...
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...
4. **配置参数**: - `Program`:指定刚刚解压得到的`yuicompressor-2.4.8.jar`的完整路径。 - `Arguments`:输入命令行参数,通常为`--type js --charset UTF-8 $FileName$ -o $FileNameWithoutExtension$.min.js...
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yuicompressor-...
4. **事件处理**:YUI 提供了一套完善的事件系统,可以方便地监听和处理页面中的各种事件,如点击、滚动、键盘输入等。 5. **AJAX 支持**:通过 Connection Manager 提供 AJAX 功能,允许异步与服务器进行通信,...
js、css 压缩工具jar
#酒店价格日历 ####基于YUI3开发的价格日历组件 @name:Y.PriceCalendar @requires:['node', 'base-base', 'event-mouseenter']
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...