kissy 的昨天、今天与明天

Click here to load reader

Post on 20-Jan-2015

1.221 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

KISSY 的昨天、今天与明天

TRANSCRIPT

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. Ajbridgejavascript 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-toolsgallery grid/chart/kscrollcomponent 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 modulecompiler AMD 27. AMD 28. KISSY.addmodule registrationKISSY.add(function(S,DOM){// TODO!},{requires:[dom]}); 29. KISSY.use Use modulesKISSY.use(overlay,switchable,function(S,Overlay,Switchable){ // TODO!}); 30. package 31. KISSY.configPackage configKISSY.config({packages:[{ name:yourpackage path:yourpath}]}); 32. module compiler 33. module compiler Combine modules 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 eventul id=test liS.all(#test li).on(click,fn) li li 42. delegation Native eventul id=testS.one(#test).delegate(click,li,fn) li li li 43. Custom event registrationobj1obj[1..3].on(customEvent,fn)obj2obj3 44. Custom eventBubble and delegation host host.on(customEvent,fn)obj1e.target instanceof Objobj2obj3obj.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. XMLHttpRequestKISSY.io({url : getJson.htm,cache : false,type : get,// postdata : { x: 1},dataType : json, // text?success : function(d){},error : function(_,reason){},complete : function(){}}); 51. JSONPKISSY.io({url : getJsonp.htm,type : get,// postcache : false,data : { x: 1},dataType : jsonp,success : function(d){},error : function(_,reason){},complete : function(){}}); 52. file uploadKISSY.io({url : upload.htm,type : post,dataType : json,form: #formEl,success : function(d){},error : function(_,reason){},complete : function(){}}); 53. form serializationKISSY.io({url : getJson.htm,type : post,data : {x: 1},dataType : json,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. cancellablexhr.abort(); 56. anim 57. memory efficient 1.1.6 1.2 58. Less cpu 59. more support scrollTop/Left 60. more support scrollTop/Left Support queue Stop single animation Stop single queue Stop all queues 61. nodeEasy to use 62. DOMEventAnimNode 63. Easy chained query S.all(.cls).all(a).css(color,red).end().css(color,green); 64. Easy node creationS.all(

kissy

).appendTo(document.body); 65. Easy dom operationnode.appendTo(another);node.css(color,red);node.attr(checked) 66. Easy event registrationnode.on(click,fn);node.delegate(click,a,fn);node.detach(click)node.fire(click) 67. Easy animationnode.animate({left:100px,top:100px});node.stop();node.stop(true);node.isRunning();node.stop(true,true,queueName);node.slideToggle();node.fadeToggle(); 68. base Solid foundation 69. Support validatorMyClass.ATTRS={myAttr:{ validator:function(v){return v>10; }}};myClass.set(myAttr,1) // => false 70. Support bulk setmyClass.set({ attr1 : v1, attr2 : v2, attr3 : v3}); 71. Support sub attributemyClass.set(attr, { child1:1 });myClass.set( attr.child2 , 2);myClass.get(attr) // => { child1:1,child2:2} 72. ua json Cookie 73. Component 74. component 75. dd 76. dd Droppable DraggableDelegate DroppableDelegate Proxy Scroll 77. switchable aria keyboard 78. resizablenew Resizable({ node : #container, handlers: [b,tl], // // minHeight : 50, maxHeight : 100, minWidth : 40, maxWidth : 400}); 79. validation 80. waterfallnew 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}); 81. mvc Scaffold for KISSY app. Model / Collection Base View Router Sync 82. editor is module too!KISSY.use(editor,function(S , Editor){new Editor().use();}); 83. Consistent interface 84. Consistent interface Consistent interface across most components set() / get() new / render() / show() / hide() / destroy() addChild()/removeChild() width/height/prefixCls/render 85. 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 86. overlay closeAction hide / destroynew Overlay.Dialog({closeAction : hide}); 87. overlay aria resize resizable effect none/ fade/ slide 88. Simulated controls Button attributes disabled content Value events click 89. Simulated controls Menu events click MenuItem Attributes selectable checkable value content 90. MenuButton Attributes Menu menuCfg Events Click Method addItem removeItem 91. Tree Events click TreeNode Attributes content selected expanded Methods select() collapse() 92. gallery 93. gallery 94. usageKISSY.config({ packages : [{name : gallery,path : http://a.tbcdn.cn/s/kissy/}] });KISSY.use(gallery/name/version/) 95. grid gallery/grid/1.0/ (lp.taobao.com) 96. chart gallery/chart/1.0 97. uploader gallery/form/1.0 & 98. Starrating gallery/starrating/1.0 () 99. kscroll gallery/kscroll/1.0 100. huabao Gallery/huabao/1.0/ 101. Countdown gallery/countdown/1.0 102. Reflection gallery/reflection/1.0 103. image-tagging gallery/image-tagging/1.0 104. more Selectable Spotlight Pagination Magnifier .. 25 105. Look forward to your participation 106. Sub project 107. Sub project Kissy-tools : Kissy-util : Kissy-dpl : Kissy-ajbridge : as-js Kissy-nodejs : kissy on nodejs 108. Kissy-nodejs nodejs-kissy ui-less unit test 109. nodejs-kissy ui-less unit test npm install KISSY KISSY = require(KISSY); KISSY.config() KISSY.add KISSY.use 110. KISSY 111. Loader Auto combo Load on demand S.use("overlay,calendar,switchable,suggest,gallery/kscroll/1.0/"); 112. Loader Auto combo v1.3 Load on demand v1.3 S.use("overlay,calendar,switchable,suggest,gallery/kscroll/1.0/"); 113. Core Stable 114. Core Stable Bug-free Github issue 115. Core Stable Bug-free api-friendly more sugar ? Promise api v1.3 116. Core Stable Bug-free api-friendly Evolve namespace in event v1.3 pause/resume in anim v1.3 wrap in DOM v1.3 117. Component Consistent interface Suggest => Autocomplete v1.3 Switchable -> Tab v1.3 118. Component Consistent interface Full-featured components Switchable enhancement v1.3 119. Component Consistent interface Full-featured components performance ie 120. Component Consistent interface Full-featured components performance Scalability Easy to customize 121. Component Consistent interface Full-featured components performance Scalability Test case covered more tc 122. Editor Open API Load on demand v1.3 Core functionality covered by test case Plugin gallery 123. KISSY - Gallery Open Promotion Easy to use 124. KISSY Sub Project KISSY Mobile ? Game Engine ? Parser ? Welcome ! 125. Contact kissyteam Docs http://docs.kissyui.com Bug http://github.com/kissyteam/kissy/issues email [email protected] Twitter http://twitter.com/#!/kissyteam Google Group: http://groups.google.com/group/kissy-ui