Kissy简介
- 1. 从 YUI3 到 KISSY!
拔赤 bachi@taobao.com
http://www.uedagazine.com
2010-09-21
- 5. KISSY的结构
• Seed
– kissy
• Core
– ua,dom,event,ajax,cookie,json,anim
• Css
– reset,grid,common
• Utilities
– Sizzle,datazyload,flash
• Widgets
- 6. KISSY的结构
• Seed
– kissy
• Core
和YUI3很像?其实很不同!
– ua,dom,event,ajax,cookie,json,anim
• Css
– reset,grid,common
• Utilities
– Sizzle,datazyload,flash
• Widgets
- 11. KISSY OOP
函数名 注释
S.mix 对象的合并(替换)
S.merge 对象合并(不替换)
S.augment 类扩充
S.extend 类继承
S.namespace 命名空间
S.app 生成应用实例
S.each 遍历
- 12. 应用的创建
/*YUI3,创建一个保险险种应用*/
var INS = YUI();
INS.add('xz',function(Y){
Y.namespace('XZ');
Y.XZ = {
init:function(){/*your code*/}
};
});
INS.use('xz',function(){
Y.XZ.init();
});
- 15. 浏览器探测 - KISSY
• S.UA只存储当前浏览器相关的属性
– 比如在firefox里就不存在S.UA.ie
KISSY在ff下对浏览器的探测
- 16. 更多浏览器外壳的嗅探
S.UA.外壳 注释
S.UA.se360 360“安全”浏览器
S.UA.maxthon 傲游
S.UA.tt 腾讯浏览器
S.UA.theworld 世界之窗
S.UA.sougou 搜狗浏览器
- 18. 获取节点
功能 YUI3 KISSY
抓取一个节点 Y.one('.class') S.one('.class')
抓取节点列表 Y.all('.class') S.all('.class')
KISSY对Dom的封装和Jquery类似
- 21. YUI3和KISSY的Node(list)
含义 YUI3 KISSY
获取节点数 .size() .length
添加class名 .addClass() .addClass()
向上查找 .ancestor() .parent()
挂载节点 .append() .append()
将节点挂到.. .appendTo() .appendTo()
克隆节点 .cloneNode() #
YUI3和KISSY的node常用方法对照
- 22. YUI3和KISSY的Node(list) 续
含义 YUI3 KISSY
事件代理 .delegate() #
解除事件绑定 .detach/detachAll .detach()
遍历nodelist .each() #
获取属性 .get() .attr()
获取坐标 .getX/Y/XY() .offset()
包含class名 .hasClass() .hasClass()
在视野内 .inViewportRegion #
之后插入节点 .insert() .insertAfter()
- 23. YUI3和KISSY的Node(list) 续
含义 YUI3 KISSY
之前插入节点 .insertBefore() .insertBefore()
取第i个元素 .item(i) node[i]
绑定事件监听 .on(type,cb) .on(type,cb)
最前插入子节点 .prepend() #
上一个节点 .previous() .prev()
下一个节点 # .next()
获得兄弟节点 .getSibling() .siblings()
获得一个子孙节点 .query() .one()
- 24. YUI3和KISSY的Node(list) 续
含义 YUI3 KISSY
获得一组子孙节点 .queryAll() .all()
删除本节点 .remove() #
删除节点属性 .removeAttribute() .removeAttr()
删除class名 .removeClass() .removeClass
删除一个子节点 .removeChild() #
替换class名 .replaceClass() .replaceClass
替换(子)节点 .replace() #
.replaceChild()
- 25. YUI3和KISSY的Node(list) 续
含义 YUI3 KISSY
得到裸节点 .set/setAttrs() .attr()
设置(获得)样式 .set(get)Style .css()
得到(设置)innerHTML # .html()
更改class名 .toggleClass() .toggleClass()
获得节点内容文本 # .text()
获得input的value # .val()
获得宽度 # .width()
获得高度 # .height()
- 27. 创建节点,写节点内容
/* YUI */
var node = Y.Node.create('<div></div>')
node.set('innerHTML','content');
/* KISSY */
var node = S.Node('<div></div>');
node.html('content');
- 28. 获得innerHTML和"innerText"
/* YUI */
node.get(‘innerHTML’) //获得innerHTML
//yui没有提供获得innerText的方法
/* KISSY */
node.html(); //得到innerHTML
node.text(); //过滤掉html标签后的内容
- 30. 遍历nodelist
/* YUI */
nodelist.each(function(node,i){
//your code
});
/* KISSY */
S.each(nodelist,function(node,i){
//your code
});
- 33. 获得元素的region
/* YUI */
var r = node.get('region'),
left = r.left,
top = r.top,
right = r.right,
bottom = r.bottom,
width = r.width,//outterWidth
height = r.height; //outterHeight
- 34. 获得元素的region 续
/* YUI */
var r = node.offset(),
left = r.left,
top = r.top,
right = r.right, //undefined
bottom = r.bottom, //undefined
width = node.width(), //innerWidth
height = node.height(); //innerHeight
如果必要,请直接使用
node[0].offsetHeight/offsetWidth来获得
outterHeight/Width
- 35. 写样式
/* YUI */
node.setStyle(‘height’,‘10px’); //单个设置
node.setStyle(‘height’,10);
node.setStyles({ //批量设置
'height':'10px',
'width': '20px'
});
/* KISSY */
node.css('height','10px'); //单个设置
node.css('height',10);
node.css({ //批量设置
'height':10,
'width':'20px'
});
- 40. 绑定事件 续
/* KISSY */
node.on('click',function(e){
e.preventDefault(); //阻止事件
var el = e.target; //得到裸目标元素
//得到包装好的目标元素
var node = S.Node(el);
});
- 41. 自定义事件-YUI
/* YUI */
var EventFactory = function(){
this.publish('customEvent');
};
Y.augment(EventFactory, Y.Event.Target);
var EventCenter = new EventFactory();
EventCenter.fire('customEvent',{
param:param
});
EventCenter.subscribe('customEvent',function(e){
//e完全自定义
S.log(e.param)
});
- 42. 自定义事件-KISSY
/* KISSY */
var EventFactory = new Function;
S.augment(EventFactory, S.EventTarget);
var eventCenter = new EventFactory();
EventCenter.fire('customEvent',{
param:param
});
eventCenter.on('customEvent',function(e){
//e是一个Event Faced,e上挂载了参数的回调
e.preventDefault();
S.log(e.param);
});
- 48. 参与
• 到哪里去了解最新版的KISSY
– http://kissyteam.github.com/
• KISSY Project
– http://github.com/kissyteam
• KISSY 源码
– http://github.com/kissyteam/kissy