KISSY Modularization
part 1
yiminghe@gmail.com
理论基础
• 模块是一致紧密相连的程序单元
• 模块提供功能,并描述自身所依赖的模块
• 模块具备高内聚,低耦合的特性
• 方便多人协作
传统的前端模块化
• page.html
• <html>
<link ref=‘stylesheet’/>
<link ref=‘stylesheet’/>
<div></div>
<div></div>
<script></script>
...
问题
• 线性结构,不符合直观

• css html javascript 互不相关
线性结构

模块1

模块2

模块3
理想的模块
• 树状结构,模块可依赖多个其他模块

• 一个模块包括 html css javascript 三部分,
也就是内聚的意思
树状结构
main

模块1
模块3

模块2
模块4

模块3
• KISSY Modularization
KISSY 模块化方案
• css + js + template = KISSY module
• package = modules

• 示例: https://github.com/yiminghe/kissyboilerplate
•...
• API
主要 api
• KISSY.add(function)
– 定义模块

• amd

• cmd
主要 api
• 使用模块
– KISSY.use(modules, function)
– KISSY.use(modules, {success, error})

• 环境配置
– KISSY.config()
环境配置的一些参数
• KISSY.config
– combine 优化相关
– alias 别名机制
– lang 全球化
– packages 包配置
• name 包名
• path 包路径
• charset 文件编码
• template
template
• xtemplate

compile
template

module
compile
• nodejs
• kissy-xtemplate -w –p src/
– src 下的 xx-tpl.html => xx-tpl.js (compiled
function)
– 业务模块 require(‘./xx-t...
compiled template
• xx-tpl.html
• kissy-xtemplate –p ./
• xx-tpl.js
use compiled template
• conditional loader
conditional loader
• compatible(ie) module
conditional loader
• Touch modules
• gallery
• KISSY.use(‘gallery/xx/ver/’)
• Just use it!
Mini?
• API 简化版面向于浏览型 web page
– http://m.kissyui.com/

– http://g.assets.daily.taobao.net/kissy/m/0.
1.1/mini.js
未来的生态圈

loader
kissy

Mini

Gallery

• Dom

• Dom

• uploader

• Event

• Event

• Kcharts

• Base

• Anim

• Slide

• xte...
• nodejs
nodejs
• npm install kissy@1.4.1-5

• var S = require(‘kissy’)
kissy modules on nodejs
• asynchronous
– S.use(modules, function)

• synchronous
– Like require on nodejs
– S.use(modules,...
thanks

• 下节
– 模块加载优化
Upcoming SlideShare
Loading in …5
×

kissy modularization part1

1,117 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,117
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

kissy modularization part1

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

×