一切js代码量只有300多行,所以实现的相比简单,有许多方面是一贯不设想到的,还有一部分功用是想实现却尚无去做的,
眼下不协理数组变化检测,以及部分更新相关dom。

嘿,写博客好费时间,先睡了。。。

4.方法

不过有一个指出,就是尽可能合并将回调方法的效能域指向控制器,这样开发不至于老是出现功效域的问题。

直接利用this.属性名,就足以一直访问对应data节点下的性质。

 

 6.扩展

初始都是前所未闻地看园子里的稿子,猥琐的点赞,前天也享受一下和谐用js实现的一个粗略mvvm框架。

 

1.监察属性以及错综复杂属性

深信不疑咱们在做项目标时候肯定都会有一套公用的零部件,那么可以像上边这样扩充,默认对应的机件挂载到具有的控制器示例下面,就足以之间在相应的不二法门下直接调用了:
this.http.post();

第一定义一个控制器,可以是json对象,也可一是一个function,然后在顶层的因素定义data-context=“[控制器名称]”就足以将该控制器绑定到该节点底下所有因素。倘使元素后代存在嵌套Controller,则其所在的因素以下子元素功效域指向子控制器。

享有属性必须定义在data节点下,如若中间的性能定义成function则以为是繁体属性(例如desc),复杂属性是只读的,重新赋值的话会提醒错误。

 

3.事件

 

 

1 $.controller.extend({
2             utils: utils,
3             notify: $.notify,
4             modal: $.modal,
5             http: $.http,
6             alert: $.alert
7         }) 

先简单介绍下用法:

 

5.钩子

 

绑定指令语法是
bind-{指令}的款式,目前只兑现了val,attr,text,html,template,其实能够见到,后面4个都只是简单封装了jqeury方法,template是用到了jquery-tmpl插件落实的,假使你需要更多的通令,你能够自己去扩张,只需要实现init起头加载方法(接收当前的observer参数),以及update方法(参数表明:对应的jquery元素,最新的值,当前控制器实例);假诺是扩张已有些指令,默认会覆盖原有的。如下:

 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 = 18
30             }
31         }
32         $('body').controller()
33     </script>

初期只做了全自动绑定事件,前边又参考学习了vue,knouckout以及argular实现情势,以及重组自己做WPF的有的经历,增添了性能绑定,今日又微微整理了下,完善了有些效率,把代码提交到了码云:https://gitee.com/zlj\_fy/Simple-MVVM

1 <button type="button" class="btn btn-primary" data-page="1" on-click="refesh">查询</button>

 

 

 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     })

 

7.法则以及代码分析(待续…)

1             init: function () {
2                 this.extend(PageController)
3             },
4             created: function () {
5                 //TODO
6             },

init以及created,init是在监听所有属性之后编译dom在此以前,可以在这模式上初叶化参数;created是编译dom元素之后。

绑定到html元素上的格式:”{属性名,fomat=[控制器方法]}”,属性名扶助嵌套属性,例如(a.b);属性名不协助表明式,考虑了觉得不是很有必不可少,完全可以动用复杂属性去替代,当前缺点是事情复杂的话也许造成大气复杂属性;属性名右侧是可选参数,最近只有format,也就是性质显示在html上的转换方法。

其中控制器默认实现了extend继承方法,可以延续另一个控制器,必须在init方法中拔取。当前您也得以协调使用原型继承的办法去落实。

绑定事件语法:on-{事件}=“{控制器方法},type=on/one”,控制器方法左边是可选参数,目前只有绑定类型on/one,默认是on;控制器方法接收多少个参数,一个是可在对应事件的因素上安装初叶参数,一个是event事件参数;

2.指令

相关文章

网站地图xml地图