Enviar pesquisa
Carregar
kissy-past-now-future
•
6 gostaram
•
1,067 visualizações
yiming he
Seguir
Indústria automotiva
Tecnologia
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 127
Baixar agora
Baixar para ler offline
Recomendados
High Performance XQuery Processing in PHP with Zorba by Vikram Vaswani
High Performance XQuery Processing in PHP with Zorba by Vikram Vaswani
vvaswani
Node.js in action
Node.js in action
Simon Su
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
deimos
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwr
deimos
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
Robert Nyman
XQuery Design Patterns
XQuery Design Patterns
William Candillon
CouchDB on Android
CouchDB on Android
Sven Haiges
Testing Web Applications with GEB
Testing Web Applications with GEB
Howard Lewis Ship
Recomendados
High Performance XQuery Processing in PHP with Zorba by Vikram Vaswani
High Performance XQuery Processing in PHP with Zorba by Vikram Vaswani
vvaswani
Node.js in action
Node.js in action
Simon Su
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
deimos
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwr
deimos
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
Robert Nyman
XQuery Design Patterns
XQuery Design Patterns
William Candillon
CouchDB on Android
CouchDB on Android
Sven Haiges
Testing Web Applications with GEB
Testing Web Applications with GEB
Howard Lewis Ship
Introduction to Nodejs
Introduction to Nodejs
Gabriele Lana
Stratalux Cloud Formation and Chef Integration Presentation
Stratalux Cloud Formation and Chef Integration Presentation
Jeremy Przygode
The state of your own hypertext preprocessor
The state of your own hypertext preprocessor
Alessandro Nadalin
Mongoose and MongoDB 101
Mongoose and MongoDB 101
Will Button
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
Alive Kuo
Symfony2 from the Trenches
Symfony2 from the Trenches
Jonathan Wage
Doctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document Mapper
Jonathan Wage
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
Shumpei Shiraishi
From mysql to MongoDB(MongoDB2011北京交流会)
From mysql to MongoDB(MongoDB2011北京交流会)
Night Sailer
Web Components With Rails
Web Components With Rails
Boris Nadion
HTML,CSS Next
HTML,CSS Next
지수 윤
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
Remy Sharp
Web2.0 with jQuery in English
Web2.0 with jQuery in English
Lau Bech Lauritzen
Paris js extensions
Paris js extensions
erwanl
Web::Machine - Simpl{e,y} HTTP
Web::Machine - Simpl{e,y} HTTP
Michael Francis
Forget the Web
Forget the Web
Remy Sharp
2015 02-09 - NoSQL Vorlesung Mosbach
2015 02-09 - NoSQL Vorlesung Mosbach
Johannes Hoppe
ZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODM
Jonathan Wage
History of jQuery
History of jQuery
jeresig
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp
Writing Maintainable JavaScript
Writing Maintainable JavaScript
Andrew Dupont
Burn down the silos! Helping dev and ops gel on high availability websites
Burn down the silos! Helping dev and ops gel on high availability websites
Lindsay Holmwood
Mais conteúdo relacionado
Mais procurados
Introduction to Nodejs
Introduction to Nodejs
Gabriele Lana
Stratalux Cloud Formation and Chef Integration Presentation
Stratalux Cloud Formation and Chef Integration Presentation
Jeremy Przygode
The state of your own hypertext preprocessor
The state of your own hypertext preprocessor
Alessandro Nadalin
Mongoose and MongoDB 101
Mongoose and MongoDB 101
Will Button
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
Alive Kuo
Symfony2 from the Trenches
Symfony2 from the Trenches
Jonathan Wage
Doctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document Mapper
Jonathan Wage
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
Shumpei Shiraishi
From mysql to MongoDB(MongoDB2011北京交流会)
From mysql to MongoDB(MongoDB2011北京交流会)
Night Sailer
Web Components With Rails
Web Components With Rails
Boris Nadion
HTML,CSS Next
HTML,CSS Next
지수 윤
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
Remy Sharp
Web2.0 with jQuery in English
Web2.0 with jQuery in English
Lau Bech Lauritzen
Paris js extensions
Paris js extensions
erwanl
Web::Machine - Simpl{e,y} HTTP
Web::Machine - Simpl{e,y} HTTP
Michael Francis
Forget the Web
Forget the Web
Remy Sharp
2015 02-09 - NoSQL Vorlesung Mosbach
2015 02-09 - NoSQL Vorlesung Mosbach
Johannes Hoppe
ZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODM
Jonathan Wage
History of jQuery
History of jQuery
jeresig
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp
Mais procurados
(20)
Introduction to Nodejs
Introduction to Nodejs
Stratalux Cloud Formation and Chef Integration Presentation
Stratalux Cloud Formation and Chef Integration Presentation
The state of your own hypertext preprocessor
The state of your own hypertext preprocessor
Mongoose and MongoDB 101
Mongoose and MongoDB 101
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
Symfony2 from the Trenches
Symfony2 from the Trenches
Doctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document Mapper
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
From mysql to MongoDB(MongoDB2011北京交流会)
From mysql to MongoDB(MongoDB2011北京交流会)
Web Components With Rails
Web Components With Rails
HTML,CSS Next
HTML,CSS Next
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
Web2.0 with jQuery in English
Web2.0 with jQuery in English
Paris js extensions
Paris js extensions
Web::Machine - Simpl{e,y} HTTP
Web::Machine - Simpl{e,y} HTTP
Forget the Web
Forget the Web
2015 02-09 - NoSQL Vorlesung Mosbach
2015 02-09 - NoSQL Vorlesung Mosbach
ZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODM
History of jQuery
History of jQuery
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Semelhante a kissy-past-now-future
Writing Maintainable JavaScript
Writing Maintainable JavaScript
Andrew Dupont
Burn down the silos! Helping dev and ops gel on high availability websites
Burn down the silos! Helping dev and ops gel on high availability websites
Lindsay Holmwood
Express Presentation
Express Presentation
aaronheckmann
JavaScript JQUERY AJAX
JavaScript JQUERY AJAX
Makarand Bhatambarekar
Writing robust Node.js applications
Writing robust Node.js applications
Tom Croucher
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.js
Jarod Ferguson
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
baygross
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.js
soft-shake.ch
Jquery optimization-tips
Jquery optimization-tips
anubavam-techkt
Javascript first-class citizenery
Javascript first-class citizenery
toddbr
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
The Open Web and what it means
The Open Web and what it means
Robert Nyman
Play vs Rails
Play vs Rails
Daniel Cukier
Hazelcast and MongoDB at Cloud CMS
Hazelcast and MongoDB at Cloud CMS
uzquiano
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Jack Franklin
#NewMeetup Performance
#NewMeetup Performance
Justin Cataldo
Jquery fundamentals
Jquery fundamentals
Salvatore Fazio
Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010
Ismael Celis
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
Robert Nyman
Hujs 总结
Hujs 总结
yiming he
Semelhante a kissy-past-now-future
(20)
Writing Maintainable JavaScript
Writing Maintainable JavaScript
Burn down the silos! Helping dev and ops gel on high availability websites
Burn down the silos! Helping dev and ops gel on high availability websites
Express Presentation
Express Presentation
JavaScript JQUERY AJAX
JavaScript JQUERY AJAX
Writing robust Node.js applications
Writing robust Node.js applications
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.js
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.js
Jquery optimization-tips
Jquery optimization-tips
Javascript first-class citizenery
Javascript first-class citizenery
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
The Open Web and what it means
The Open Web and what it means
Play vs Rails
Play vs Rails
Hazelcast and MongoDB at Cloud CMS
Hazelcast and MongoDB at Cloud CMS
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
#NewMeetup Performance
#NewMeetup Performance
Jquery fundamentals
Jquery fundamentals
Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
Hujs 总结
Hujs 总结
Mais de yiming he
kissy 1.5 progress
kissy 1.5 progress
yiming he
kissy at alibaba
kissy at alibaba
yiming he
kissy modularization part2
kissy modularization part2
yiming he
kissy modularization part1
kissy modularization part1
yiming he
KISSY @ 2013-2
KISSY @ 2013-2
yiming he
KISSY 1.4.0 released
KISSY 1.4.0 released
yiming he
callSuper in kissy
callSuper in kissy
yiming he
KISSY XTemplate
KISSY XTemplate
yiming he
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
yiming he
Kissy component system
Kissy component system
yiming he
KISSY@2013.05
KISSY@2013.05
yiming he
kissy@2013.03
kissy@2013.03
yiming he
kissy@2013
kissy@2013
yiming he
KISSY 1.3-released
KISSY 1.3-released
yiming he
Simple kissy1.3
Simple kissy1.3
yiming he
Kissy in-progress
Kissy in-progress
yiming he
Kissy dpl-practice
Kissy dpl-practice
yiming he
编辑器设计2
编辑器设计2
yiming he
KISSY Editor Design 2
KISSY Editor Design 2
yiming he
KISSY Component API Design
KISSY Component API Design
yiming he
Mais de yiming he
(20)
kissy 1.5 progress
kissy 1.5 progress
kissy at alibaba
kissy at alibaba
kissy modularization part2
kissy modularization part2
kissy modularization part1
kissy modularization part1
KISSY @ 2013-2
KISSY @ 2013-2
KISSY 1.4.0 released
KISSY 1.4.0 released
callSuper in kissy
callSuper in kissy
KISSY XTemplate
KISSY XTemplate
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
Kissy component system
Kissy component system
KISSY@2013.05
KISSY@2013.05
kissy@2013.03
kissy@2013.03
kissy@2013
kissy@2013
KISSY 1.3-released
KISSY 1.3-released
Simple kissy1.3
Simple kissy1.3
Kissy in-progress
Kissy in-progress
Kissy dpl-practice
Kissy dpl-practice
编辑器设计2
编辑器设计2
KISSY Editor Design 2
KISSY Editor Design 2
KISSY Component API Design
KISSY Component API Design
Último
Delhi Call Girls East Of Kailash 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls East Of Kailash 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
shivangimorya083
Lucknow 💋 (Genuine) Escort Service Lucknow | Service-oriented sexy call girls...
Lucknow 💋 (Genuine) Escort Service Lucknow | Service-oriented sexy call girls...
anilsa9823
What Could Cause Your Subaru's Touch Screen To Stop Working
What Could Cause Your Subaru's Touch Screen To Stop Working
Bruce Cox Imports
Call Girls in Malviya Nagar Delhi 💯 Call Us 🔝9205541914 🔝( Delhi) Escorts Ser...
Call Girls in Malviya Nagar Delhi 💯 Call Us 🔝9205541914 🔝( Delhi) Escorts Ser...
Delhi Call girls
Hot And Sexy 🥵 Call Girls Delhi Daryaganj {9711199171} Ira Malik High class G...
Hot And Sexy 🥵 Call Girls Delhi Daryaganj {9711199171} Ira Malik High class G...
shivangimorya083
Russian Call Girls Delhi Indirapuram {9711199171} Aarvi Gupta ✌️Independent ...
Russian Call Girls Delhi Indirapuram {9711199171} Aarvi Gupta ✌️Independent ...
shivangimorya083
Stay Cool and Compliant: Know Your Window Tint Laws Before You Tint
Stay Cool and Compliant: Know Your Window Tint Laws Before You Tint
Bisnar Chase Personal Injury Attorneys
Delhi Call Girls Mayur Vihar 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls Mayur Vihar 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
shivangimorya083
What Causes BMW Chassis Stabilization Malfunction Warning To Appear
What Causes BMW Chassis Stabilization Malfunction Warning To Appear
JCL Automotive
Chapter-1.3-Four-Basic-Computer-periods.pptx
Chapter-1.3-Four-Basic-Computer-periods.pptx
AnjieVillarba1
Bandra Escorts, (*Pooja 09892124323), Bandra Call Girls Services
Bandra Escorts, (*Pooja 09892124323), Bandra Call Girls Services
Pooja Nehwal
Call Girls In Kirti Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SERVICE
Call Girls In Kirti Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SERVICE
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
Call Girls In Kirti Nagar 7042364481 Escort Service 24x7 Delhi
Call Girls In Kirti Nagar 7042364481 Escort Service 24x7 Delhi
Hot Call Girls In Sector 58 (Noida)
audience feedback draft 3.pptxxxxxxxxxxx
audience feedback draft 3.pptxxxxxxxxxxx
MollyBrown86
Innovating Manufacturing with CNC Technology
Innovating Manufacturing with CNC Technology
quickpartslimitlessm
How To Troubleshoot Mercedes Blind Spot Assist Inoperative Error
How To Troubleshoot Mercedes Blind Spot Assist Inoperative Error
Andres Auto Service
How To Fix Mercedes Benz Anti-Theft Protection Activation Issue
How To Fix Mercedes Benz Anti-Theft Protection Activation Issue
Terry Sayther Automotive
83778-77756 ( HER.SELF ) Brings Call Girls In Laxmi Nagar
83778-77756 ( HER.SELF ) Brings Call Girls In Laxmi Nagar
dollysharma2066
Delhi Call Girls Vikaspuri 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls Vikaspuri 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
shivangimorya083
Greenery-Palette Pitch Deck by Slidesgo.pptx
Greenery-Palette Pitch Deck by Slidesgo.pptx
zohiiimughal286
Último
(20)
Delhi Call Girls East Of Kailash 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls East Of Kailash 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Lucknow 💋 (Genuine) Escort Service Lucknow | Service-oriented sexy call girls...
Lucknow 💋 (Genuine) Escort Service Lucknow | Service-oriented sexy call girls...
What Could Cause Your Subaru's Touch Screen To Stop Working
What Could Cause Your Subaru's Touch Screen To Stop Working
Call Girls in Malviya Nagar Delhi 💯 Call Us 🔝9205541914 🔝( Delhi) Escorts Ser...
Call Girls in Malviya Nagar Delhi 💯 Call Us 🔝9205541914 🔝( Delhi) Escorts Ser...
Hot And Sexy 🥵 Call Girls Delhi Daryaganj {9711199171} Ira Malik High class G...
Hot And Sexy 🥵 Call Girls Delhi Daryaganj {9711199171} Ira Malik High class G...
Russian Call Girls Delhi Indirapuram {9711199171} Aarvi Gupta ✌️Independent ...
Russian Call Girls Delhi Indirapuram {9711199171} Aarvi Gupta ✌️Independent ...
Stay Cool and Compliant: Know Your Window Tint Laws Before You Tint
Stay Cool and Compliant: Know Your Window Tint Laws Before You Tint
Delhi Call Girls Mayur Vihar 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls Mayur Vihar 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
What Causes BMW Chassis Stabilization Malfunction Warning To Appear
What Causes BMW Chassis Stabilization Malfunction Warning To Appear
Chapter-1.3-Four-Basic-Computer-periods.pptx
Chapter-1.3-Four-Basic-Computer-periods.pptx
Bandra Escorts, (*Pooja 09892124323), Bandra Call Girls Services
Bandra Escorts, (*Pooja 09892124323), Bandra Call Girls Services
Call Girls In Kirti Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SERVICE
Call Girls In Kirti Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SERVICE
Call Girls In Kirti Nagar 7042364481 Escort Service 24x7 Delhi
Call Girls In Kirti Nagar 7042364481 Escort Service 24x7 Delhi
audience feedback draft 3.pptxxxxxxxxxxx
audience feedback draft 3.pptxxxxxxxxxxx
Innovating Manufacturing with CNC Technology
Innovating Manufacturing with CNC Technology
How To Troubleshoot Mercedes Blind Spot Assist Inoperative Error
How To Troubleshoot Mercedes Blind Spot Assist Inoperative Error
How To Fix Mercedes Benz Anti-Theft Protection Activation Issue
How To Fix Mercedes Benz Anti-Theft Protection Activation Issue
83778-77756 ( HER.SELF ) Brings Call Girls In Laxmi Nagar
83778-77756 ( HER.SELF ) Brings Call Girls In Laxmi Nagar
Delhi Call Girls Vikaspuri 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls Vikaspuri 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Greenery-Palette Pitch Deck by Slidesgo.pptx
Greenery-Palette Pitch Deck by Slidesgo.pptx
kissy-past-now-future
1.
的昨天、今天与明天
承玉 yiminghe@gmail.com 1
2.
定位、目标 立足淘宝业务,服务电子商 务行业,做一个功能全面、灵活 定制、社区活跃的前端框架.
- kissyteam
3.
大纲 • KISSY 的昨天 •
KISSY 今天与明天 – seed – core – component – gallery – sub project
4.
KISSY • 2009.07 –
2009.12 构思期 • 2010.01 – 2010.07 孕育期 • 2010.07 – 2011.01 快速成长期 • 2011.01 – now 稳固发展期
5.
• KISSY 的昨天
6.
2009 构思
7.
2009 • KISSY Editor
1.0 – 依赖 YUI2 Core – KISSY 雏形 • mix • add • app • ready
8.
2010上 孕育 • KISSY
1.0.0 – 1.0.8
9.
2010上 • KISSY 1.0.0
– 1.0.8 – getScript/cookie/dom/event/json/node – css/common/grid/reset.css – datalazyload/suggest/switchable/editor/ swf(flash)
10.
• suggest
11.
• switchable
– tab/carousel/slide
12.
2010 下 快速成长期 全职的
kissyteam + 志愿者 KISSY 1.1.0 – 1.1.7
13.
2010 下 • 核心基本可用
– simple loader => seajs – ajax/anim/dom/event/node/ua/base/cookie – cssreset/grid/common.css • 组件兼容 – switchable/suggest/datalazyload/flash
14.
2010 下 • 更多的组件
15.
2010 下 • Calendar
– 日期选择 – 范围限定 – 事件触发
16.
• Ajbridge:javascript 和
flash 的桥梁 – storage – uploader – communication
17.
• Imagezoom:图片放大镜 –
多种放大形式自由选择
18.
• Overlay:浮层控制 –
align – width/height – drag
19.
New KISSY Editor •
底层稳定 • 插件丰富
20.
• Draggable 节点可拖放 •
Template 模板系统 – logic – 控制结构自定义
21.
• KISSY 今天
v1.2 的变化
22.
概况 sub project
• kissy-nodejs/kissy-tools… gallery • grid/chart/kscroll… component • editor/overlay/switchable… core • dom/event/base… seed • lang/loader
23.
seed
24.
seed
25.
• 语言增强&前提准备 –
mix/merge/clone/extend… – each/map/reduce/bind… – escapeHTML/param/substitute… – ready/globalEval… – config()
26.
• module mechanism
package module compiler AMD
27.
AMD
28.
KISSY.add
module registration KISSY.add(function(S,DOM){ // TODO! },{ requires:[“dom”] });
29.
KISSY.use
Use modules KISSY.use(“overlay,switchable”, function(S,Overlay,Switchable){ // TODO! });
30.
package
31.
KISSY.config
Package config KISSY.config({ packages:[{ name:”yourpackage” path:”yourpath” }] });
32.
module compiler
33.
module compiler
Combine modules <java classname="com.taobao.f2e.Main"> <arg value="-requires"/> <!-- 入口模块 --> <arg value="youpackage/xx"/> <arg value="-baseUrls"/> <arg value="${assets.dir}"/> <arg value="-encodings"/> <arg value="${charset}"/> <arg value="-outputEncoding"/> <arg value="${charset}"/> <arg value="-output"/> <arg value="xx.combo.js"/> <classpath> <pathelement path="${module.compiler}"/> <pathelement path="${java.class.path}"/> </classpath> </java>
34.
core
35.
core
36.
DOM
37.
– query(selector,context):context 限制同selector –
clone:克隆自身以及事件 – inner/outer|Width/Height
38.
Event
39.
Unified registration • 原生节点
– S.one(domNode).on(“click”,fn,context) • 自定义事件 – obj.on(“customEvent”,fn,context)
40.
fire • Native event
– S.one(domNode).fire(“click”) • Custom event – obj.fire(“customEvent”)
41.
bubbling • Native event
ul id=„test‟ li S.all(“#test li”).on(“click”,fn) li li
42.
delegation • Native event
ul id=„test‟ S.one(“#test”).delegate(“click”,”li”,fn) li li li
43.
Custom event • registration
obj1 obj[1..3].on(“customEvent”,fn) obj2 obj3
44.
Custom event Bubble and
delegation host host.on(“customEvent”,fn) obj1 e.target instanceof Obj obj2 obj3 obj.addTarget(host); Obj.publish(“customEvent”,{ bubbles:true });
45.
DOM事件补全 •
submit/change @ie bubble • focusin/out @non-ie • mouseenter/leave @non-ie • hashchange @ie • mousewheel @firefox • valuechange @all
46.
ajax
47.
ajax
48.
IO
49.
io
50.
XMLHttpRequest KISSY.io({
url : ‟getJson.htm‟, cache : false, type : ‟get‟,// „post‟ data : { x: 1}, dataType : ‟json‟, // „text‟? success : function(d){ }, error : function(_,reason){ }, complete : function(){ } });
51.
JSONP KISSY.io({
url : ‟getJsonp.htm‟, type : ‟get‟,// „post‟ cache : false, data : { x: 1}, dataType : ‟jsonp‟, success : function(d){ }, error : function(_,reason){ }, complete : function(){ } });
52.
file upload KISSY.io({
url : ‟upload.htm‟, type : „post‟, <form id=„formEl‟ method=„post‟ data : {x: 1}, enctype=„multipart/form-data‟ > dataType : ‟json‟, <input name=„f‟ type=„file‟ /> form: „#formEl‟, </form> success : function(d){ }, error : function(_,reason){ }, complete : function(){ } });
53.
form serialization KISSY.io({
url : ‟getJson.htm‟, type : „post‟, <form id=„formEl‟ > data : {x: 1}, <input name=„f‟ value=„s‟ /> dataType : ‟json‟, </form> form: „#formEl‟, success : function(d){ }, error : function(_,reason){ }, complete : function(){ } });
54.
xdr • Cross domain
request – Sub domain { xdr : { subDomain : { proxy : ”/proxy.html” } // 默认:/sub_domain_proxy.html }} – Different domain • transparent in client • server apply to CORS
55.
cancellable xhr.abort();
56.
57.
anim
58.
• memory efficient
– 1.1.6 – 1.2
59.
• Less cpu
60.
more • support scrollTop/Left
61.
more • support scrollTop/Left •
Support queue – Stop single animation – Stop single queue – Stop all queues
62.
node Easy to use
63.
DOM Event
Anim Node
64.
• Easy chained
query S.all(“.cls”).all(“a”) .css(“color”,”red”) .end() .css(“color”,”green”);
65.
Easy node creation S.all(“<div
class=„easy‟>kissy</div>”). appendTo(document.body);
66.
Easy dom operation node.appendTo(another); node.css(„color‟,‟red‟); node.attr(“checked”)
67.
Easy event registration node.on(„click‟,fn); node.delegate(„click‟,‟a‟,fn); node.detach(„click‟) node.fire(„click‟)
68.
Easy animation node.animate({left:”100px”,top:”100px”}); node.stop(); node.stop(true); node.isRunning(); node.stop(true,true,queueName); node.slideToggle(); node.fadeToggle();
69.
base • Solid foundation
70.
Support validator MyClass.ATTRS={
myAttr:{ validator:function(v){ return v>10; } } }; myClass.set(“myAttr”,1) // => false
71.
Support bulk set myClass.set({
attr1 : v1, attr2 : v2, attr3 : v3 });
72.
Support sub attribute myClass.set(“attr”,
{ child1:1 }); myClass.set( “attr.child2” , ”2”); myClass.get(“attr”) // => { child1:1,child2:2}
73.
兼容 • ua • json •
Cookie
74.
Component
75.
component
76.
dd
77.
dd • Droppable
– 可放置区域 • DraggableDelegate – 拖委托 • DroppableDelegate – 放委托 • Proxy – 拖代理 • Scroll – 容器自适应滚动
78.
switchable • aria • keyboard
79.
resizable new Resizable({
node : ”#container”, handlers: [“b”,”tl”], // 可拖动位置 // 最大最小宽高 minHeight : 50, maxHeight : 100, minWidth : 40, maxWidth : 400 });
80.
validation • 配置简单 • 丰富的验证规则 •
多重验证,依赖验证 • 自定义验证规则 • 多种信息提示方式
81.
waterfall 与时俱进的新布局 new Waterfall.Loader({
// 容器 container:"#ColumnContainer", // 加载方式 load: function(success, end) { $('#loadingPins').show(); S.ajax({ success: function(d) { // 如果数据错误, 则立即结束 if (d.stat !== 'ok') { alert('load data error!'); // 停止加载 end(); return; } // 拼装每页数据 var items = []; // 继续加载 success (items); }, complete: function() { $('#loadingPins').hide(); } }); }, // 最小列数 minColCount : 2, // 列宽度 colWidth : 228 });
82.
mvc • Scaffold for
KISSY app. – Model / Collection • Base – View – Router – Sync
83.
editor is module
too! KISSY.use(“editor”,function(S , Editor){ new Editor(…).use(…); });
84.
Consistent interface
85.
Consistent interface • Consistent
interface across most components – set() / get() – new / render() / show() / hide() / destroy() – addChild()/removeChild() – width/height/prefixCls/render
86.
Consistent interface • Consistent
interface across most components – set() / get() – new / render() / show() / hide() / destroy() – addChild()/removeChild() – width/height/prefixCls/render • Overlay / Menu / MenuButton / Button / Tree
87.
overlay • closeAction
– hide / destroy new Overlay.Dialog({ closeAction : “hide” });
88.
overlay • aria
– 焦点捕获 • resize – 配合 resizable • effect – none/ fade/ slide
89.
Simulated controls • Button
– attributes • disabled • content • Value – events • click
90.
Simulated controls • Menu
– events • click • MenuItem – Attributes • selectable • checkable • value • content
91.
• MenuButton
– Attributes • Menu • menuCfg – Events • Click – Method • addItem • removeItem
92.
• Tree
– Events • click • TreeNode – Attributes • content • selected • expanded – Methods • select() • collapse()
93.
gallery
94.
gallery
95.
usage KISSY.config({ packages :
[{ name : ‟gallery‟, path : ‟http://a.tbcdn.cn/s/kissy/‟ }] }); KISSY.use(“gallery/name/version/”)
96.
• grid
– gallery/grid/1.0/ – 董晓庆 (lp.taobao.com)
97.
• chart
– gallery/chart/1.0 – 文龙
98.
• uploader
– gallery/form/1.0 – 剑平 & …
99.
• Starrating
– gallery/starrating/1.0 – 盛艳(乔花)
100.
• kscroll
– gallery/kscroll/1.0 – 常胤
101.
• huabao
– Gallery/huabao/1.0/ – 法海
102.
• Countdown
– gallery/countdown/1.0 – 基德
103.
• Reflection
– gallery/reflection/1.0 – 元泉
104.
• image-tagging
– gallery/image-tagging/1.0 – 乔福
105.
• more
– Selectable – Spotlight – Pagination – Magnifier – ….. • 25
106.
Look forward to
your participation
107.
Sub project
108.
Sub project •
Kissy-tools : 工具集合 • Kissy-util : 代码片段 • Kissy-dpl : 设计模式规范库 • Kissy-ajbridge : as-js 桥梁 • Kissy-nodejs : kissy on nodejs
109.
Kissy-nodejs • nodejs-kissy
– ui-less unit test
110.
• nodejs-kissy
– ui-less unit test • npm install KISSY – KISSY = require(“KISSY”); – KISSY.config() – KISSY.add – KISSY.use
111.
KISSY 的明天
112.
• Loader
– Auto combo – Load on demand • S.use("overlay,calendar,switchable, suggest,gallery/kscroll/1.0/");
113.
• Loader
– Auto combo v1.3 – Load on demand v1.3 • S.use("overlay,calendar,switchable, suggest,gallery/kscroll/1.0/");
114.
• Core
– Stable
115.
• Core
– Stable – Bug-free • Github issue
116.
• Core
– Stable – Bug-free – api-friendly • more sugar ? • Promise api v1.3
117.
• Core
– Stable – Bug-free – api-friendly – Evolve • namespace in event v1.3 • pause/resume in anim v1.3 • wrap in DOM v1.3
118.
• Component
– Consistent interface • Suggest => Autocomplete v1.3 • Switchable -> Tab v1.3 •…
119.
• Component
– Consistent interface – Full-featured components • Switchable – enhancement v1.3 •…
120.
• Component
– Consistent interface – Full-featured components – performance • ie
121.
• Component
– Consistent interface – Full-featured components – performance – Scalability • Easy to customize
122.
• Component
– Consistent interface – Full-featured components – performance – Scalability – Test case covered • more tc
123.
• Editor
– Open – API – Load on demand v1.3 – Core functionality covered by test case – Plugin gallery
124.
• KISSY -
Gallery – Open – Promotion – Easy to use
125.
• KISSY Sub
Project – KISSY Mobile ? – Game Engine ? – Parser ? – Welcome !
126.
• Contact kissyteam
– Docs: http://docs.kissyui.com – Bug: http://github.com/kissyteam/kissy/issues – email: kissyteam@gmail.com – Twitter: http://twitter.com/#!/kissyteam – Google Group: http://groups.google.com/group/kissy-ui
Baixar agora