js实现视图和数据双向绑定的方法分析


Posted in Javascript onFebruary 05, 2020

本文实例讲述了js实现视图和数据双向绑定的方法。分享给大家供大家参考,具体如下:

前言

视图和数据绑定,使视图和逻辑层分离,使视图层变为数据驱动是前端的一大进步。由此诞生了mvvm类的前端框架,大大提升了开发的效率。

那么在使用旧有的项目中,如何使用更加先进的设计模式来替换掉大量的面向过程编程。

各大框架对于数据绑定的实现都有各自的方式,这里不做深入只是简单介绍一下。

Vue使用了es5  Object.defineProperty的特性来实现对数据读取和设置的监听,是一种元编程的方式。个人感觉,比之angularJS的脏检查数据比对更新机制确实要科学一点。

Object.defineProperty实现了对数据get和set的重新编程,能让我们在做最简单的 = 赋值操作时来做一些事,具体的实现就不放在这了。这不是今天要讨论的重点。

在低版本浏览器中显然对于这点的支持也不够友好,那么我可以想一种替代性的方案来达到和Object.defineProperty所类似的效果。在微信小程序中设置数据需要使用set方法,因为小程序的视图层本质上是分离于js引擎的。这样等于手动告诉视图层某个数据更新了。那么我也可以使用这种方法来实现对数据更新的监听。

实现

首先我们需要一个对象来保存数据。并且在其数据变更时做一些事情。可以定义一个构造函数来获得这个对象。

因为get和set方法很显然是公共的,所以可以定义在原型对象上。

var $vm = function(obj) {
  this.data = obj.data
}
$vm.prototype.get = function(prop) {
  //返回当前值
  return this.data[prop]
}
$vm.prototype.set = function (prop, val) {
  //赋值操作
  this.data[prop] = val
}

如果这时候实例化一个这个构造函数的对象,这个对象上就会存在get和set方法,看代码可以知道他对这个对象上的data生效。

这样一个简单的get set方法就设置好了。一个是获取当前对象属性的值,一个是对其设置新的值。

如果在设置的时候我们再去触发相应的视图层的操作,那么一个简单的绑定就实现了。

var vm = new $vm({
  // 绑定的变量值
  data: {
    info: true
  }
})

取值

vm.get('info')

存值

vm.set('info', false)

如果我们在set方法里添加console.log()那么每次数据变动都会被打印出来。

使用set方法来替代=号的赋值操作可以一定意义上代替Object.defineProperty的效果。并且兼容性更好。

对视图数据进行绑定是一个很大的问题,怎样使数据的变动在视图上体现。

这里一个最简单的替代实现就是去手动绑定数据和视图。用jq的方式。

比如在set里面执行对应这个属性变动的回掉函数。

例如

$vm.prototype.set = function (prop, val) {
  this.data[prop] = val
  if (this.$$fn[prop]) {
    this.$$fn[prop](val, oldVal)
  }
}

可以看到如果当前对象上$$fn属性上如果存在同名的函数,会执行。

这样我们可以把绑定dom的操作来放到里面显示。

这种写法显然可能不太利于维护,于是我想可以参照vue框架的watch观察者来实现。

在vue中观察对象上某个值的改变可以do someThing。

所以在此可以借鉴。

// 存值
$vm.prototype.set = function (prop, val) {
    var oldVal = this.data[prop]
    this.data[prop] = val
 
    //如果发现被列入观察者 执行函数并注入修改后的值
    if (this.watch[prop]) {
      this.watch[prop](val, oldVal)
    }
}

鸽了,这里省略3000字。哈哈哈哈,因为写了好多代码但是没写博客,懒得写了直接跳过吧,有兴趣的童鞋直接看源码。虚拟dom和{{}}表达式,观察者模式,计算属性等等。

突发奇想,想要对数据层绑定还有个简单的方案。利用html data的自定义属性来绑定相应的属性,利用jq选择器来找到对应的节点进行更新。这也是一种替代的方案。

js实现视图和数据双向绑定的方法分析

JQ选择器,选择属性=某值的dom节点。利用这个选择器可以来获得所有绑定了某属性的节点。

<div data-vm="info">
</div>
$('[data-vm="info"]').text(300)

这个节点的值变为了300。

所以利用自定义属性和jq的选择器,只要在dom节点上写上data-vm(取的名字)然后等于要绑定的值,那么就可以实现对视图的绑定了。

// 存值
$vm.prototype.set = function (prop, val) {
  try {
    var oldVal = this.data[prop]
    this.data[prop] = val
    //如果发现被列入观察者 执行函数并注入修改后的值
    if (this.watch[prop]) {
      this.watch[prop](val, oldVal)
    }
    //查询是否有订阅值
    if (this.$$fn[prop]) {
      this.$$fn[prop](val, oldVal)
    }
    //查询是否有依赖于此项的计算属性
    if (this.$$count[prop]) {
      // 获得所有依赖此值的计算属性
      var arr = this.$$count[prop]
      //循环遍历每个计算属性并重新计算它的值
      for (var i = 0; i < arr.length; i++) {
        var item = arr[i]
        // 获得返回的值
        this.data[item] = this.computed[item]()
      }
    }
    // 如果节点绑定了此属性 更新节点
    var dom = $('[data-vm="' + prop + '"]')
    if (dom) {
      dom.text(val)
    }
    // this.updateView()
  } catch(e) {
    console.log('error setData' + prop)
  }
}

实现成功!

目前绑定的各种方式我改了蛮多,具体的代码在github上,有兴趣的童鞋可以看一看。

项目github地址https://github.com/unjust-life/mvvm

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
JS如何判断json是否为空
Jul 06 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
小程序如何写动态标签的实现方法
Feb 05 #Javascript
vue如何实现动态加载脚本
Feb 05 #Javascript
vue实现图片懒加载的方法分析
Feb 05 #Javascript
Vue组件基础用法详解
Feb 05 #Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 #Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 #Javascript
Vuex的API文档说明详解
Feb 05 #Javascript
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
jupyter安装小结
2016/03/13 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
使用python生成目录树
2018/03/29 Python
浅谈Python中的bs4基础
2018/10/21 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
农田水利实习自我鉴定
2013/09/19 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
学习心理学的体会
2014/11/07 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
写给导师的自荐信
2015/03/06 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
养成教育主题班会
2015/08/13 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书