yui3 备忘录
前段时间玩了一把yui3,感觉很棒,当时思路比较清晰,最近一直忙项目,项目中考虑到实现一个类似于yui3中的插件机制,竟然忘记了如何去做,赶快找来 pluginhost-debug.js 源码一窥,豁然开朗,决定把yui3中的一些原理机制小记一下,备忘.
首先yui3我感觉最大的亮点就是把粒度尽可能做到最小化,使用什么功能就往 Y 上添加什么功能模块,首先要搞明白这里的Y,其实就是已经实例化的YUI3,这点其它和jquey是异曲同工的,这两者都在使用的时候替使用者初始化了一个功能很强的实例,不过yui3具有选择性,而yui3把选择权交给了用户,让用户最小化的定制自己所需求的功能,这样做可能对于新接触YUI3的用户不太习惯,不过要想用好一个工具,你必须要首先熟悉它,废话到此......
Attribute 用于对象属性的封装
Base 继承了Attribute，用于创建一个类
Extension 继承 Base，提供修改一个类（Class）的功能。
Plugin 继承 Base，为一个初始化的对象添加新功能,说白了就是新开辟一块命名空间,在里面为所欲为.
Widget 继承 Base，是创建一个有图形界面（Widget）的基础。
下面就这些基本模块加以使用:
Attribute
[javascript]
YUI().use('attribute',function(Y){
function textbox(attrs){
//textbox.superclass.constructor.apply(this, arguments);
this.addAttrs(textbox.attr,attrs);
}
textbox.prototype.test = function(){
alert('this is test');
}
//Y.extend(textbox,Y.Attribute);
Y.augment(textbox, Y.Attribute);
textbox.attr = {
birthday:{
value:"1986,2,23"
},
name:{
default:'textbox'
}
};
var textboxNew = new textbox({birthday:"1986,2,23"});
textboxNew.set("name", "textboxnew");
console.log(textboxNew.get("name"));
textboxNew.test() ;
})
[/javascript]
注意:两个注释的地方,其实extend可以代替augment使用(把注释去掉再把Y.augment(textbox, Y.Attribute);这句注释),效果是一样的,唯一的区别就是使用extend方法叫继承(有上下级关系),使用augment方法叫扩展.
Base
[javascript]
YUI().use("base", function(Y) {
function textbox(config){
textbox.superclass.constructor.apply(this, arguments);
}
textbox.NAME = 'textbox';
textbox.ATTRS = {
birthday : {
default:"1986,2,23"
},
name : {
value:"textbox"
}
};
Y.extend(textbox, Y.Base, {
getName : function(){
return this.get("name")+this.get("birthday");
}
});
var text = new textbox();
text.set("birthday","1916,2,23");
console.log(text.getName());
text.on('birthdayChange',function(e){
//有意思的属性监听
console.log('birthday was edited');
});
text.set("birthday","1986,2,23");
});
[/javascript]
Extensions
The Base class provides a static build method used to create custom classes, by mixing a main class, with one or more extension classes.
Extension classes are similar to plugins, in that they encapsulate or bundle specific feature implementations. However extensions are used to mix and match code at the class level, to create new classes, whereas plugins are used to mix and match code at the instance level.
yui3 官方网站上如是描述:base 类提供一个静态 build 方法用于创建自定义类,用来混合 main 类(父类) 和 其它扩展类.扩展类类似于插件,它们把一连串的特定功能安装(压缩)到主类(实例)中,但是extensions是在类级别被混合进代码为了创建新的类,然而plugins是被在实例化之后被混合进代码的.
其实上面代码已经用到extensions概念了,这里就不多赘述了,另外说一下.Base的build方法和c reate方法也提供了这种扩展机制,中是两个方法的参数有些不同.下篇文章中我们再来分析.
Widget
yui3提供 不少这种类似于jquery的扩展组件,当然你也可以自己做自己的widget,或者直接扩展现有组件,另外还可以根据需要选择所需组件功能.真是无所不能,这里只说一下如何建立自己的组件.YUI官方的例子,很好,很实用.
[javascript]
/* Spinner class constructor */
function Spinner(config) {
Spinner.superclass.constructor.apply(this, arguments);
}
/*
* Required NAME static field, to identify the Widget class and
* used as an event prefix, to generate class names etc. (set to the
* class name in camel case).
*/
Spinner.NAME = "spinner";
/*
* The attribute configuration for the Spinner widget. Attributes can be
* defined with default values, get/set functions and validator functions
* as with any other class extending Base.
*/
Spinner.ATTRS = {
// The minimum value for the spinner.
min : {
value:0
},
// The maximum value for the spinner.
max : {
value:100
},
// The current value of the spinner.
value : {
value:0,
validator: function(val) {
return this._validateValue(val);
}
},
// Amount to increment/decrement the spinner when the buttons,
// or arrow up/down keys are pressed.
minorStep : {
value:1
},
// Amount to increment/decrement the spinner when the page up/down keys are pressed.
majorStep : {
value:10
},
// The localizable strings for the spinner. This attribute is
// defined by the base Widget class but has an empty value. The
// spinner is simply providing a default value for the attribute.
strings: {
value: {
tooltip: "Press the arrow up/down keys for minor increments, \
page up/down for major increments.",
increment: "Increment",
decrement: "Decrement"
}
}
};
Y.extend(Spinner, Widget, {
// Methods/properties to add to the prototype of the new class
...
});
[/javascript]
