KISSY Component API Design
-
date post
12-Sep-2014 -
Category
Technology
-
view
655 -
download
2
description
Transcript of KISSY Component API Design
![Page 2: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/2.jpg)
KISSY
• Why create component• Why API design• KISSY Component API Design• API Design principles
Outline
docs.kissyui.com | [email protected]
2
![Page 3: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/3.jpg)
KISSY
Components
docs.kissyui.com | [email protected]
3
http://docs.kissyui.com/kissy-bootstrap/docs/
![Page 6: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/6.jpg)
KISSY
• Ease of development
• Reusability
Why create components
docs.kissyui.com | [email protected]
6
![Page 7: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/7.jpg)
KISSY
• Ease of development
• Reusability
•Maintainability
Why create components
docs.kissyui.com | [email protected]
7
![Page 9: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/9.jpg)
KISSY
• Contract between user and developer
• Stable platform to build on
Why API Design
docs.kissyui.com | [email protected]
9
![Page 10: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/10.jpg)
KISSY
• Contract between user and developer
• Stable platform to build on
• Minimize waste• Code-reuse instead of re-writing• Reduce code and complexity
Why API Design
docs.kissyui.com | [email protected]
10
![Page 11: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/11.jpg)
KISSY
• Structure• Subcomponent• Subclass• Plugin• Events
• Lifecycle event• Skin• Creation
Component API Design
docs.kissyui.com | [email protected]
11
![Page 13: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/13.jpg)
KISSY
• Config
new Overlay({
width:100,
height:100,
content:'i am overlay'
})
Config
docs.kissyui.com | [email protected]
13
![Page 14: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/14.jpg)
KISSY
• Attribute• Talk to your component
var o=new Overlay({});
o.get("content");
o.set("content","xx");
Attribute
docs.kissyui.com | [email protected]
14
![Page 15: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/15.jpg)
KISSY
• Method• Attribute first, method second
var o=new Tree({});
o.collapseAll();
o.set(“collapsed",true);
Method
docs.kissyui.com | [email protected]
15
![Page 16: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/16.jpg)
KISSY
•Config/Attribute• Children
•Method• addChild/removeChild/removeChildren
Subcomponent
docs.kissyui.com | [email protected]
16
![Page 17: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/17.jpg)
KISSY
•Config/Attribute• Children
var o=new Menu({
children:[{new Menu.Item(){}},{xclass:'menuitem‘, content:'menuitem-
content2'}]
});
o.get("children");
Subcomponent
docs.kissyui.com | [email protected]
17
![Page 18: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/18.jpg)
KISSY
•Method• addChild/removeChild/removeChildren
var o=new Menu({});
o.addChild(new Menu.Item());
Subcomponent
docs.kissyui.com | [email protected]
18
![Page 19: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/19.jpg)
KISSY
• Easy to extend
Subclass
docs.kissyui.com | [email protected]
19
var MyOverlay = Overlay.extend({
initialize:function(){},
createDom:function(){},
renderUI:function(){},
syncUI:function(){}
},{
ATTRS:{
myAttr:{}
}
});
![Page 20: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/20.jpg)
KISSY
• enhance ability dynamically at runtime
Plugin
docs.kissyui.com | [email protected]
20
var editor = new Editor({
plugins:[
FontSize,
new Image({
url:’upload.htm’
})]
});
![Page 21: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/21.jpg)
KISSY
• Event• Native lifecycle event / attrChange event / Custom event
• Method: on / detach
• Config : listeners
{
type:,
target:, // consider bubbling
yy:xx
}
Events
docs.kissyui.com | [email protected]
21
![Page 22: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/22.jpg)
KISSY
• Custom Event
var o = new Overlay({
listeners : { hide : { fn : function(){}}}
});
o.on("show",function(){
});
Events
docs.kissyui.com | [email protected]
22
![Page 23: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/23.jpg)
KISSY
• Lifecycle event• beforeCreateDom/afterCreateDom/beforeRenderUI/afterRenderUI
/beforeBindUI/afterBindUI/..
var o=new Overlay();
o.on("afterCreateDom",function(){
alert(o.get("el"));
});
Events
docs.kissyui.com | [email protected]
23
![Page 24: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/24.jpg)
KISSY
• AttrChange event• beforeAttrChange/afterAttrChangeDom
var o=new Button.Toggle();
o.on("afterCheckedChange",function(){
alert(o.get(“checked"));
});
Events
docs.kissyui.com | [email protected]
24
![Page 25: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/25.jpg)
KISSY
• Config• prefixCls
new Button({
prefixCls:"xx-"
});
Skin
docs.kissyui.com | [email protected]
25
![Page 27: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/27.jpg)
KISSY
• new
var m = new Menu();
m.addChild(new Menu.Item());
m.on("click",function(){})
m.render();
Creation
docs.kissyui.com | [email protected]
27
![Page 28: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/28.jpg)
KISSY
• srcNode
Creation
docs.kissyui.com | [email protected]
28
<div class='ks-menu'>
<div class='ks-
menuitem'></div>
</div>
new Menu({
srcNode:div,
listeners:{
click:function(){
}
}
});
![Page 29: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/29.jpg)
KISSY
• xclass
Creation
docs.kissyui.com | [email protected]
29
new Menu({
children:[{
xclass:'menuitem',
content:'yy'
}],
render:container,
listeners:{
click:function(){}
}});
![Page 30: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/30.jpg)
KISSY
• Hide implementation
new Overlay({
// view: new OverlayRender()
});
API Design Principle
docs.kissyui.com | [email protected]
30
![Page 31: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/31.jpg)
KISSY
• Easy to learn• consistency
• simple
• elCls/el/srcNode/get()/set()
API Design Principle
docs.kissyui.com | [email protected]
31
![Page 32: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/32.jpg)
KISSY
• Easy to read and write
new Overlay({
width:,
height:'',
children:[{
xclass:'menu'
}]});
API Design Principle
docs.kissyui.com | [email protected]
32
![Page 33: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/33.jpg)
KISSY
• Easy to extend
var MyOverlay = Overlay.extend(…);
API Design Principle
docs.kissyui.com | [email protected]
33
![Page 34: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/34.jpg)
KISSY
• make api complete• separate concern
• new/addChild/removeChild/destroy/on/detach
API Design Principle
docs.kissyui.com | [email protected]
34
![Page 35: KISSY Component API Design](https://reader034.fdocuments.in/reader034/viewer/2022051322/541306ee8d7f720c4e8b476b/html5/thumbnails/35.jpg)
KISSY
SEE YOU SOON!
THANKS FOR COMING