kissy modularization part1

D226fdd4b353d92a66a1ef71539357f8?s=47 yiminghe
February 21, 2014

kissy modularization part1

part1 of kissy modularization tutorials

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

February 21, 2014
Tweet

Transcript

  1. KISSY Modularization part 1 yiminghe@gmail.com

  2. 理论基础 • 模块是一致紧密相连的程序单元 • 模块提供功能,并描述自身所依赖的模块 • 模块具备高内聚,低耦合的特性 • 方便多人协作

  3. 传统的前端模块化 • page.html • <html> <link ref=‘stylesheet’/> <link ref=‘stylesheet’/> <div></div>

    <div></div> <script></script> <script></script> </html>
  4. 问题 • 线性结构,不符合直观 • css html javascript 互不相关

  5. 线性结构 模块1 模块2 模块3

  6. 理想的模块 • 树状结构,模块可依赖多个其他模块 • 一个模块包括 html css javascript 三部分, 也就是内聚的意思

  7. 树状结构 main 模块1 模块3 模块4 模块2 模块3

  8. • KISSY Modularization

  9. KISSY 模块化方案 • css + js + template = KISSY

    module • package = modules • 示例: https://github.com/yiminghe/kissy- boilerplate • 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

  15. template • xtemplate template module compile

  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

  18. use compiled template

  19. • conditional loader

  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 • Dom • Event • Base •

    xtemplate • Components • … Mini • Dom • Event • Anim • Io • … Gallery • uploader • Kcharts • Slide • Layer-anim • auth • …
  26. • nodejs

  27. nodejs • npm install kissy@1.4.1-5 • 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’)
  29. thanks • 下节 – 模块加载优化