您的位置：首页 > 其它

MVVM（Model-View-ViewModel）框架——avalon。

2015-08-07 19:58 399 查看

MVVM（Model-View-ViewModel）框架——avalon。

avalon是引入分层构架，视图就是视图，数据就是数据，JS里面是操作数据，不会再操作视图，泾渭分明。视图，换言之就是最初做好的那些HTML片段，只需要在里面添加上ms-controller指令（或叫绑定属性），指定其将要作用的ViewModel的ID，然后在它里面添加其他绑定就行了。数据，特指是ViewModel，avalon是通过define方法定义，目的是实现“操作数据即操作DOM”，从此我们再也用不上什么操作DOM的API，javascript代码量立即减少了一半以上，条理更清晰，更易维护。

先看例子，先用起来再说。

index.html

<!DOCTYPE html>
<html lang="en">
<>
    <meta charset="GBK">
    <title></title>
    <script src="js/avalon/avalon.js"></script>
    <script src="js/goods.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div ms-controller="root">
        <ul>
            <li ms-click="openL()">你好</li>
        </ul>
        <ul ms-repeat-user="users">
            <li>{{user[$index]}}</li>
        </ul>

        <button type="button"
                class="ms-tigger"
                ms-repeat-user="users"
                ms-class="ms-active:currentIndex == $index"
                ms-click="changeIndex($index)">{{user}}</button>
        <div class="ms-tabs"
             ms-repeat-user="users"
             ms-if-loop="currentIndex == $index"
                >{{user}}</div>

        <table border="1">
            <tr ms-repeat-el="elements">
                <td ms-repeat-e="el">{{e}} 位于第{{$outer.$index}}行</td>
            </tr>

        </table>

        <dl ms-each-data1="data1" ms-visible="data_display">
            <dt>{{data1.text}}</dt>
            <dd>{{data1.value}}</dd>
        </dl>
    </div>
</body>
</html>

咋一看，TMD那么多属性不知道。ms-controller,ms-click,ms-repeat-user。带着疑惑我们先上一份js大餐。

avalon.ready(function(){

    var vm = avalon.define({
        $id:"root",
        users:["aaa","bbb","ccc"],
        data_display:true,
        openL:function(){
            alert("this is the first avalon programming....");
        },
        elements:[[1,2,3,4],[4,5,6,7],[8,9,10,11]],
        currentIndex:0,
        changeIndex:function(i){
            vm.currentIndex = i
        },
        data1: [
            {text: "title1", value: 111111},
            {text: "title2", value: 222222},
            {text: "title3", value: 333333}
        ]
    })
    avalon.scan(document.body)
})

页面和js结合起来看看，貌似有点看懂了吧。页面上的ms-controller=“root”,avalon.define定义一个ViewModel，我们就需要用到ms-controller这个指令。ms-controller在页面上表现为一个特殊的属性，其属性值为ViewModel的$id，表示将在此元素或其子孙元素上圈定它的作用域范围。ms-onclick为li绑定一个点击事件。其他的ms-xx 自己对着js看看，这里顺便发一一张ms-xx家族图。

当然，这些属性不是普通的属性，在avalon框架的属性，那浏览器如何认识它呢？这就需要avalon的扫描机制了。

avalon.scan(document.body)

avalon全局扫描。这样了就认识了。avalon用起来是不是代码更加清晰，开发人员可以专注于逻辑编写，可以专注于页面编写。view绑定到viewModel，viewModel通过操作model（数据处理）用作用于view。看张图。

总结：

我这等屌丝看到了MVVM框架，还是特别亲切的，因为MVC框架用的真是风生水起啊。

官方avalon优点：

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。

可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航