在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",{ |
aMethod: _interface ,//组件的方法，在开始必须为空方法 |
bMethod: _interface,//组件的方法，在开始必须为空方法 |
onAevent: _interface,//组件的事件回调，在开始必须为空方法，必须以on开头，后面是大写，如onSelect |
onBevent: _interface,//组件的事件回调，在开始必须为空方法， 必须以on开头，后面是大写 |
//vm就是当前组件的vm, el就是此自定义标签 |
$ready: function(vm, el){ |
$dispose:function(vm, el){ |
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的插入点机制。
自定义标签下的子元素如果带有slot属性，它们就转换同名的vm属性，其值是一个文档碎片，包括着刚才的p与div标签
avalon.component("ms:dialog",{ |
title:"",//这两个属性需要预先声明，到时会变成文档碎片 |
$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 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> |
有了插入点机 ，我们为组件添加大片的内容就非常简单。并且组件里面还可以有其他代表组件的自定义标签。这样一层层累积木，既直观又轻松。由于它存在严密的生命周期管理，我们也不怕如何计算父组件这样的难题了。有关组件的宽高计算，然后在$ready回调里计算，因为这时子组件肯定渲染才会执行上方父组件的$ready!
大家可以参考这里的组件源码进行学习，打造自己一套UI库。
时间： 2024-12-05 22:11:27
