|
在avalon1.5中改用更直觀的自定義標(biāo)簽來(lái)聲明組件，廢掉ms-widget，引入更強(qiáng)大的生命周期管理，可以讓組件任意套嵌。
組件是由JS，HTML，CSS構(gòu)成
JS 以AMD形式組織，引入HTML與CSS
HTML是組件的模板, 模板里面使用ms-*等指令
JS內(nèi)部是一個(gè)avalon.component方法的調(diào)用
avalon.component有兩個(gè)參數(shù)，第一個(gè)是標(biāo)簽名（務(wù)必全部小寫并且中間存在冒號(hào)，冒號(hào)前面是ms, oni等表示UI庫(kù)的名字，默認(rèn)ms已經(jīng)生效，否則要用avalon.library來(lái)聲明，冒號(hào)后面是組件的名字）
下面一個(gè)樣板代碼：
define(["avalon","template.html","style.css"], function(avalon, template){ |
var _interface = function(){} |
avalon.component("ms:button",{ |
aMethod: _interface ,//組件的方法，在開始必須為空方法 |
bMethod: _interface,//組件的方法，在開始必須為空方法 |
onAevent: _interface,//組件的事件回調(diào)，在開始必須為空方法，必須以on開頭，后面是大寫，如onSelect |
onBevent: _interface,//組件的事件回調(diào)，在開始必須為空方法， 必須以on開頭，后面是大寫 |
//vm就是當(dāng)前組件的vm, el就是此自定義標(biāo)簽 |
$ready: function(vm, el){ |
$dispose:function(vm, el){ |
//在這里移除事件與清空節(jié)點(diǎn)內(nèi)部 |
avalon.component會(huì)在該組件$init回調(diào)被調(diào)用時(shí)，在avalon.vmodels上添加該組件的VM，此VM就是$init, $ready, $dispose傳入的第一個(gè)參數(shù)，它擁有a, b, aMethod, bMethod等你聲明好的屬性與方法。
當(dāng)然，其實(shí)還有$construct, $$template, $childReady等回調(diào)，還有$replace, $container, $slot等配置項(xiàng)。詳見官網(wǎng)
然后你在頁(yè)面引入avalon，與該組件的JS（當(dāng)然以AMD方式引入），然后頁(yè)面使用<ms:button></ms:button>這組件就會(huì)自動(dòng)實(shí)例化！
至于組件里面有什么東西，就要看你的template有什么東西。
如果你在使用自定義標(biāo)簽時(shí)，<ms:button c="111"></ms:button> ，那么組件的VM就會(huì)多出一個(gè)c屬性，值為111, 因?yàn)闃?biāo)簽內(nèi)，除了id,$id, $slot, data-*屬性， ms-*屬性都會(huì)自動(dòng)復(fù)制到vm上。如果是一個(gè)彈出層，眾所周知，彈出層都有title與content這兩大區(qū)域，你又不想寫在JS中，可以直接寫在自定義標(biāo)簽，那么可以使用HTML5的插入點(diǎn)機(jī)制。
<p slot="title">我是標(biāo)題</p> |
<iframe>許多內(nèi)容</iframe> |
自定義標(biāo)簽下的子元素如果帶有slot屬性，它們就轉(zhuǎn)換同名的vm屬性，其值是一個(gè)文檔碎片，包括著剛才的p與div標(biāo)簽
vm.content = "" //這兩個(gè)屬性需要預(yù)先聲明，到時(shí)會(huì)變成文檔碎片 |
然后你模板里面ms-html綁定，它就會(huì)自動(dòng)填空到里面去。比如我們是這樣定義ms:dialog組件的模板：
<div class="oni-dialog-inner"> |
<div class="oni-dialog-header"> |
<div class="oni-dialog-close" ms-click="_close" ms-if="showClose"> |
<i class="oni-icon oni-icon-times">?</i> |
<div class="oni-dialog-title">{{ title|html }}</div> |
<div class="oni-dialog-content">{{content|html}}</div> |
<div class="oni-dialog-footer oni-helper-clearfix"> |
<div class="oni-dialog-btns"> |
<oni:button data-button-color="success" ms-hover="oni-state-hover" ms-click="_confirm">{{confirmText}}</oni:button> |
<oni:button ms-if="type =='confirm'" ms-click="_cancel">{{cancelText}}</oni:button> |
有了插入點(diǎn)機(jī) ，我們?yōu)榻M件添加大片的內(nèi)容就非常簡(jiǎn)單。并且組件里面還可以有其他代表組件的自定義標(biāo)簽。這樣一層層累積木，既直觀又輕松。由于它存在嚴(yán)密的生命周期管理，我們也不怕如何計(jì)算父組件這樣的難題了。有關(guān)組件的寬高計(jì)算，然后在$ready回調(diào)里計(jì)算，因?yàn)檫@時(shí)子組件肯定渲染才會(huì)執(zhí)行上方父組件的$ready!
大家可以參考這里的組件源碼進(jìn)行學(xué)習(xí)，打造自己一套UI庫(kù)。 如果您覺(jué)得此文有幫助，可以打賞點(diǎn)錢給我支付寶1669866773@qq.com ，或掃描二維碼
|
