avalonjs学习笔记（序+一）

原来做过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注册完了，该用了。