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


Posted in Javascript onJanuary 15, 2018

以前都是默默地看园子里的文章,猥琐的点赞,今天也分享一下自己用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元素,最新的值,当前控制器实例);如果是扩展已有的指令,默认会覆盖原有的。如下:

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

3.事件

绑定事件语法:on-{事件}=“{控制器方法},type=on/one”,控制器方法右边是可选参数,目前只有绑定类型on/one,默认是on;控制器方法接收两个参数,一个是可在对应事件的元素上设置初始参数,一个是event事件参数;

<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方法中使用。当前你也可以自己使用原型继承的方式去实现。

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

6.扩展

相信大家在做项目的时候肯定都会有一套公用的组件,那么可以像下面那样扩展,默认对应的组件挂载到所有的控制器示例下面,就可以之间在对应的方法下直接调用了: this.http.post();

不过有一个建议,就是尽量统一将回调方法的作用域指向控制器,这样开发不至于老是出现作用域的问题。

$.controller.extend({
   utils: utils,
   notify: $.notify,
   modal: $.modal,
   http: $.http,
   alert: $.alert
  })

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

整个js代码量只有300多行,所以实现的比较简单,有很多方面是没有考虑到的,还有一些功能是想实现却没有去做的,目前不支持数组变化检测,以及局部更新相关dom。

以上这篇js实现一个简单的MVVM框架示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
详解angularjs 学习之 scope作用域
Jan 15 #Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 #Javascript
关于axios如何全局注册浅析
Jan 14 #Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 #Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 #Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 #Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 #Javascript
You might like
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
js创建对象的方式总结
2015/01/10 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
python之import机制详解
2014/07/03 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python聊天室程序(基础版)
2018/04/01 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
如何通过python画loss曲线的方法
2019/06/26 Python
Python银行系统实战源码
2019/10/25 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
深入了解Python 变量作用域
2020/07/24 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
公司领导推荐信
2013/11/12 职场文书
门卫工作岗位职责
2013/12/17 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
争先创优公开承诺书
2014/08/30 职场文书
贷款承诺书
2015/01/20 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python