如何作一個avalon組件

在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, $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這兩大區域，你又不想寫在JS中，能夠直接寫在自定義標籤，那麼可使用HTML5的插入點機制。

<ms:dialog>
<p slot="title">我是標題</p>
<div slot="content">
<iframe>許多內容</iframe>
<form>許多內容</form>
</div>
</ms:dialog>

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

avalon.component("ms:dialog",{
  title:"",//這兩個屬性須要預先聲明，到時會變成文檔碎片
  content: "",
  $ready: function(vm, elem){}
  //.....
})

而後你模板裏面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>
        </div>
    </div>
</div>

有了插入點機 ，咱們爲組件添加大片的內容就很是簡單。而且組件裏面還能夠有其餘表明組件的自定義標籤。這樣一層層累積木，既直觀又輕鬆。因爲它存在嚴密的生命週期管理，咱們也不怕如何計算父組件這樣的難題了。有關組件的寬高計算，而後在$ready回調裏計算，由於這時子組件確定渲染纔會執行上方父組件的$ready!

你們能夠參考這裏的組件源碼進行學習，打造本身一套UI庫。