kissy modularization part1

D226fdd4b353d92a66a1ef71539357f8?s=47 yiminghe
February 21, 2014
Technology
1
1.7k

kissy modularization part1

part1 of kissy modularization tutorials

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

February 21, 2014
Tweet

More Decks by yiminghe

See All by yiminghe
D226fdd4b353d92a66a1ef71539357f8?s=48 yiminghe
0
6
D226fdd4b353d92a66a1ef71539357f8?s=48 yiminghe
0
3
D226fdd4b353d92a66a1ef71539357f8?s=48 yiminghe
1
90
D226fdd4b353d92a66a1ef71539357f8?s=48 yiminghe
1
110
D226fdd4b353d92a66a1ef71539357f8?s=48 yiminghe
2
76
D226fdd4b353d92a66a1ef71539357f8?s=48 yiminghe
4
1.5k
D226fdd4b353d92a66a1ef71539357f8?s=48 yiminghe
1
100
D226fdd4b353d92a66a1ef71539357f8?s=48 yiminghe
3
110
D226fdd4b353d92a66a1ef71539357f8?s=48 yiminghe
43
3.7k

Other Decks in Technology

See All in Technology
881b1b57f1cbe3b66b017203f7cb2efb?s=48 nplusone
0
210
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
330
C5e26822fb2aa64410b50eac63ef7d84?s=48 fill9120
1
220
Cb88f765dd38cd942c39aacb5abbea06?s=48 ufoo68
1
230
C786d7772602b488a7972c38c143f61c?s=48 con_mame
3
1.7k
4c179cd6250ba8459f278a1440d7f610?s=48 dach
0
220
2cf373725ded741824c50fd571eda6e1?s=48 udzura
0
1k
A645e7c3a6635ead8fa323c583769591?s=48 hololab
0
220
835671ae91e49b2637313b91dacda1db?s=48 tdys13
2
1.4k
Cd6e67775ba3275c466e9927ede23080?s=48 nk35jk
2
1k
893dd6e1aa73c35621327c385cb27207?s=48 konnnnnok
0
130
46fdd2ebc85d68659b83d5eb5c6a49aa?s=48 keisukeyamashita
2
360

Featured

See All Featured
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
280
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
249
19k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
681
180k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
319
53k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
398
20k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
65
250k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
83
4.5k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
123
21k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
104
10k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
282
18k

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 • 下节 – 模块加载优化