如何做一个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){
          //在这里重写所有空方法