汽配人首頁 > 問答首頁

如何做一個(gè)avalon組件

: 問提問者：網(wǎng)友 | 2018-08-10

最佳回答

在avalon1.5中改用更直觀的自定義標(biāo)簽來聲明組件，廢掉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庫的名字，默認(rèn)ms已經(jīng)生效，否則要用avalon.library來聲明，冒號(hào)后面是組件的名字）下面一個(gè)樣板代碼： 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,//組件的事件回調(diào)，在開始必須為空方法，必須以on開頭，后面是大寫，如onSelect onBevent: _interface,//組件的事件回調(diào)，在開始必須為空方法，必須以on開頭，后面是大寫 $init: function(vm, el){ //vm就是當(dāng)前組件的vm, el就是此自定義標(biāo)簽 }, $ready: function(vm, el){ //在這里重寫所有空方法 }, $dispose:function(vm, el){ //在這里移除事件與清空節(jié)點(diǎn)內(nèi)部 el.innerHTML = "" } } }) return avalon }) 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, $con: 回答者：網(wǎng)友

產(chǎn)品精選

我來回答