KISSY Component API Design
Sep 12, 2014
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
KISSY
• Why create component• Why API design• KISSY Component API Design• API Design principles
Outline
docs.kissyui.com | [email protected]
2
KISSY
Components
docs.kissyui.com | [email protected]
3
http://docs.kissyui.com/kissy-bootstrap/docs/
KISSY
• Ease of development
• Reusability
Why create components
docs.kissyui.com | [email protected]
6
KISSY
• Ease of development
• Reusability
•Maintainability
Why create components
docs.kissyui.com | [email protected]
7
KISSY
• Contract between user and developer
• Stable platform to build on
Why API Design
docs.kissyui.com | [email protected]
9
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
KISSY
• Structure• Subcomponent• Subclass• Plugin• Events
• Lifecycle event• Skin• Creation
Component API Design
docs.kissyui.com | [email protected]
11
KISSY
• Config
new Overlay({
width:100,
height:100,
content:'i am overlay'
})
Config
docs.kissyui.com | [email protected]
13
KISSY
• Attribute• Talk to your component
var o=new Overlay({});
o.get("content");
o.set("content","xx");
Attribute
docs.kissyui.com | [email protected]
14
KISSY
• Method• Attribute first, method second
var o=new Tree({});
o.collapseAll();
o.set(“collapsed",true);
Method
docs.kissyui.com | [email protected]
15
KISSY
•Config/Attribute• Children
•Method• addChild/removeChild/removeChildren
Subcomponent
docs.kissyui.com | [email protected]
16
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
KISSY
•Method• addChild/removeChild/removeChildren
var o=new Menu({});
o.addChild(new Menu.Item());
Subcomponent
docs.kissyui.com | [email protected]
18
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:{}
}
});
KISSY
• enhance ability dynamically at runtime
Plugin
docs.kissyui.com | [email protected]
20
var editor = new Editor({
plugins:[
FontSize,
new Image({
url:’upload.htm’
})]
});
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
KISSY
• Custom Event
var o = new Overlay({
listeners : { hide : { fn : function(){}}}
});
o.on("show",function(){
});
Events
docs.kissyui.com | [email protected]
22
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
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
KISSY
• Config• prefixCls
new Button({
prefixCls:"xx-"
});
Skin
docs.kissyui.com | [email protected]
25
KISSY
• new
var m = new Menu();
m.addChild(new Menu.Item());
m.on("click",function(){})
m.render();
Creation
docs.kissyui.com | [email protected]
27
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(){
}
}
});
KISSY
• xclass
Creation
docs.kissyui.com | [email protected]
29
new Menu({
children:[{
xclass:'menuitem',
content:'yy'
}],
render:container,
listeners:{
click:function(){}
}});
KISSY
• Hide implementation
new Overlay({
// view: new OverlayRender()
});
API Design Principle
docs.kissyui.com | [email protected]
30
KISSY
• Easy to learn• consistency
• simple
• elCls/el/srcNode/get()/set()
API Design Principle
docs.kissyui.com | [email protected]
31
KISSY
• Easy to read and write
new Overlay({
width:,
height:'',
children:[{
xclass:'menu'
}]});
API Design Principle
docs.kissyui.com | [email protected]
32
KISSY
• Easy to extend
var MyOverlay = Overlay.extend(…);
API Design Principle
docs.kissyui.com | [email protected]
33
KISSY
• make api complete• separate concern
• new/addChild/removeChild/destroy/on/detach
API Design Principle
docs.kissyui.com | [email protected]
34
KISSY
SEE YOU SOON!
THANKS FOR COMING
Related Documents
