如何做一個avalon組件

昵稱10504424 2015-09-11

展開全文

在avalon1.5中改用更直觀的自定義標簽來聲明組件，廢掉ms-widget，引入更強大的生命周期管理，可以讓組件任意套嵌。

組件是由JS，HTML，CSS構成

JS 以AMD形式組織，引入HTML與CSS

HTML是組件的模板, 模板里面使用ms-*等指令

JS內部是一個avalon.component方法的調用

avalon.component有兩個參數(shù)，第一個是標簽名（務必全部小寫并且中間存在冒號，冒號前面是ms, oni等表示UI庫的名字，默認ms已經生效，否則要用avalon.library來聲明，冒號后面是組件的名字）

下面一個樣板代碼：

define(["avalon","template.html","style.css"], function(avalon, template){

var _interface = function(){}

avalon.component("ms:button",{

$template: template,

a: 1,

b: 2,

aMethod: _interface ,//組件的方法，在開始必須為空方法

bMethod: _interface,//組件的方法，在開始必須為空方法

onAevent: _interface,//組件的事件回調，在開始必須為空方法，必須以on開頭，后面是大寫，如onSelect

onBevent: _interface,//組件的事件回調，在開始必須為空方法，必須以on開頭，后面是大寫

$init: function(vm, el){

//vm就是當前組件的vm, el就是此自定義標簽

},

$ready: function(vm, el){

//在這里重寫所有空方法

},

$dispose:function(vm, el){

//在這里移除事件與清空節(jié)點內部

el.innerHTML = ""

}

})

return avalon

})

avalon.component會在該組件$init回調被調用時，在avalon.vmodels上添加該組件的VM，此VM就是$init, $ready, $dispose傳入的第一個參數(shù)，它擁有a, b, aMethod, bMethod等你聲明好的屬性與方法。

當然，其實還有$construct, $$template, $childReady等回調，還有$replace, $container, $slot等配置項。詳見官網

然后你在頁面引入avalon，與該組件的JS（當然以AMD方式引入），然后頁面使用<ms:button></ms:button>這組件就會自動實例化！

至于組件里面有什么東西，就要看你的template有什么東西。

如果你在使用自定義標簽時，<ms:button c="111"></ms:button> ，那么組件的VM就會多出一個c屬性，值為111, 因為標簽內，除了id,$id, $slot, data-*屬性， ms-*屬性都會自動復制到vm上。如果是一個彈出層，眾所周知，彈出層都有title與content這兩大區(qū)域，你又不想寫在JS中，可以直接寫在自定義標簽，那么可以使用HTML5的插入點機制。

<ms:dialog>

<p slot="title">我是標題</p>

<div slot="content">

<iframe>許多內容</iframe>

<form>許多內容</form>

</div>

</ms:dialog>

自定義標簽下的子元素如果帶有slot屬性，它們就轉換同名的vm屬性，其值是一個文檔碎片，包括著剛才的p與div標簽

vm.title = ""

vm.content = "" //這兩個屬性需要預先聲明，到時會變成文檔碎片

然后你模板里面ms-html綁定，它就會自動填空到里面去。比如我們是這樣定義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>

<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>

</div>

有了插入點機，我們?yōu)榻M件添加大片的內容就非常簡單。并且組件里面還可以有其他代表組件的自定義標簽。這樣一層層累積木，既直觀又輕松。由于它存在嚴密的生命周期管理，我們也不怕如何計算父組件這樣的難題了。有關組件的寬高計算，然后在$ready回調里計算，因為這時子組件肯定渲染才會執(zhí)行上方父組件的$ready!

大家可以參考這里的組件源碼進行學習，打造自己一套UI庫。