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'); } });