kissy mechanism
Embed Size (px)
DESCRIPTION
KISSY 类库构想与实践TRANSCRIPT
- 1. KISSY @ 2010/12/18
2. Topics KISSY seed core mixin UI 3. 4. KISSY on Github 5. 6. switchable calendarcomponents overlay dom event core ajax ... kernel seed web loader 7. seed 8. web appscomponentscore {dom/event/anim/ajax/}web.js loaderkernelseed{kissy.js, lang.js} 9. kissy.js(function(host, S) {var meta = { mix: function },seed = (host && host[S]) || {};host[S] = meta.mix(seed,meta,false);})(this, KISSY); 10. (meta):var meta = { mix: fn } (host):(function(host, S) { })(this, KISSY); (seed):seed = (host && host[S]) || {};meta.mix(seed, meta, false); 11. mix() host host mix() 12. jQuery 13. 14. seed, seed + mix seed + mix seed + mix + 15. KISSY mix sizzle, json2 seed 16. kernel host BESENShell Photoshop CS5 ES5 17. web.js loaderkernel{kissy.js, lang.js} // 18. loader add, use KISSY.add(modName, {fullpath: path/to/mod.js,requires: [core]});KISSY.use(modName,calendar, callback); 19. S.app KISSY.app(D2);D2.add(, {fullpath: //});D2.use(, function() { });D2.namespace(China); 20. Module Module ModuleModule ModulePageLogicApps KISSY 21. mix KISSY seed + mix + seed kernel + web.js + loader kernel host S.app kissy seed 22. core 23. kissy 24. API 20/80 20% 80% selector #id tag.class dom range 25. core 26. attr 1DOM.getAttribute =function(el, name) {}DOM.setAttribute =function(el, name, value) {} 27. attr 2DOM.attr =function(el, name, value) {if(value === undefined) {return getAttribute(el, name);}setAttribute(el, name, value);} 28. attr 3DOM.META.getAttribute = fnDOM.META.setAttribute = fnDOM.attr = publish(Attribute); 29. attr 4DOM.META = {getAttribute: fn,setAttribute: fn,getStyle: fn,setStyle: fn,};S.publish(DOM.META).to(DOM, config); 30. attr 5S.publish(DOM.META).to(DOM, cfg);S.publish(Event.META).to(Event, cfg);S.publish([DOM, Event]).to(Node, cfg);S.Node(
) .attr(data, Hedger is an JS ninja!); 31. META publish public api 1 2 QWrap publish QWrap retouch 3 META sizzle 32. Base 33. Base 34. META + publish Base 35. mixin UI 36. UIBase Extension constructor / destructor UI renderUI / bindUI / syncUI uiSetAttributefunction Position() {}Position.ATTRS = { x:{}, y:{}, xy:{} }Position.prototype = {__renderUI: fn,__bindUI: fn,__syncUI: fn,_uiSetX: fn,__destructor: fn} 37. C++ 38. mixin + mix 39. 40. Roadmap 41. 42. Its NOT the destination,but just where we BEGIN! 43. Any Questions?kissy: http://kissyteam.github.com/twitter: @lifesingerblog: http://lifesinger.org/gtalk: [email protected]