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