avalon2最佳实践

avalon2出来快3个月了，是时候总结一下其最佳实践。

1 使用冒号形式的短指令代替ms-*指令。比如说ms-click, ms-attr可以简写成:click, :attr。

2 不要多次扫描页面。avalon默认会扫描一次页面的。

3 不要动态添加新页面。比如你用想用$(id).append(newHTML)在某元素底下加一些东西，这个不起作用，又会逼使你再次用avalon.scan。这就违背第二条规则了。最好使用ms-html代替。

<div  ms-controller="test" ms-html="@html"></div>

var vm = avalon.define({
      $id: "test2",
      age: 23,
      html: '<p>{{@sex}}</p>',
      card: "aaaa"
 })

https://segmentfault.com/q/10...

4 ms-class与ms-hover最好不要放在同一个元素上。就算放在一起，那么也要不要指向相同的表达式。即ms-class="@aaa" ms-hover="@aaa"， 因为当你移离此元素时，就会类名删掉了。 ms-class, ms-hover, ms-active对应的表达式 最好是返回一个字符串。 虽然框架内部同时支持 对象， 数组， 字符串三种形态。但类名就是一个字符串，不是字符串，框架还得帮你转换为字符串。

5 ms-attr, ms-style的表达式最好返回一个对象，虽然框架同时支持数组与对象两种形态，但建议是一个对象。 如ms-attr="{title:xxx}"或ms-attr="@obj"

6 ms-important必须放在ms-controller的作用域底下。

7 ms-widget（组件）所在元素不能放其他指令，至少也不能是ms-controller, ms-important, ms-html, ms-text, ms-duplex。框架会让这些指令无效化。

8 ms-text, ms-html不能放在一起，这会让框架产生混乱。这时框架会只保留ms-text指令。

9 ms-if与ms-for不能放在一起，要对数据进行过滤，可以使用filterBy, selectBy等过滤器。

10 ms-widget最好指定id属性，如果是循环中，使用$index等构成UUID。

11 从2.1.10起，avalon的普通VM支持onReady事件，允许你插入页面时做一些事情，从2.1.15起，avalon的普通VM支持onDispose事件，这时你可以删掉你的VM

var vm = avalon.define({
  $id: 'aaa'
})
vm.$watch("onReady", function(e){
   console.log(e.target)
})
vm.$watch("onDispose", function(){
   var id = vm.$id
   //清理内存
   delete avalon.vmodels[id]
   if(avalon.scopes && avalon.scopes[id]){
      delete avalon.scopes[id]
   }
})

12 从2.1.15起，avalon支持直接在xmp, wbr, template元素上通过is属性申明组件的类型，即即<xmp :widget="{is:'ms-button'}"></xmp> --> <xmp is="ms-button"></xmp>

13 组件容器上只允许出现当前VM的属性，组件的模板则只允许出现 defaults中的属性。

14 avalon2建议使用webpack进行打包， avalon的表单验证指令要求依赖Promise，在IE6－11下建议 引入bluebird!