Simple kissy1.3
0 likes582 views
Kissy 1.3 引入了多个模块和组件的开发方法，优化链接数与加载效率。文档提供了使用模块和配置的示例以及动态加载的方式。包括支持 ARIA 的功能和生命周期事件的处理，适合高级开发人员。
![模块
// 定义模块
// e:/package/a.js
KISSY.add(function(){
},{
requires:['./b‘,’overlay’,’switchable’]
});
// 使用模块
KISSY.use('package/a')](https://image.slidesharecdn.com/simple-kissy1-3-121012001626-phpapp02/85/Simple-kissy1-3-3-320.jpg)
![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](https://image.slidesharecdn.com/simple-kissy1-3-121012001626-phpapp02/85/Simple-kissy1-3-6-320.jpg)
![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](https://image.slidesharecdn.com/simple-kissy1-3-121012001626-phpapp02/85/Simple-kissy1-3-7-320.jpg)
![使用
•
KISSY.add('test/my',function (S,a,XTemplate){
new XTemplate(a).render({
haha:1
});
},{
requires:['./a','xtemplate/runtime']
});](https://image.slidesharecdn.com/simple-kissy1-3-121012001626-phpapp02/85/Simple-kissy1-3-11-320.jpg)
![plugins
•
var editor = new Editor({
plugins:[
FontSize,
new Image({
url:’upload.htm’
})]
});](https://image.slidesharecdn.com/simple-kissy1-3-121012001626-phpapp02/85/Simple-kissy1-3-17-320.jpg)
![Xclass create
•
new Menu({
children:[{
xclass:'menuitem',
content:'yy'
}],
render:container,
listeners:{
click:function(){}
}});](https://image.slidesharecdn.com/simple-kissy1-3-121012001626-phpapp02/85/Simple-kissy1-3-19-320.jpg)
Simple kissy1.3
- 1. Simple KISSY 1.3 KISSY 1.2 -> KISSY 1.3 承玉 yiminghe@gmail.com
- 2. 开发栈 • 模块 – http://docs.KISSYui.com/docs/html/tutorials/KISSY/index.html • 模板 – http://docs.KISSYui.com/docs/html/tutorials/KISSY/component/xtemp late/index.html • 文档 • 组件 • (预计)使用方
- 3. 模块 // 定义模块 // e:/package/a.js KISSY.add(function(){ },{ requires:['./b‘,’overlay’,’switchable’] }); // 使用模块 KISSY.use('package/a')
- 4. 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
- 5. 1.2 • 链接数 – a-min.js – component.js – overlay.js – switchable.js
- 6. 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
- 7. 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
- 8. • 模板
- 9. xtemplate • http://ued.taobao.com/blog/2012/10/11/KISS Y-dsl-xtemplate/
- 10. 离线编译 • 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 (){ } });
- 11. 使用 • KISSY.add('test/my',function (S,a,XTemplate){ new XTemplate(a).render({ haha:1 }); },{ requires:['./a','xtemplate/runtime'] });
- 12. • 文档
- 14. • 组件
- 16. ARIA • Support ARIA for all components exclude suggest, calendar • Suggest => combobox • Calendar => ?
- 17. plugins • var editor = new Editor({ plugins:[ FontSize, new Image({ url:’upload.htm’ })] });
- 18. Lifecycle Event • beforeCreateDom/afterCreateDom/beforeRen derUI/afterRenderUI/beforeBindUI/afterBindU I/.. var o = new Overlay({ listeners : { xx: function(){} } }); o.on(“xx",function(){ });
- 19. Xclass create • new Menu({ children:[{ xclass:'menuitem', content:'yy' }], render:container, listeners:{ click:function(){} }});
- 20. • 预计使用
- 21. • s.taobao.com • detail.tmall.com • crm.taoba.com • support.taobao.com • www.alibabatech.org • … • non-taobao …