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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
微信小程序如何使用canvas二维码保存至手机相册
Jul 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
Python递归函数定义与用法示例
2017/06/02 Python
Python正则表达式和元字符详解
2018/11/29 Python
深入了解Django View(视图系统)
2019/07/23 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
python如何安装下载后的模块
2020/07/03 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
临床护理求职信
2014/04/26 职场文书
学前班评语大全
2014/05/04 职场文书
计算机专业自荐信
2014/05/24 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang