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 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
Javascript document.referrer判断访客来源网址
May 15 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 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
基于mysql的论坛(3)
2006/10/09 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
python进阶教程之循环对象
2014/08/30 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Python接口测试文件上传实例解析
2020/05/22 Python
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
什么是索引指示器
2012/08/20 面试题
学校后勤岗位职责
2014/02/19 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
工程造价专业求职信
2014/07/17 职场文书
python如何读取.mtx文件
2021/04/22 Python
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python