KISSY 类库构想与实践.pdfVIP

面向未来的前端类库开发 — KISSY 类库构想与实践 王保平（玉伯）@ 淘宝 2010/12/18 Topics • KISSY 类库介绍 • 种子 seed • 种子的长大 core • 基亍 mixin 的 UI 组件构建 • 展望 不重复造“相同的”轮子 KISSY on Github 小巧灵活，简洁实用 使用起来让人感觉愉悦 • switchable • calendar components • overlay • … • dom • event core • ajax • ... • kernel seed • web • loader 种子seed web apps components core {dom/event/anim/ajax/…} web.js loader seed kernel {kissy.js, lang.js} kissy.js (function(host, S) { var meta = { mix: function }, seed = (host host[S]) || {}; host[S] = meta.mix(seed,meta,false); })(this, „KISSY‟); • 原子(meta): var meta = { mix : fn } • 宿主(host): (function(host, S) { })(this, „KISSY‟); • 种子(seed): seed = (host host[S]) || {}; meta.mix(seed, meta, false); • 种子具有 mix() 和 host 两方面特性。 • 一个系统诞生自一个种子，host 是种子的 培育土壤，种子通过不断 mix() 而成长， 可生长成任意复杂的系统。 • 传入的种子可以是已存在的复杂系统。 用 j Query 做种子 script src=“jquery.js”/script script window[„KISSY‟] = jQuery; /script script src=“kissy.js”/script script KISSY(„pHello world!/p‟) .appendT