js实现一个简单的MVVM框架示例

以前都是默默地看园子里的文章，猥琐的点赞，今天也分享一下自己用js实现的一个简单mvvm框架。

最初只做了自动绑定事件，后面又参考学习了vue，knouckout以及argular实现方式，以及结合自己做WPF的一些经验，增加了属性绑定，今天又稍微整理了下，完善了部分功能，把代码提交到了码云：https://gitee.com/zlj_fy/Simple-MVVM

先简单介绍下用法：

<form class="form-horizontal" role="form" data-context="TestController">  <div class="form-group">   <legend>Form title</legend>  </div>  <div class="form-group">   <div class="col-sm-6 col-sm-offset-2">    <input type="text" class="form-control" bind-val="age,format=format" style="margin:5px 0" />    <input type="text" class="form-control" bind-val="desc" style="margin:5px 0" />    <input type="range" min="10" max="300" bind-val="age" step="10" class="form-control" style="margin:5px 0" />    <input type="button" class="btn btn-primary" value="更新" style="margin:5px 0" on-click="update" />   </div>  </div> </form> <script>  var TestController = {   data: {    name: 'xiaoming',    age: 3,    desc: function() {　　　　　　　　　　　　return this.name + ' likes looking little movie. he should take care of his body'     }   },   format: function(val) {    return val + '岁'   },   update: function() {    this.name = 'this is a test'    this.age = 18   }  }  $('body').controller() </script>

首先定义一个控制器，可以是json对象，也可一是一个function，然后在顶层的元素定义data-context=“[控制器名称]”就可以将该控制器绑定到该节点底下所有元素。如果元素后代存在嵌套Controller，则其所在的元素以下子元素作用域指向子控制器。

1.监控属性以及复杂属性

所有属性必须定义在data节点下，如果里面的属性定义成function则认为是复杂属性（例如desc），复杂属性是只读的，重新赋值的话会提示错误。

绑定到html元素上的格式："{属性名,fomat=[控制器方法]}"，属性名支持嵌套属性，例如（a.b）；属性名不支持表达式，考虑了觉得不是很有必要，完全可以使用复杂属性去代替，当前缺点是业务复杂的话可能造成大量复杂属性；属性名右边是可选参数，目前只有format，也就是属性显示在html上的转换方法。

2.指令

绑定指令语法是 bind-{指令}的形式，目前只实现了val，attr，text，html，template，其实可以看出，前面4个都只是简单封装了jqeury方法，template是用到了jquery-tmpl插件实现的，如果你需要更多的指令，你可以自己去扩展，只需要实现init初始加载方法（接收当前的observer参数），以及update方法（参数说明：对应的jquery元素，最新的值，当前控制器实例）；如果是扩展已有的指令，默认会覆盖原有的。如下：