24、新风格
发布在avalon学习教程2014年12月8日view:13077
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

不得不说avalon源码里面充满了各种黑魔法,一是因为追求体积的小型化,二是最大限制兼容更多的浏览器,于是出现各种各样的兼容问题,不这样玩就被他们玩脱。有时候,这些黑魔法外泄出来,也不小心伤害到用户。因此avalon也在不断改善其使用方法,定义方式,让用户更安全更轻松地使用avalon。

本篇介绍的新风格是指我们定义VM的方式。早期是传两个参数,有着强烈的angular气息,但angular是方便其实现DI,抽取依赖搞的,avalon使用Object.defineproPerty收集依赖基本不需要这么笨拙的方式,因此反而伤害了用户。于是avalon1.3.3引入新风格,只需要一个传参,清爽多了。

var vmodel = avalon.define({
   $id: id,
   aa: aaa,
   bb: bbb
})
vmodel.$watch("aa", callback)

这样就可以避开旧风格的三大陷阱

var array = []
var vmodel = avalon.define(id, function(vm){//1你要区分vm与vmodel的区别,vm只能用于定义属性,vmodel只能更新里面的属性或执行它的方法
   vm.aa = 1
   array.push(10) //2这里会执行两次,你会发现array = [10,10]
   avalon.mix(vm, {
     aa: 2,//3这里在IE6-8下会报重复定义错误
     cc: 3
  })
  vm.bb = 3
  vm.$watch("bb", callback)
})

强烈建议大家都尽快升级到最新版,使用新风格定义VM。本系列从一开始也是使用新风格进行教学的!

评论
发表评论
3年前
添加了一枚【评注】:他太太太太太太太太太太
3年前

如果要加载widget,如何使用新风格的模式

4年前

上面的vmodel.$watch(aa, callback)是不是应该写成vmodel.$watch(”aa”, callback) ?

4年前

新风格里的vmodel.watch(aa, callback)应该是$watch吧

4年前

最初提的建议终于被轮到实现了

WRITTEN BY
司徒正美
穿梭于二次元与二进制间的魔法师( ̄(工) ̄) 凸ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้
TA的新浪微博
PUBLISHED IN
avalon学习教程

从零开始学习到掌握当前国内最强大的MVVM框架avalon

我的收藏