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

YUI 3 学习笔记(5)- Attribute类

阅读更多
Attribute类用于向一个类添加属性,它给类增加了set和get函数用于操作属性值,同时还
支持change事件以便监视属性的变化,此外,还可以自定义属性的setter、getter和校验
方法,可以定义属性为只读或者一次写(write-once)

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

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


2. Attribute类是用来扩张一个既存的类,使其具有属性管理功能的,以下是将MyClass扩张
的示例代码:
YUI().use("attribute", function(Y) {
    function MyClass() {
        ...
    }
 
    Y.augment(MyClass, Y.Attribute);
});


3. 增加属性
一旦一个类扩张了Attribute功能,就可以使用addAttrs批量添加属性,或者使用addAttr一个一
个地添加属性,以下是批量添加的例子:
function MyClass(userValues) {
    var attributeConfig = {
        attrA : {
            // attrA的配置,可配置的属性参见【4.属性配置属性】
        },
 
        attrB : {
            // attrB的配置
        } 
    };
 
    this.addAttrs(attributeConfig, userValues);
};

可以在new这个类或者new之后用set方法对属性赋值:
var o = new MyClass({
    attrA:5
});

o.set("attrB", "Hello World!");


4. 属性配置属性(Attribute configuration properties)
可以对属性(Attribute)进行配置的属性(properties)参见下表,所有属性都是可选的,也是
大小写敏感的:
value: 默认值
valueFn:函数。返回值会被作为属性的值
getter:函数
setter:函数
validator:函数。在setter前被调用,用来校验数据
readOnly:布尔值
writeOnce:布尔值。0-不广播;1-广播到YUI实例;2-广播到YUI实例和YUI global
lazyAdd:布尔值
cloneDefaultValue:可以为"shallow", "deep", true, false。仅在Base的ATTRS中使用。
以下是在addAttr中使用的例子:
this.addAttr("attrA", {
    value: 5,
 
    setter: function(val) {
        return Math.min(val, 10); 
    },
 
    validator: function(val) {
        return Y.Lang.isNumber(val);
    }
});


5. 属性变化事件
属性变化事件是一种用户自定义事件,其类型为"[attributeName]Change",例如定义了一个
属性"attrA",那么它的变化事件就是"attrAChange"。
定义事件监听器时可以使用两种方法:on和after。其中用on注册的监听器在变化发生前调用,
我们可以在这里检查数据的合法性,并用Event的preventDefault()方法拒绝对属性的修改。而
用after注册的监听器在事件发生后调用。
以下是对属性"enabled"定义变化事件监听器的示例代码:
o.on("enabledChange", function(event) {
   ...
});

o.after("enabledChange", function(event) {
   ...
});


事件监听器的第一个参数是以Event对象,它具有以下的属性和方法:
newVal
prevVal
attrName
subAttrName
preventDefault()
stopImmediatePropagation():可以在on和after监听器中使用,用于停止事件在监听器栈中的传播

6. 属性设置流程图(很值得参考)



7. 子属性(sub attribute)
属性可以包含子属性,我们可以在set/get方法中使用由"."标识的完整属性名来操作子属性。
以下是set的例子:
o.set("strings", {
    ui : {
        accept_label : "OK",
        decline_label : "Cancel",
    },
    errors : {
        e1000 : "Not Supported",
        e1001 : "Network Error"
    }
});

o.set("strings.ui.accept_label", "Yes");
o.set("strings.ui.decline_label", "No");

以下是get的例子:
var lbl = o.get("strings.ui.accept_label");

  • 大小: 202.3 KB
分享到:
评论
2 楼 yiyu 2014-02-15  
最近不看YUI了,发现一个国产的前端框架,是金蝶出的,叫OperaMasks-UI,基于jquery的,感觉很适用。
1 楼 qinshi110 2014-02-09  
希望博主提供更多学习YUI的资料,英文一般看官方文档有压力。

相关推荐

    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和....

    YUI-EXT使用详解

    7. **可扩展性(Extensibility)**:YUI-EXT的组件和类系统设计得非常灵活,允许开发者通过继承和插件机制来扩展其功能,满足特定项目需求。 通过提供的压缩包文件"ext 2.rar"、"ext教程.rar"和"yui_2.3.1.zip",你...

    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)]...

    yui3-master.zip

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

    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...

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

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

    yui_2.9.0前端UI

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

    YUI文件定位器Locator-Yui.zip

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

    webstorm_phpstorm_yuicompressor-2.4.8.jar

    5. **工作目录和输出目录**: - `Working directory`:设置为项目根目录,通常是`%PROJECT_DIR%`。 - `Output paths to refresh`:设置为压缩后的文件路径,如`$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 完整版

    用户可以通过这个文件快速查找和学习 YUI 2.7 中文 API 的各种功能,无需互联网连接。 **三、使用 YUI 2.7 开发** 在实际开发中,你可以根据项目需求,选择合适的 YUI 模块。例如,如果需要处理页面上的点击事件,...

    前端开源库-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...

    yui3-3.17.2最新版

    YUI(Yahoo! User Interface Library)是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、可扩展的Web应用程序。...通过深入学习和掌握YUI,开发者可以更好地应对现代Web开发的挑战。

    yuicompressor-2.4.jar

    压缩JS所使用jar包!...压缩JS:java -jar yuicompressor-2.4.jar --type js xxx.js -o xxx.js --charset utf-8 压缩CSS:java -jar yuicompressor-2.4.jar --type css xxx.css -o xxx.css --charset utf-8

Global site tag (gtag.js) - Google Analytics