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

• An Enjoyable JavaScript Library

• 小巧灵活,简洁实用
• 使用起来让人感觉愉悦。
开发中的KISSY




 http://github.com/kissyteam/kissy
            KISSY源码
KISSY的子项目




  http://github.com/kissyteam
         KISSY子项目
KISSY的结构
• Seed
  – kissy
• Core
  – ua,dom,event,ajax,cookie,json,anim
• Css
  – reset,grid,common
• Utilities
  – Sizzle...
KISSY的结构
• Seed
  – kissy
• Core
  和YUI3很像?其实很不同!
  – ua,dom,event,ajax,cookie,json,anim
• Css
  – reset,grid,common
• Uti...
开始!
种子的引入
• 目前最新版本 1.1.4
• http://a.tbcdn.cn/s/kissy/1.1.4/kissy-min.js
程序启动
/* YUI3 */
YUI().use('*',function(Y){
     //your code
});


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


/* KISSY */
KISSY.use('mod1,mod2',function(S)...
KISSY OOP
      函数名            注释
      S.mix     对象的合并(替换)
     S.merge    对象合并(不替换)
   S.augment        类扩充
    S.extend...
应用的创建
/*YUI3,创建一个保险险种应用*/
var INS = YUI();
INS.add('xz',function(Y){
     Y.namespace('XZ');
     Y.XZ = {
          init:...
应用的创建 续
/*KISSY,创建一个保险险种应用*/
KISSY.app('INS');//创建“保险”应用
INS.namespace('XZ');//创建“险种”命名空间
INS.add('xz',function(S){
     S...
浏览器探测 - YUI




     YUI对浏览器的探测
浏览器探测 - KISSY
• S.UA只存储当前浏览器相关的属性
 – 比如在firefox里就不存在S.UA.ie




    KISSY在ff下对浏览器的探测
更多浏览器外壳的嗅探

   S.UA.外壳          注释
  S.UA.se360     360“安全”浏览器
 S.UA.maxthon       傲游
    S.UA.tt        腾讯浏览器
 S.UA.thewo...
KISSY.Node
获取节点

 功能          YUI3              KISSY
抓取一个节点   Y.one('.class')   S.one('.class')
抓取节点列表   Y.all('.class')   S.all('.c...
Selector
• KISSY默认仅支持这些选择器
 –   #id
 –   tag
 –   .cls
 –   #id tag
 –   #id .cls
 –   tag.cls
 –   #id tag.cls
更多选择器需载入Sizzle
/*KISSY 引入Sizzle*/
KISSY.use('core,sizzle',function(S){
     var node = S.one('div span');
     //...
});

...
YUI3和KISSY的Node(list)
  含义             YUI3           KISSY
获取节点数           .size()        .length
添加class名     .addClass(...
YUI3和KISSY的Node(list) 续
  含义                   YUI3            KISSY
 事件代理             .delegate()             #
解除事件绑定   ...
YUI3和KISSY的Node(list) 续
   含义              YUI3             KISSY
 之前插入节点    .insertBefore()   .insertBefore()
 取第i个元素    ...
YUI3和KISSY的Node(list) 续
   含义               YUI3         KISSY
获得一组子孙节点        .queryAll()       .all()
 删除本节点           ....
YUI3和KISSY的Node(list) 续
     含义              YUI3            KISSY
   得到裸节点        .set/setAttrs()      .attr()
  设置(获得)样式...
获得nodelist的节点数
/* YUI */
nodelist.size(); //节点个数
nodelist.item(i); //找到第i个节点




/* KISSY */
nodelist.length; //节点个数
nodel...
创建节点,写节点内容
/* YUI */
var node = Y.Node.create('<div></div>')
node.set('innerHTML','content');




/* KISSY */
var node = S...
获得innerHTML和"innerText"
 /* YUI */
 node.get(‘innerHTML’) //获得innerHTML
 //yui没有提供获得innerText的方法




 /* KISSY */
 node.ht...
清除节点事件

//清除mouseover事件所有的绑定
node.detach('mouseover');
//清除mouseover事件对foo的绑定
node.detach('mouseover',foo);
//清除node上所有的事件...
遍历nodelist
 /* YUI */
 nodelist.each(function(node,i){
      //your code
 });



 /* KISSY */
 S.each(nodelist,function(no...
得到节点坐标
/* YUI */
node.getXY(); //得到[x,y]
node.getX(); //得到x
node.getY(); //得到y



/* KISSY */
node.offset().left; //得到x坐标
...
得到DOM节点

/* YUI */
Y.Node.getDOMNode(node); //得到DOM节点



/* KISSY */
node[0]; //直接得到DOM节点
node.getDOMNode(); //通过方法得到DOM节点...
获得元素的region

/* YUI */
var r = node.get('region'),
    left = r.left,
    top = r.top,
    right = r.right,
    bottom = r...
获得元素的region 续
/* YUI */
var r = node.offset(),
    left = r.left,
    top = r.top,
    right = r.right, //undefined
    bo...
写样式
/* YUI */
node.setStyle(‘height’,‘10px’); //单个设置
node.setStyle(‘height’,10);
node.setStyles({ //批量设置
     'height':'10...
读样式

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




/* KISSY */
node.css(‘height’); //获得样式
快捷调用事件
/* YUI */
node.blur()
node.submit()
node.focus()
node.select()
node.reset()
node.scrollIntoView()

/* KISSY */
node...
KISSY.Event
绑定事件

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

/* KISSY */
node.on('click',function(e){
     e.preventDefault(); //阻止事件
     var el = e.target; //得到裸目标元素
     //...
自定义事件-YUI
/* YUI */
var EventFactory = function(){
     this.publish('customEvent');
};
Y.augment(EventFactory, Y.Event.Ta...
自定义事件-KISSY
/* KISSY */
var EventFactory = new Function;
S.augment(EventFactory, S.EventTarget);
var eventCenter = new Eve...
KISSY支持mouseenter/leave
/* KISSY */
Event.on('#id', 'mouseenter', function(ev) {
    // do something
});

Event.on('#id', ...
KISSY支持focusin/out
/* KISSY */
Event.on('#id', 'focusin focusout',
function(ev) {
    // do something
});




         和YU...
KISSY.JSON
使用JSON
/* KISSY */
KISSY.use('core',function(S){
     //从object转换为字符串
     var str = S.JSON.stringify({
          a:1
    ...
参与KISSY的开发
参与
• 到哪里去了解最新版的KISSY
  – http://kissyteam.github.com/
• KISSY Project
  – http://github.com/kissyteam
• KISSY 源码
  – http:...
Thank you~
Q&A
Upcoming SlideShare
Loading in...5
×

Kissy简介

6,907

Published on

KISSY简介

8 Comments
25 Likes
Statistics
Notes
  • @zinking 我们学习的是一种思想,而不是学习纯粹的代码编写,jQuery有它的设计初衷,不同的框架设计理念是不同的,也许Kissy是专门为自己打造的一套架构吧,架构没有好与不好,只要适合自己的架构就是好的。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 抱着一种学习的心态,支持。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 不错,学习了
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • YUI and KISSY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 学习kissy啦!这个很结力呀!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,907
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
8
Likes
25
Embeds 0
No embeds

No notes for slide

Kissy简介

  1. 1. 从 YUI3 到 KISSY! 拔赤 bachi@taobao.com http://www.uedagazine.com 2010-09-21
  2. 2. 初识KISSY • An Enjoyable JavaScript Library • 小巧灵活,简洁实用 • 使用起来让人感觉愉悦。
  3. 3. 开发中的KISSY http://github.com/kissyteam/kissy KISSY源码
  4. 4. KISSY的子项目 http://github.com/kissyteam KISSY子项目
  5. 5. KISSY的结构 • Seed – kissy • Core – ua,dom,event,ajax,cookie,json,anim • Css – reset,grid,common • Utilities – Sizzle,datazyload,flash • Widgets
  6. 6. KISSY的结构 • Seed – kissy • Core 和YUI3很像?其实很不同! – ua,dom,event,ajax,cookie,json,anim • Css – reset,grid,common • Utilities – Sizzle,datazyload,flash • Widgets
  7. 7. 开始!
  8. 8. 种子的引入 • 目前最新版本 1.1.4 • http://a.tbcdn.cn/s/kissy/1.1.4/kissy-min.js
  9. 9. 程序启动 /* YUI3 */ YUI().use('*',function(Y){ //your code }); /* KISSY */ KISSY.use('core',function(S){ //your code... });
  10. 10. 调用多模块 /* YUI3 */ YUI().use('mod1','mod2',function(Y){ //your code }); /* KISSY */ KISSY.use('mod1,mod2',function(S){ //your code... });
  11. 11. KISSY OOP 函数名 注释 S.mix 对象的合并(替换) S.merge 对象合并(不替换) S.augment 类扩充 S.extend 类继承 S.namespace 命名空间 S.app 生成应用实例 S.each 遍历
  12. 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. 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. 14. 浏览器探测 - YUI YUI对浏览器的探测
  15. 15. 浏览器探测 - KISSY • S.UA只存储当前浏览器相关的属性 – 比如在firefox里就不存在S.UA.ie KISSY在ff下对浏览器的探测
  16. 16. 更多浏览器外壳的嗅探 S.UA.外壳 注释 S.UA.se360 360“安全”浏览器 S.UA.maxthon 傲游 S.UA.tt 腾讯浏览器 S.UA.theworld 世界之窗 S.UA.sougou 搜狗浏览器
  17. 17. KISSY.Node
  18. 18. 获取节点 功能 YUI3 KISSY 抓取一个节点 Y.one('.class') S.one('.class') 抓取节点列表 Y.all('.class') S.all('.class') KISSY对Dom的封装和Jquery类似
  19. 19. Selector • KISSY默认仅支持这些选择器 – #id – tag – .cls – #id tag – #id .cls – tag.cls – #id tag.cls
  20. 20. 更多选择器需载入Sizzle /*KISSY 引入Sizzle*/ KISSY.use('core,sizzle',function(S){ var node = S.one('div span'); //... }); Sizzle: http://sizzlejs.com/
  21. 21. YUI3和KISSY的Node(list) 含义 YUI3 KISSY 获取节点数 .size() .length 添加class名 .addClass() .addClass() 向上查找 .ancestor() .parent() 挂载节点 .append() .append() 将节点挂到.. .appendTo() .appendTo() 克隆节点 .cloneNode() # YUI3和KISSY的node常用方法对照
  22. 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. 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. 24. YUI3和KISSY的Node(list) 续 含义 YUI3 KISSY 获得一组子孙节点 .queryAll() .all() 删除本节点 .remove() # 删除节点属性 .removeAttribute() .removeAttr() 删除class名 .removeClass() .removeClass 删除一个子节点 .removeChild() # 替换class名 .replaceClass() .replaceClass 替换(子)节点 .replace() # .replaceChild()
  25. 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. 26. 获得nodelist的节点数 /* YUI */ nodelist.size(); //节点个数 nodelist.item(i); //找到第i个节点 /* KISSY */ nodelist.length; //节点个数 nodelist[i]; //找到第i个节点
  27. 27. 创建节点,写节点内容 /* YUI */ var node = Y.Node.create('<div></div>') node.set('innerHTML','content'); /* KISSY */ var node = S.Node('<div></div>'); node.html('content');
  28. 28. 获得innerHTML和"innerText" /* YUI */ node.get(‘innerHTML’) //获得innerHTML //yui没有提供获得innerText的方法 /* KISSY */ node.html(); //得到innerHTML node.text(); //过滤掉html标签后的内容
  29. 29. 清除节点事件 //清除mouseover事件所有的绑定 node.detach('mouseover'); //清除mouseover事件对foo的绑定 node.detach('mouseover',foo); //清除node上所有的事件 node.detach();
  30. 30. 遍历nodelist /* YUI */ nodelist.each(function(node,i){ //your code }); /* KISSY */ S.each(nodelist,function(node,i){ //your code });
  31. 31. 得到节点坐标 /* YUI */ node.getXY(); //得到[x,y] node.getX(); //得到x node.getY(); //得到y /* KISSY */ node.offset().left; //得到x坐标 node.offset().top; //得到y坐标
  32. 32. 得到DOM节点 /* YUI */ Y.Node.getDOMNode(node); //得到DOM节点 /* KISSY */ node[0]; //直接得到DOM节点 node.getDOMNode(); //通过方法得到DOM节点 nodelist.getDOMNodes(); //得到DOM节点列表 可以把nodelist本身就当成一个 DOMNodeList
  33. 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. 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. 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. 36. 读样式 /* YUI */ node.getStyle(‘height’); //获得样式 /* KISSY */ node.css(‘height’); //获得样式
  37. 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. 38. KISSY.Event
  39. 39. 绑定事件 /* YUI */ node.on('click',function(e){ e.halt(); //阻止事件 //得到包装好的目标元素 var node = e.target; //得到裸的目标元素 var el = Y.Node.getDOMNode(node); });
  40. 40. 绑定事件 续 /* KISSY */ node.on('click',function(e){ e.preventDefault(); //阻止事件 var el = e.target; //得到裸目标元素 //得到包装好的目标元素 var node = S.Node(el); });
  41. 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. 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. 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. 44. KISSY支持focusin/out /* KISSY */ Event.on('#id', 'focusin focusout', function(ev) { // do something }); 和YUI一样,KISSY同样支持 mouseenter和mouseleave
  45. 45. KISSY.JSON
  46. 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. 47. 参与KISSY的开发
  48. 48. 参与 • 到哪里去了解最新版的KISSY – http://kissyteam.github.com/ • KISSY Project – http://github.com/kissyteam • KISSY 源码 – http://github.com/kissyteam/kissy
  49. 49. Thank you~
  50. 50. Q&A

×