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控制输入框只能输入数值的小例子
Mar 20 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
javascript iframe跨域详解
Oct 26 Javascript
详解puppeteer使用代理
Dec 27 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
js实现随机点名器精简版
Jun 29 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
详解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字符串截取问题
2006/11/28 PHP
php创建sprite
2014/02/11 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
php的扩展写法总结
2019/05/14 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python实现从订阅源下载图片的方法
2015/03/11 Python
python计算一个序列的平均值的方法
2015/07/11 Python
深入理解Django的自定义过滤器
2017/10/17 Python
python迭代dict的key和value的方法
2018/07/06 Python
pandas计数 value_counts()的使用
2019/06/24 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
基于python3实现倒叙字符串
2020/02/18 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
高中美术教师事迹材料
2014/08/22 职场文书
三问三解心得体会
2014/09/05 职场文书
2014年国庆节寄语
2014/09/19 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
2015年会计年终工作总结
2015/05/26 职场文书