KISSY简介

1. 从 YUI3 到 KISSY！
拔赤 bachi@taobao.com
http://www.uedagazine.com
2010-09-21

2. 初识KISSY
• An Enjoyable JavaScript Library
• 小巧灵活，简洁实用
• 使用起来让人感觉愉悦。

3. 开发中的KISSY
http://github.com/kissyteam/kissy
KISSY源码

4. KISSY的子项目
http://github.com/kissyteam
KISSY子项目

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

7. 开始！

8. 种子的引入
• 目前最新版本 1.1.4
• http://a.tbcdn.cn/s/kissy/1.1.4/kissy-min.js

9. 程序启动
/* YUI3 */
YUI().use('*',function(Y){
//your code
});
/* KISSY */
KISSY.use('core',function(S){
//your code...
});

10. 调用多模块
/* YUI3 */
YUI().use('mod1','mod2',function(Y){
//your code
});
/* KISSY */
KISSY.use('mod1,mod2',function(S){
//your code...
});

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

13. 应用的创建 续
/*KISSY,创建一个保险险种应用*/
KISSY.app('INS');//创建“保险”应用
INS.namespace('XZ');//创建“险种”命名空间
INS.add('xz',function(S){
S.XZ = {
init:function(){/*your code*/}
};
//S指向INS
});
INS.use('xz',function(S){
S.XZ.init();
});
app 方法为基于 KISSY 的应用提供了最基本的代码组织方式。

14. 浏览器探测 - YUI
YUI对浏览器的探测

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 搜狗浏览器

17. KISSY.Node

18. 获取节点
功能 YUI3 KISSY
抓取一个节点 Y.one('.class') S.one('.class')
抓取节点列表 Y.all('.class') S.all('.class')
KISSY对Dom的封装和Jquery类似

19. Selector
• KISSY默认仅支持这些选择器
– #id
– tag
– .cls
– #id tag
– #id .cls
– tag.cls
– #id tag.cls

20. 更多选择器需载入Sizzle
/*KISSY 引入Sizzle*/
KISSY.use('core,sizzle',function(S){
var node = S.one('div span');
//...
});
Sizzle: http://sizzlejs.com/

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()

26. 获得nodelist的节点数
/* YUI */
nodelist.size(); //节点个数
nodelist.item(i); //找到第i个节点
/* KISSY */
nodelist.length; //节点个数
nodelist[i]; //找到第i个节点

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标签后的内容

29. 清除节点事件
//清除mouseover事件所有的绑定
node.detach('mouseover');
//清除mouseover事件对foo的绑定
node.detach('mouseover',foo);
//清除node上所有的事件
node.detach();

30. 遍历nodelist
/* YUI */
nodelist.each(function(node,i){
//your code
});
/* KISSY */
S.each(nodelist,function(node,i){
//your code
});

31. 得到节点坐标
/* YUI */
node.getXY(); //得到[x,y]
node.getX(); //得到x
node.getY(); //得到y
/* KISSY */
node.offset().left; //得到x坐标
node.offset().top; //得到y坐标

32. 得到DOM节点
/* YUI */
Y.Node.getDOMNode(node); //得到DOM节点
/* KISSY */
node[0]; //直接得到DOM节点
node.getDOMNode(); //通过方法得到DOM节点
nodelist.getDOMNodes(); //得到DOM节点列表
可以把nodelist本身就当成一个
DOMNodeList

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

36. 读样式
/* YUI */
node.getStyle(‘height’); //获得样式
/* KISSY */
node.css(‘height’); //获得样式

37. 快捷调用事件
/* YUI */
node.blur()
node.submit()
node.focus()
node.select()
node.reset()
node.scrollIntoView()
/* KISSY */
node[0].blur()
node[0].submit()
node[0].focus()
node[0].select()
node[0].reset()
node[0].scrollIntoView()

38. KISSY.Event

39. 绑定事件
/* YUI */
node.on('click',function(e){
e.halt(); //阻止事件
//得到包装好的目标元素
var node = e.target;
//得到裸的目标元素
var el = Y.Node.getDOMNode(node);
});

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

43. KISSY支持mouseenter/leave
/* KISSY */
Event.on('#id', 'mouseenter', function(ev) {
// do something
});
Event.on('#id', 'mouseleave', function(ev) {
// do something
});
和YUI一样，KISSY同样支持
mouseenter和mouseleave

44. KISSY支持focusin/out
/* KISSY */
Event.on('#id', 'focusin focusout',
function(ev) {
// do something
});
和YUI一样，KISSY同样支持
mouseenter和mouseleave

45. KISSY.JSON

46. 使用JSON
/* KISSY */
KISSY.use('core',function(S){
//从object转换为字符串
var str = S.JSON.stringify({
a:1
});
//从字符串转换为object
var obj = S.JSON.parse('{"a":1}')
});
JSON: http://www.json.org/js.html

47. 参与KISSY的开发

48. 参与
• 到哪里去了解最新版的KISSY
– http://kissyteam.github.com/
• KISSY Project
– http://github.com/kissyteam
• KISSY 源码
– http://github.com/kissyteam/kissy

49. Thank you~

50. Q&A