首先定义一个控制器,最初只做了自行绑定事件

今天也分享一下自己用js实现的一个简单mvvm框架,今天也分享一下自己用js实现的一个简单mvvm框架

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

中间控制器默许完毕了extend继承方法,能够继续另二个控制器,必须在init方法中动用。当前您也能够本人行使原型继承的法门去贯彻。

先前都是无名地看园子里的稿子,猥琐的点赞,前日也分享一下温馨用js完成的3个简便mvvm框架。

2.指令

可是有三个提议,正是尽量合并将回调方法的成效域指向控制器,那样开发不至于老是出新作用域的标题。

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

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

init以及created,init是在监听全数属性之后编写翻译dom在此以前,能够在那方式上开始化参数;created是编译dom成分之后。

init以及created,init是在监听全部属性之后编写翻译dom在此之前,能够在那形式上初步化参数;created是编写翻译dom成分之后。

4.方法

7.原理以及代码分析(待续…)

起先皆以前所未闻地看园子里的小说,猥琐的点赞,先天也分享一下投机用js实现的一个简便mvvm框架。

 

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

 

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

绑定指令语法是
bind-{指令}的花样,如今只兑现了val,attr,text,html,template,其实能够观望,前面多少个都只是简短封装了jqeury方法,template是用到了jquery-tmpl插件达成的,假设您须要愈多的指令,你能够团结去扩充,只须求贯彻init开首加载方法(接收当前的observer参数),以及update方法(参数表达:对应的jquery成分,最新的值,当前控制器实例);若是是扩张已有些指令,暗中同意会覆盖原有的。如下:

全方位js代码量唯有300多行,所以达成的相比简单,有诸多地点是未曾考虑到的,还有一对成效是想实现却从未去做的,近来不协理数组变化检测,以及一些更新相关dom。

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

6.扩展

信任我们在做项指标时候自然都会有一套公用的零件,那么能够像下边那样扩大,暗中认可对应的组件挂载到全数的控制器示例上边,就足以之间在相应的主意下直接调用了:
this.http.post();

只是有1个建议,正是尽只怕合并将回调方法的成效域指向控制器,那样开发不至于老是出新效用域的题材。

 

$.controller.addDirective("val", {
  init: function (observer) {
   if (observer.$ele.is('input,select')) {
    //监听onchange事件
    observer.$ele.on('input propertychange', function () {
     var newVal = $(this).val()
     observer.writeValue(newVal)
    })
   }
  },
  update: function ($ele, newVal, controller) {
   $ele.val && $ele.val(newVal)
  }
 })

 6.扩展

先不难介绍下用法:

一切js代码量唯有300多行,所以完毕的比较不难,有很多方面是不曾设想到的,还有一对功用是想达成却绝非去做的,
当前不帮衬数组变化检查和测试,以及部分更新相关dom。

5.钩子

1.监督检查属性以及错综复杂属性

绑定到html成分上的格式:”{属性名,fomat=[控制器方法]}”,属性名援助嵌套属性,例如(a.b);属性名不协理表明式,考虑了觉得不是很有必不可少,完全能够运用复杂属性去替代,当前缺点是事情复杂的话恐怕造成大气错综复杂属性;属性名左侧是可选参数,近期只有format,也正是性质呈现在html上的转换方法。

初期只做了电动绑定事件,后边又参考学习了vue,knouckout以及argular实现方式,以及重组本身做WPF的一对经验,扩充了质量绑定,明日又微微整理了下,完善了一部分功能,把代码提交到了码云:https://gitee.com/zlj\_fy/Simple-MVVM

init: function () {
    this.extend(PageController)
   },
   created: function () {
    //TODO
   },

首先定义三个控制器,可以是json对象,也可一是一个function,然后在顶层的要素定义data-context=“[控制器名称]”就能够将该控制器绑定到该节点底下全部因素。要是成分后代存在嵌套Controller,则其所在的要素以下子成分效能域指向子控制器。

绑定指令语法是
bind-{指令}的款式,近日只兑现了val,attr,text,html,template,其实能够观察,前边六个都只是简单封装了jqeury方法,template是用到了jquery-tmpl插件落实的,假如你必要更多的指令,你能够友善去扩展,只须要贯彻init起首加载方法(接收当前的observer参数),以及update方法(参数表明:对应的jquery成分,最新的值,当前控制器实例);尽管是扩大已有的指令,暗中认可会覆盖原有的。如下:

4.方法

$.controller.extend({
   utils: utils,
   notify: $.notify,
   modal: $.modal,
   http: $.http,
   alert: $.alert
  })
1 <button type="button" class="btn btn-primary" data-page="1" on-click="refesh">查询</button>
<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>

一贯利用this.属性名,就足以平素访问对应data节点下的性格。

装有属性必须定义在data节点下,借使中间的习性定义成function则认为是扑朔迷离属性(例如desc),复杂属性是只读的,重新赋值的话会提醒错误。

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

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

3.事件

3.事件

2.指令

相信我们在做项目标时候肯定都会有一套公用的组件,那么能够像上面那样扩大,暗许对应的机件挂载到具有的控制器示例上面,就足以之间在对应的办法下直接调用了:
this.http.post();

 

率先定义3个控制器,可以是json对象,也可一是多少个function,然后在顶层的因素定义data-context=“[控制器名称]”就足以将该控制器绑定到该节点底下全部因素。假诺成分后代存在嵌套Controller,则其所在的因素以下子成分功效域指向子控制器。

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

绑定事件语法:on-{事件}=“{控制器方法},type=on/one”,控制器方法右侧是可选参数,方今只有绑定类型on/one,私下认可是on;控制器方法接收四个参数,多少个是可在相应事件的因素上安装初始参数,一个是event事件参数;

 

初期只做了电动绑定事件,前面又参考学习了vue,knouckout以及argular达成格局,以及重组自身做WPF的有的经历,扩充了品质绑定,后天又微微整理了下,完善了有的效能,把代码提交到了码云:https://gitee.com/zlj\_fy/Simple-MVVM

澳门永利平台娱乐,先不难介绍下用法:

如上那篇js完成二个不难易行的MVVM框架示例就是小编分享给我们的全体内容了,希望能给我们3个参照,也期待大家多多匡助脚本之家。

 

5.钩子

绑定事件语法:on-{事件}=“{控制器方法},type=on/one”,控制器方法右侧是可选参数,最近只有绑定类型on/one,私下认可是on;控制器方法接收四个参数,2个是可在相应事件的要素上安装起首参数,八个是event事件参数;

中间控制器暗中同意实现了extend继承方法,能够延续另1个控制器,必须在init方法中央银行使。当前您也足以友善行使原型继承的主意去达成。

 

 

 

绑定到html成分上的格式:”{属性名,fomat=[控制器方法]}”,属性名扶助嵌套属性,例如(a.b);属性名不援救表达式,考虑了觉得不是很有必不可少,完全能够应用复杂属性去替代,当前缺点是工作复杂的话大概引致大气繁杂属性;属性名左边是可选参数,最近只有format,也正是性质展现在html上的转换方法。

 

 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>