• Save
Kissy简介
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Kissy简介

  • 8,038 views
Uploaded on

KISSY简介

KISSY简介

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • @zinking 我们学习的是一种思想,而不是学习纯粹的代码编写,jQuery有它的设计初衷,不同的框架设计理念是不同的,也许Kissy是专门为自己打造的一套架构吧,架构没有好与不好,只要适合自己的架构就是好的。
    Are you sure you want to
    Your message goes here
  • 抱着一种学习的心态,支持。
    Are you sure you want to
    Your message goes here
  • 不错,学习了
    Are you sure you want to
    Your message goes here
  • YUI and KISSY
    Are you sure you want to
    Your message goes here
  • 学习kissy啦!这个很结力呀!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,038
On Slideshare
7,791
From Embeds
247
Number of Embeds
6

Actions

Shares
Downloads
0
Comments
8
Likes
25

Embeds 247

http://www.uedmagazine.com 146
http://wiki.ued.taobao.net 53
http://uedmagazine.com 34
http://static.slidesharecdn.com 12
http://cache.baidu.com 1
http://reader.youdao.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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