YUI(config).use('module1', 'module2',function (Y) {
new Y.M1();
new Y.M2();
});
实例的时候,需要传config参数。config的配置参数很多,这里只例举几个常见的场景,具体的可以参考:config。
var _YUI3_CONFIG_ = {
combine : true,
comboBase : 'http://a.tbcdn.cn/??',
root : 's/yui/3.7.3/build/',
charset : 'gbk',
groups : {
util : {
root : 'apps/et/common/',
modules : {
'trip-mustache' : {
path : 'js/mustache.js',
requires : ['node-base']
}
}
},
widgets : {
root : 'apps/et/common/widgets/',
modules : {
'trip-autocomplete-skin' : {
path : 'suggest/css/trip-autocomplete-min.css',
type : 'css'
}
}
}
}
};
var YTRIP = YUI(_YUI3_CONFIG_);
KISSY.use('module1,module2',function (S,M1,M2) {
new M1();
new M1();
});
而KISSY的config参数相对就更简单了,简单到我们可以不太费劲地一一例举:
debug (Boolean) – 是否开启调试模式
KISSY.config({
combine : true,
charset : 'gbk',
packages : [{
name : 'mods',
path : path
},{
name : 'widgets',
path : path
}]
KISSY的这种包配置,虽然给使用的时候带来了便利,但出问题的时候系统不会报bug,这时可能要靠自己的“火眼金睛”了。有没有更好的解决办法呢?当然……
YUI的Dom/NODE接口,方法名相对更规范一些(比如getAttribute,get('value'),setStyle)。
对YUI,比较令人疑惑的是NODE的get和set这两个“黑盒子”。目前已知的有:
| 方法 | 功能 | KISSY对应函数 |
|---|---|---|
| get('value') | input获取value值 | val() |
| set('text') | 给符合选择器的所有元素设置文本值 | text(value) |
相对而言,KISSY在这方面,接口更接近于JQuery(简洁,比如attr,val,css)。
| KISSY | YUI | 说明 |
|---|---|---|
| html() | getHTML()/setHTML() | 获取/设置符合选择器的(KISSY:第一个元素的) innerHTML。YUI不赞成用getContent |
| text() | get('text')/set('text',value) | 获取/设置节点的文本值 |
Y.io('https://somedomain.com/url', {
method: 'PUT',
data: '?foo=bar',
request: {
maxRedirects: 100,
strictSSL: true,
multipart: [
{
'content-type': 'application/json',
body: JSON.stringify({
foo: 'bar',
_attachments: {
'message.txt': {
follows: true,
length: 18,
'content_type': 'text/plain'
}
}
})
},
{
body: 'I am an attachment'
}
]
},
on: {
success: function(id, e) {
Y.log(e.responseText);
}
}
});
IO.get(url, data, callback, dataType)
get<
IO({
type:"get",
url: url,
data: data,
success: callback,
dataType: dataType
});
IO.jsonp(url, data, callback)
jsonp<
IO({
type:"get",
url: url,
data: data,
success: callback,
dataType: "jsonp"
});
function NewClass (config) {
NewClass.superclass.constructor.apply(this, arguments);
}
NewClass.NAME = 'NewClass';
NewClass.ATTRS = {
score : {
value : 11,
setter:function(str){return parseInt(str);},
validator:function(str){
return str<=100?true:false;
}
},
b : {
value : 12
}
};
Y.extend(NewClass, Y.Base, {
initializer : function () {
var that = this;
var score = that.get('score');
}
});
function NewClassr(){
NewClassr.superclass.constructor.apply(this, arguments);
this.init.apply(this, arguments);
}
NewClassr.NAME = 'NewClass';
NewClassr.ATTRS = {
score : {
value : 11,
setter:function(str){return parseInt(str);},
validator:function(str){
return str<=100?true:false;
}
}
};
S.extend(NewClassr, S.Base, {
init:function(){
var score = this.get('score');
}
});