kissy modularization part1
0 likes•1,257 views
文档介绍了Kissy模块化的理论基础和应用，包括模块的高内聚和低耦合特性，以及传统前端模块化带来的问题。阐述了Kissy模块化方案的主要API和环境配置，并讨论了如何处理模板编译和模块加载优化。未来的发展方向包括Kissy的生态圈、Node.js支持和简化版API。
kissy modularization part1
- 2. 理论基础 • 模块是一致紧密相连的程序单元 • 模块提供功能，并描述自身所依赖的模块 • 模块具备高内聚，低耦合的特性 • 方便多人协作
- 3. 传统的前端模块化 • page.html • <html> <link ref=‘stylesheet’/> <link ref=‘stylesheet’/> <div></div> <div></div> <script></script> <script></script> </html>
- 4. 问题 • 线性结构，不符合直观 • css html javascript 互不相关
- 6. 理想的模块 • 树状结构，模块可依赖多个其他模块 • 一个模块包括 html css javascript 三部分， 也就是内聚的意思
- 9. KISSY 模块化方案 • css + js + template = KISSY module • package = modules • 示例: https://github.com/yiminghe/kissyboilerplate • http://localhost:8111/
- 10. • API
- 11. 主要 api • KISSY.add(function) – 定义模块 • amd • cmd
- 12. 主要 api • 使用模块 – KISSY.use(modules, function) – KISSY.use(modules, {success, error}) • 环境配置 – KISSY.config()
- 13. 环境配置的一些参数 • KISSY.config – combine 优化相关 – alias 别名机制 – lang 全球化 – packages 包配置 • name 包名 • path 包路径 • charset 文件编码
- 14. • template
- 16. compile • nodejs • kissy-xtemplate -w –p src/ – src 下的 xx-tpl.html => xx-tpl.js (compiled function) – 业务模块 require(‘./xx-tpl’)
- 17. compiled template • xx-tpl.html • kissy-xtemplate –p ./ • xx-tpl.js
- 20. conditional loader • compatible(ie) module
- 21. conditional loader • Touch modules
- 22. • gallery
- 23. • KISSY.use(‘gallery/xx/ver/’) • Just use it!
- 24. Mini? • API 简化版面向于浏览型 web page – http://m.kissyui.com/ – http://g.assets.daily.taobao.net/kissy/m/0. 1.1/mini.js
- 25. 未来的生态圈 loader kissy Mini Gallery • Dom • Dom • uploader • Event • Event • Kcharts • Base • Anim • Slide • xtemplate • Io • Layer-anim • Components • … • auth • … • …
- 26. • nodejs
- 27. nodejs • npm install [email protected] • var S = require(‘kissy’)
- 28. kissy modules on nodejs • asynchronous – S.use(modules, function) • synchronous – Like require on nodejs – S.use(modules, {success:function, sync:true}) • KISSY 1.5 next – require(‘kissy/lib/xtemplate’)