Kissy简介

从 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,datazyload,flash • Widgets

KISSY的结构 • Seed – kissy • Core 和YUI3很像？其实很不同！ – ua,dom,event,ajax,cookie,json,anim • Css – reset,grid,common • Utilities – Sizzle,datazyload,flash • Widgets

开始！

种子的引入 • 目前最新版本 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 code... });

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

KISSY OOP 函数名注释 S.mix 对象的合并（替换） S.merge 对象合并（不替换） S.augment 类扩充 S.extend 类继承 S.namespace 命名空间 S.app 生成应用实例 S.each 遍历

应用的创建 /*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(); });

应用的创建续 /*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 的应用提供了最基本的代码组织方式。

浏览器探测 - 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.theworld 世界之窗 S.UA.sougou 搜狗浏览器

KISSY.Node

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

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'); //... }); Sizzle: http://sizzlejs.com/

YUI3和KISSY的Node(list) 含义 YUI3 KISSY 获取节点数 .size() .length 添加class名 .addClass() .addClass() 向上查找 .ancestor() .parent() 挂载节点 .append() .append() 将节点挂到.. .appendTo() .appendTo() 克隆节点 .cloneNode() # YUI3和KISSY的node常用方法对照

YUI3和KISSY的Node(list) 续含义 YUI3 KISSY 事件代理 .delegate() # 解除事件绑定 .detach/detachAll .detach() 遍历nodelist .each() # 获取属性 .get() .attr() 获取坐标 .getX/Y/XY() .offset() 包含class名 .hasClass() .hasClass() 在视野内 .inViewportRegion # 之后插入节点 .insert() .insertAfter()

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

YUI3和KISSY的Node(list) 续含义 YUI3 KISSY 获得一组子孙节点 .queryAll() .all() 删除本节点 .remove() # 删除节点属性 .removeAttribute() .removeAttr() 删除class名 .removeClass() .removeClass 删除一个子节点 .removeChild() # 替换class名 .replaceClass() .replaceClass 替换(子)节点 .replace() # .replaceChild()

YUI3和KISSY的Node(list) 续含义 YUI3 KISSY 得到裸节点 .set/setAttrs() .attr() 设置(获得)样式 .set(get)Style .css() 得到(设置)innerHTML # .html() 更改class名 .toggleClass() .toggleClass() 获得节点内容文本 # .text() 获得input的value # .val() 获得宽度 # .width() 获得高度 # .height()

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

创建节点，写节点内容 /* YUI */ var node = Y.Node.create('<div></div>') node.set('innerHTML','content'); /* KISSY */ var node = S.Node('<div></div>'); node.html('content');

获得innerHTML和"innerText" /* YUI */ node.get(‘innerHTML’) //获得innerHTML //yui没有提供获得innerText的方法 /* KISSY */ node.html(); //得到innerHTML node.text(); //过滤掉html标签后的内容

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

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

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

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

获得元素的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

获得元素的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

写样式 /* 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' });

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

快捷调用事件 /* 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()

KISSY.Event

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

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

自定义事件-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) });

自定义事件-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); });

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

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

KISSY.JSON

使用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

参与KISSY的开发

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

Thank you~

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

Kissy简介

by jay li on Sep 17, 2010

Accessibility

Tags

Upload Details

Usage Rights

6 Embeds 231

Statistics

Kissy简介 — Presentation Transcript