汽配人首頁 > 問答首頁

如何做一個avalon組件

: 問提問者：網友 | 2018-08-10

最佳回答

在avalon1.5中改用更直觀的自定義標簽來聲明組件，廢掉ms-widget，引入更強大的生命周期管理，可以讓組件任意套嵌。組件是由JS，HTML，CSS構成 JS 以AMD形式組織，引入HTML與CSS HTML是組件的模板, 模板里面使用ms-*等指令 JS內部是一個avalon.component方法的調用 avalon.component有兩個參數，第一個是標簽名（務必全部小寫并且中間存在冒號，冒號前面是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){ //在這里移除事件與清空節點內部 el.innerHTML = "" } } }) return avalon }) avalon.component會在該組件$init回調被調用時，在avalon.vmodels上添加該組件的VM，此VM就是$init, $ready, $dispose傳入的第一個參數，它擁有a, b, aMethod, bMethod等你聲明好的屬性與方法。當然，其實還有$construct, $$template, $childReady等回調，還有$replace, $con: 回答者：網友

產品精選

我來回答