以前都是默默地看園子里的文章，猥瑣的點贊，今天也分享一下自己用js實現(xiàn)的一個簡單mvvm框架。

最初只做了自動綁定事件，后面又參考學(xué)習(xí)了vue，knouckout以及argular實現(xiàn)方式，以及結(jié)合自己做WPF的一些經(jīng)驗，增加了屬性綁定，今天又稍微整理了下，完善了部分功能，把代碼提交到了碼云：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=“[控制器名稱]”就可以將該控制器綁定到該節(jié)點底下所有元素。如果元素后代存在嵌套Controller，則其所在的元素以下子元素作用域指向子控制器。

1.監(jiān)控屬性以及復(fù)雜屬性

所有屬性必須定義在data節(jié)點下，如果里面的屬性定義成function則認(rèn)為是復(fù)雜屬性（例如desc），復(fù)雜屬性是只讀的，重新賦值的話會提示錯誤。

綁定到html元素上的格式："{屬性名,fomat=[控制器方法]}"，屬性名支持嵌套屬性，例如（a.b）；屬性名不支持表達式，考慮了覺得不是很有必要，完全可以使用復(fù)雜屬性去代替，當(dāng)前缺點是業(yè)務(wù)復(fù)雜的話可能造成大量復(fù)雜屬性；屬性名右邊是可選參數(shù)，目前只有format，也就是屬性顯示在html上的轉(zhuǎn)換方法。

2.指令

綁定指令語法是 bind-{指令}的形式，目前只實現(xiàn)了val，attr，text，html，template，其實可以看出，前面4個都只是簡單封裝了jqeury方法，template是用到了jquery-tmpl插件實現(xiàn)的，如果你需要更多的指令，你可以自己去擴展，只需要實現(xiàn)init初始加載方法（接收當(dāng)前的observer參數(shù)），以及update方法（參數(shù)說明：對應(yīng)的jquery元素，最新的值，當(dāng)前控制器實例）；如果是擴展已有的指令，默認(rèn)會覆蓋原有的。如下：