前端MVVM架构——avalon2初体验-原创手记-慕课网

最近因项目进展需求对现有项目进行重构，由于目前项目还未实现真正意义上的前后端分离（后续会循序重构实现），在时间紧产品循序迭代的情况下，想一次性实现前后端分离精力实在有限（主要是前端开发人力不足）。所有决定先将影响项目开发进度和影响团队开发的一些历史遗留问题进行改造（包括模块发、配置化、前端渲染引擎等问题的改造）。
模块发、配置化的改造此处省略，需要的同学请自行补脑，目前流行的模块化思想的产物有requirejs、seajs(项目中使用)等......
目前比较流行的前端MVVM框架包括Angular、React、Avalon等，由于前两者均已在后续的版本中抛弃了对IE的支持（老的版本对ID的支持也不太友好，这是我直接抛弃前两者的直接原因），avalon是一款基于虚拟DOM与属性劫持的迷你、易用、高性能，拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。avalon体积虽小但五脏俱全，包括虚拟DOM、指令（自定义组件开发和完善的第三方组件库）、双向绑定（相比原先利用ejs渲染爽了很多）、过滤器、验证、服务端渲染等等...
直接上示例：
html:

<!DOCTYPE html>
<html>
  <head>
      <title>first example</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="./dist/avalon.js"></script>
      <script>
          var vm = avalon.define({
              $id: "test",
              name: "mike",
              array: [11,22,33]
          })
          setTimeout(function(){
             vm.array.set(0, 444)
          }, 3000)
      </script>
  </head>

  <body ms-controller="test">
      <input ms-duplex="@name">
      <p>Hello,{{@name}}!</p>
      <ul>
         <li ms-for="($index,el) in @array">{{$index}}--{{el}}</li>
      </ul>
  </body>
</html>

是不是和我们熟悉的Angular等前端MVVM架构很像？直接定义一个avalon作用域（Avalon的作用域也是向上冒泡查找的），通过$id属性进行绑定，html通过“{{@aa}}”或“ms-text”属性直接进行绑定（avalon有个“卖”点就是“改变model及改变View”,其实就是通过虚拟DOM的特性实时监听变化达到局部更新视图的效果，所以我们项目中必不可少的会有很多种状态--这点类似于React里的'状态机'，需要合理去搭配使用。）
例如常见的Tab页切换：
html:

<ul>
          <li ms-click="@checkSearch(1)" ms-attr="[@active==1 ? {'class':'active'} : {'class':'unactive'}]">Tab1</li>
          <li ms-click="@checkSearch(2)" ms-attr="[@active==2 ? {'class':'active'} : {'class':'unactive'}]">Tab2</li>
        </ul>

js：

 var searchNav = avalon.define({
        $id: "searchNavCtrl",
        active: 1,
        checkSearch: function(indx) {
          if (indx == 1) {
            this.active = 1;
          } else {
            this.active = 2;
          }
        }
      });

只要上述几行代码就可以搞定这个功能，比起原先直接操作DOM要方面的许多。

根据上述代码不难发现avalon是已’ms-‘字符开头作为属性名称的，常用的属性如下：
图片描述

当多个属性并行时建议使用已下写法（一些保留字节属性需要加单引号如id,class等，为了统一格式建议全部加上）：

<li ms-attr="[{'pval':pd.proid},{'issingle':pd.isSingle}, {'id': pd.proid}, {'index': pd.position}, pd.position>0 ? {'class':'productmsg childOption'}:{'class': 'productmsg'}]" ms-click="@showHideIncome(pd,$event)" ms-mouseenter="@showChildEnter($event)" ms-mouseleave="@showLeaveEnter($event)" ms-for="($index,pd) in item.data_list">