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