|
近日，看了玉伯寫的《構(gòu)建前端UI組件的新思路》一文，讓我追憶起去年自己分享的一篇P文《隨感協(xié)同開發(fā)的JS設(shè)計(jì)模式》 ，有幾分共鳴……
話說去年支付寶新版收銀臺(tái)項(xiàng)目中，我就小試了一把這種組件編碼模式，點(diǎn)滴心得，這里和大家做一個(gè)交流：
回顧一下之前說到的抽象類，對設(shè)計(jì)模式有所了解的同學(xué)可能會(huì)覺得有些眼熟，沒錯(cuò)，初一看，覺得它很像一個(gè)抽象工廠，但是結(jié)合下面的基礎(chǔ)類來看，你會(huì)發(fā)覺我并沒有在各基礎(chǔ)類中，重寫getVessel,show,hide等方法，而是直接繼承了抽象類中的這些方法。一定會(huì)有人不解為什么要這么做，無他，就因?yàn)樗荍S,而非JAVA。一定的偶合度換來足夠的靈活在我看來一點(diǎn)都不過分，更何況這個(gè)抽象類是必須確保絕對穩(wěn)定的，他在成形后不允許被隨意修改那是必須的。
AP.widget.basic = new AP.Class({
setOptions:function(options){
//接口設(shè)置
},
initialize:function(targets,options){
//初始化方法，目的是建立targets子集元素和某方法的關(guān)聯(lián)
},
getVessel:function(target){
//獲取滿足target映射關(guān)系的容器
},
bindEvents:function(target,vessel){
//這里綁定target的觸發(fā)動(dòng)作
},
action:function(){
//target綁定的事件觸發(fā)的執(zhí)行函數(shù)，包含你要執(zhí)行的邏輯
},
show:function(){
//顯示容器
},
hide:function(){
//隱藏容器
},
setInterface:function(){
//設(shè)置各組件共用接口
}
})
通過這個(gè)抽象類，我把一個(gè)觸點(diǎn)對象和一容器對象做了關(guān)聯(lián)，通過action方法去實(shí)現(xiàn)他們之間最簡單的交互行為。“最簡單”，那么無非就是顯示或者隱藏之類的操作了，所以我又定義了show,hide方法。很明顯“最簡單”的交互行為沒辦法滿足100%的用戶行為，所以我必須設(shè)置一個(gè)setInterface方法，在需要特殊交互效果的類中去添加效果類。最后避免大家使用時(shí)直接實(shí)例化這個(gè)抽象類，在action方法中提醒大家，如要實(shí)例化操作，請到特定的繼承類中去重寫action方法。
通過這個(gè)抽象類，我們可以繼承出最基礎(chǔ)的aPop,dropDown,xbox,xTab等組件…這些上篇p文中已經(jīng)有提到，這里不多說，著重解釋一下在這寫基礎(chǔ)類滿足不了特殊需求時(shí)，我們該如何快速的進(jìn)行個(gè)性化組件開發(fā)。
下面以xTab為例，我們可以用這個(gè)組件完成基礎(chǔ)的多觸點(diǎn)多容器之間的切換效果，但是如果在這基礎(chǔ)上需要再加一些動(dòng)畫效果又該怎么辦呢？先看看繼承類tab的實(shí)現(xiàn)代碼：
AP.widget.xTab = AP.widget.basic.extend({
bindEvents:function(target,vessel){
E.on(target,this.options.eventType,this.action,target,this);
E.on(window,'load',this.oXtab,target,this);
},
action:function(e,target){
this.switchTab(e,target);
},
switchTab:function(e,target){
...
for(i=0,len=tabs.length;i<len;i++){
var hash = tabs[i].href.split("#")[1];
var vessel = D.get(hash + 'Extend');
if(vessel){
this.hide(vessel);
}
D.removeClass(tabs[i].parentNode,'current');
if(target.href == tabs[i].href){
D.addClass(target.parentNode,'current');
if(vessel){
this.show(vessel);
}
//設(shè)置各類應(yīng)用接口
this.setInterface(target,vessel);
}
E.preventDefault(e);
}
},
showTab: function(index){
...
},
//初始化定位tab
oXtab:function(target,e){
...
}
});
可以發(fā)現(xiàn)我在show方法之后執(zhí)行了setInterface方法，這里默認(rèn)會(huì)調(diào)用抽象類中的同名方法，這個(gè)接口方法是為同類交互行添加附加的交互效果類而設(shè)的。打個(gè)比方：現(xiàn)在要處理一個(gè)slideTab的效果，那么我們只需要基于xTab做一個(gè)應(yīng)用類的繼承，覆蓋setInterface方法，添加一個(gè)實(shí)現(xiàn)slide效果的動(dòng)畫類就ok了！
AP.widget.animTab = AP.widget.xTab.extend({
setInterface:function(target,vessel){
this.parent(target,vessel);
this.anim(vessel);
},
anim:function(vessel){
...
}
});
說實(shí)在的，這是挺土的一種設(shè)計(jì)思路，不過可以讓我們換一種角度去思考組件的編碼模式，以上只是粗淺的一些應(yīng)用嘗試，精彩還會(huì)繼續(xù)…waiting for you!
轉(zhuǎn)載：http://ued.alipay.com/2010/06/proposed-front-end-ui-components-and-then-build-a-new-train-of-thought/
本文鏈接：http://www.95time.cn/tech/web/2010/7745.asp 
出處：前端技術(shù)
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
