Ruby's Louvre

每天学习一点点算法

导航

如何做一个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库。

posted on 2015-09-10 23:41  司徒正美  阅读(6565)  评论(6编辑  收藏  举报