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 相关文章推荐
javascript 常用关键字列表集合
Dec 04 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
详解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/10/09 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Python3中列表list合并的四种方法
2019/04/19 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Python面向对象实现方法总结
2020/08/12 Python
python如何随机生成高强度密码
2020/08/19 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
秘书英文求职信范文
2014/01/31 职场文书
犯错检讨书
2014/02/21 职场文书
个人委托书格式
2014/04/04 职场文书
公司合作意向书范文
2014/07/30 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书