kissy modularization part1
Post on 12-Sep-2014
672 views
Embed Size (px)
DESCRIPTION
TRANSCRIPT
理论基础
• 模块是一致紧密相连的程序单元
• 模块提供功能，并描述自身所依赖的模块
• 模块具备高内聚，低耦合的特性
• 方便多人协作
传统的前端模块化
• page.html
• <html><link ref=‘stylesheet’/><link ref=‘stylesheet’/><div></div><div></div><script></script><script></script>
</html>
问题
• 线性结构，不符合直观
• css html javascript 互不相关
线性结构
模块1 模块2 模块3
理想的模块
• 树状结构，模块可依赖多个其他模块
• 一个模块包括 html css javascript 三部分，也就是内聚的意思
树状结构
main
模块1
模块3 模块4
模块2
模块3
• KISSY Modularization
KISSY 模块化方案
• css + js + template = KISSY module
• package = modules
• 示例: https://github.com/yiminghe/kissy-boilerplate
• http://localhost:8111/
• 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
template module
compile
compile
• nodejs
• kissy-xtemplate -w –p src/
– src 下的 xx-tpl.html => xx-tpl.js (compiled function)
– 业务模块 require(‘./xx-tpl’)
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
• Dom
• Event
• Base
• xtemplate
• Components
• …
Mini
• Dom
• Event
• Anim
• Io
• …
Gallery
• uploader
• Kcharts
• Slide
• Layer-anim
• auth
• …
• nodejs
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’)
thanks
• 下节– 模块加载优化