原来做过c++,做过.net,完全没接触web,但是现在已经进入互联网时代,还是需要懂一点。
网上搜了搜,发现了avalon。
mvvm模式,因为接触过wpf,还是比较熟悉,又是国产项目,不用看头疼的英文文档,所以决定从它开始学习
从《迷你MVVM框架 avalonjs 入门教程》开始
总的来说,这个文档感觉写的不是面向我这种混事的小白的,理解起来还是需要些时间,所以把理解的过程记下来,算是个批注吧。
其实往往大部分特性可能实际中都用不到或者有基础的实现方式,所以有些东西,我就会挑重点的去试,高级点的可能就忽略了,谁让我懒呢。
先说说mvvm,因为我是个混子,所以对理论其实不太关注,但是还是要懂一点。
mvvm=model-view-viewmodel,貌似是从mvc模式上发展来的,我接触mvvm是从wpf,貌似也是wpf开始提出这个概念的吧,发展历程我并不care。
model呢,中文翻译叫模型?说白了就是数据。
view,视图,简单说就是画面。
Viewmodel,视图模型,用来联系view和model,model变了会影响viewmodel,viewmodel影响view,反之亦然,全是绑定。
三层分离,耦合降低,每一层都可测了,也可以替换了,也可以并行开发,好处是大大的。
回到avalon。
第一,viewmodel的创建方式
用到了avalon,define
var vm = avalon.define({
$id: "box",
w: 100,
h: 100,
click: function() {
vm.w = parseFloat(vm.w) + 10;
vm.h = parseFloat(vm.h) + 10;
}
})
就从代码看,就是在什么地方定义了一个json对象,id是box,w,h两个属性,click是个方法。
顺便来解释下,avalon的viewmodel里,$id是一个viewmodel的唯一标识,除了function就被称为属性。属性的变化会被监控。
但是我不喜欢这个写法,因为vm在外面定义了,结果里面还在用,对于不懂js的我来说,好诡异呀。结果后面发现还有别的写法。
avalon.define("box",function(vm){
vm.w= 100,
vm.h= 100,
vm.click= function() {
vm.w = parseFloat(vm.w) + 10;
vm.h = parseFloat(vm.h) + 10;
}
})
这个就舒服多了。
用这种写法,就可以这样来理解,define就是注册一个viewmodel,把id作为define的第一个参数,然后构造函数是第二个参数。
据说这段注册的代码,应当放在avalon.ready()里,ready完了,再调一下avalon.scan()。有一些解释,但是我没太看,也无所谓,现阶段他说怎么对就怎么用就ok了。
有时候想问题不能钻牛角尖,如果了解的更深入不能带来效率和质量上的显著提高,知其然不知其所以然是很正确的选择。
好了,viewmodel注册完了,该用了。