avalon2最佳实践

4

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!

你可能感兴趣的

阿正 · 2016-09-19

赞!

回复

小紫羽 · 2016-09-19

第9条 ms-if与ms-for不能放在一起,要对数据进行过滤,可以使用filterBy, selectBy等过滤器。
这个ms-if的会继续计算的问题,应该要解决吧,因为ms-if 也不能和ms-click放一起,会过度绑定click事件,

回复

载入中...