Download - Simple kissy1.3

Transcript
Page 1: Simple kissy1.3

Simple KISSY 1.3KISSY 1.2 -> KISSY 1.3

承玉

[email protected]

Page 3: Simple kissy1.3

模块

// 定义模块

// e:/package/a.js

KISSY.add(function(){

},{

requires:['./b‘,’overlay’,’switchable’]

});

// 使用模块

KISSY.use('package/a')

Page 4: Simple kissy1.3

1.2

• 开发中自动动态载源码• http://x.com/package/a.js• http://x.com/package/b.js

• 发布后通过工具将模块 a 的依赖都合并压缩到 a-min.js• http://x.com/package/a-min.js

• 通过 url 加 ?ks-debug 在线上开启调试模式,加载源码

• 工具• KISSY Module Compiler• KISSY Pie

Page 5: Simple kissy1.3

1.2

• 链接数

– a-min.js

– component.js

– overlay.js

– switchable.js

Page 6: Simple kissy1.3

1.3 链接数优化

• 做法 1– a.js b.js 不打包

– 配置 KISSY.config(‘combine’, true);

– 通过 KISSY module compiler 生成依赖• a:[b,overlay,switchable]

• 链接– /??a.js,b.js

– /??component.js,overlay.js,switchable.js

Page 7: Simple kissy1.3

1.3 链接数优化

• 做法 2– a.js b.js 打包为 a-min.js

– 配置 KISSY.config(‘combine’, true);

– 通过 KISSY module compiler 生成依赖• a:[ overlay, switchable ]

• 链接– /a-min.js

– /??component.js,overlay.js,switchable.js

Page 8: Simple kissy1.3

• 模板

Page 10: Simple kissy1.3

离线编译

• a-tpl.html:

– this {{xx}} {{#if yy}} {{haha}} {{/if}}

• Kissy-xtemplate –t a-tpl.html –m test/a

• a.js :

KISSY.add(‘test/a’,function (){

return function (){

}

});

Page 11: Simple kissy1.3

使用

KISSY.add('test/my',function (S,a,XTemplate){

new XTemplate(a).render({

haha:1

});

},{

requires:['./a','xtemplate/runtime']

});

Page 12: Simple kissy1.3

• 文档

Page 13: Simple kissy1.3

Core api

• 面向高级开发人员

Page 14: Simple kissy1.3

• 组件

Page 15: Simple kissy1.3

Components

docs.KISSYui.com | [email protected] 15

Page 16: Simple kissy1.3

ARIA

• Support ARIA for all components exclude suggest, calendar

• Suggest => combobox

• Calendar => ?

Page 17: Simple kissy1.3

plugins

var editor = new Editor({

plugins:[

FontSize,

new Image({

url:’upload.htm’

})]

});

Page 18: Simple kissy1.3

Lifecycle Event

• beforeCreateDom/afterCreateDom/beforeRenderUI/afterRenderUI/beforeBindUI/afterBindUI/..

var o = new Overlay({

listeners : { xx: function(){} }

});

o.on(“xx",function(){

});

Page 19: Simple kissy1.3

Xclass create

new Menu({

children:[{

xclass:'menuitem',

content:'yy'

}],

render:container,

listeners:{

click:function(){}

}});

Page 20: Simple kissy1.3

• 预计使用

Page 21: Simple kissy1.3

• s.taobao.com

• detail.tmall.com

• crm.taoba.com

• support.taobao.com

• www.alibabatech.org

• …

• non-taobao …


Top Related