以前都是默默地看园子里的文章，猥琐的点赞，今天也分享一下自己用js实现的一个简单mvvm框架。
最初只做了自动绑定事件，后面又参考学习了vue，knouckout以及argular实现方式，以及结合自己做WPF的一些经验，增加了属性绑定，今天又稍微整理了下，完善了部分功能，把代码提交到了码云：https://gitee.com/zlj_fy/Simple-MVVM
先简单介绍下用法：
1 <form class="form-horizontal" role="form" data-context="TestController"> 2 ????????<div class="form-group"> 3 ????????????<legend>Form title</legend> 4 ????????</div> 5 ????????<div class="form-group"> 6 ????????????<div class="col-sm-6 col-sm-offset-2"> 7 ????????????????<input type="text" class="form-control" bind-val="age,format=format" style="margin:5px 0" /> 8 ????????????????<input type="text" class="form-control" bind-val="desc" style="margin:5px 0" /> 9 ????????????????<input type="range" min="10" max="300" bind-val="age" ?step="10" class="form-control" style="margin:5px 0" />10 ????????????????<input type="button" class="btn btn-primary" value="更新" style="margin:5px 0" on-click="update" />11 ????????????</div>12 ????????</div>13 ????</form>14 15 ????<script>16 ????????var TestController = {17 ????????????data: {18 ????????????????name: ‘xiaoming‘,19 ????????????????age: 3,20 ????????????????desc: function() {21 return this.name + ‘ likes looking little movie. he should take care of his body‘ 22 ????????????????}23 ????????????},24 ????????????format: function(val) {25 ????????????????return val + ‘岁‘26 ????????????},27 ????????????update: function() {28 ????????????????this.name = ‘this is a test‘29 ????????????????this.age = 1830 ????????????}31 ????????}32 ????????$(‘body‘).controller()33 ????</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元素，最新的值，当前控制器实例）；如果是扩展已有的指令，默认会覆盖原有的。如下：
1 $.controller.addDirective("val", { 2 ????????init: function (observer) { 3 ????????????if (observer.$ele.is(‘input,select‘)) { 4 ????????????????//监听onchange事件 5 ????????????????observer.$ele.on(‘input propertychange‘, function () { 6 ????????????????????var newVal = $(this).val() 7 ????????????????????observer.writeValue(newVal) 8 ????????????????}) 9 ????????????}10 ????????},11 ????????update: function ($ele, newVal, controller) {12 ????????????$ele.val && $ele.val(newVal)13 ????????}14 ????})3.事件
绑定事件语法：on-{事件}=“{控制器方法},type=on/one”，控制器方法右边是可选参数，目前只有绑定类型on/one，默认是on；控制器方法接收两个参数，一个是可在对应事件的元素上设置初始参数，一个是event事件参数；
1 <button type="button" class="btn btn-primary" data-page="1" on-click="refesh">查询</button>
4.方法
直接使用this.属性名，就可以直接访问对应data节点下的属性。
5.钩子
init以及created，init是在监听所有属性之后编译dom之前，可以在这方法上初始化参数；created是编译dom元素之后。
其中控制器默认实现了extend继承方法，可以继承另一个控制器，必须在init方法中使用。当前你也可以自己使用原型继承的方式去实现。
1 ????????????init: function () {2 ????????????????this.extend(PageController)3 ????????????},4 ????????????created: function () {5 ????????????????//TODO6 ????????????},6.扩展
相信大家在做项目的时候肯定都会有一套公用的组件，那么可以像下面那样扩展，默认对应的组件挂载到所有的控制器示例下面，就可以之间在对应的方法下直接调用了： this.http.post()；
不过有一个建议，就是尽量统一将回调方法的作用域指向控制器，这样开发不至于老是出现作用域的问题。
1 $.controller.extend({2 ????????????utils: utils,3 ????????????notify: $.notify,4 ????????????modal: $.modal,5 ????????????http: $.http,6 ????????????alert: $.alert7 ????????}) 7.原理以及代码分析（待续...）
整个js代码量只有300多行，所以实现的比较简单，有很多方面是没有考虑到的，还有一些功能是想实现却没有去做的，
目前不支持数组变化检测，以及局部更新相关dom。
哎，写博客好费时间，先睡了。。。
js实现一个简单的MVVM框架
原文地址：https://www.cnblogs.com/zhonglj/p/8281009.html