通过js实现数据的双向绑定 ：

Object.defineProperty了解

语法：

Object.defineProperty(obj, prop, descriptor)

obj  要定义属性的对象。

prop 要定义或修改的属性的名称

descriptor 要定义或修改的属性描述符

obj和prop很好理解 比如我们定义一个变量为

const o = {

    name:'xbhog'

}

其中obj指的就是o,prop指的就是o.name 下面我们主要看看descriptor

descriptor  目标对象属性的一些特征（是一个对象）

   descriptor  下有6个参数

	参数1：

	    value:属性值

	参数2：

	　　writable：对象属性值是否可以被修改  true允许  false不允许

	参数3：

	　　configurable:对象属性是否可以被删除 true允许  false不允许

	参数4：

	　　enumerable:对象属性是否可被枚举

	参数5：

	    get():是个函数，当访问该属性的时候，函数自动调用，函数返回值就是该属性的值

	参数6：

	    set():是个函数，当修改该属性的时候，函数自动调用，函数有且只有一个参数，赋值的新值

注意：描述符里的value属性 writable属性 与 get属性 set属性是互斥的关系，只能存在一个

了解了前置知识，我们来实现Vue中的v-model的双向绑定。

先看实现代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>通过js实现数据的双向绑定</title>

</head>

<body>

<input type="text"/><br>

<h1>你好：<span>更新数据</span></h1>

<!-- 通过js实现数据的双向绑定 -->

<script>

	// 方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象

    var ipt =document.querySelector('input');

    var p = document.querySelector('span');

    var data = {name:""};

	/*

	    oninput 事件在用户输入时触发。

	    该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

	 */

    ipt.oninput = function(){

	// 将ipt.value中的值传给data.name的value

        data.name = ipt.value;

    }

    //劫持ipt.value

    Object.defineProperty(data,"name",{

    // 数据订阅

    get(){

        return ipt.value;  //当访问的时候会调用get方法

    },

    // 数据劫持

	//name:value

    set(value) {

        p.innerHTML = value;

        ipt.value = value;

    }

})

</script>

</body>

</html>

首先我们通过document.querySelector获取input以及p标签的Html对象，在定义一个data对象，属性name先为空。

使用事件监听oninput来监听用户输入(该事件在 <input> 或 <textarea> 元素的值发生改变时触发)。

将ipt.value中的值传给data.name的value；

data.name = ipt.value;

利用Object.defineProperty劫持用户输入的数据。

  • get 属性：是个函数，当访问该属性的时候，函数自动调用，函数返回值就是该属性的值
  • set 属性：是个函数，当修改该属性的时候，函数自动调用，函数有且只有一个参数，赋值的新值
Object.defineProperty(data,"name",{

    // 数据订阅

    get(){

       return ipt.value;  //当访问data.name时候会调用get方法，调用ipt.value获取当前value的值

    },

    // 数据劫持

    set(value) {   //设置数据的时候会自动调用set方法

        p.innerHTML = value;

        ipt.value = value;

    }

看效果比较明显：

set方法：

get方法：

最后实现效果：

如果你看到这里或者正好对你有所帮助，希望能点个关注或者推荐，感谢；

有错误的地方，欢迎在评论指出，作者看到会进行修改。

参考资料：

  1. https://blog.csdn.net/Doulvme/article/details/107978012
  2. https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
  3. https://www.jianshu.com/p/6f589af16ad4
  4. https://juejin.cn/post/6857077890140340238 (推荐)

通过原生js实现数据的双向绑定的更多相关文章

  1. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  2. js实现数据视图双向绑定原理

    这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了几行代码看他 ...

  3. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  4. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  5. 数据的双向绑定 Angular JS之开端篇

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  6. React入门---事件与数据的双向绑定-9

    上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...

  7. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  8. vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定

    vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...

  9. JavaScript实现数据的双向绑定

    接触到Angulr.js和Vue.js后,提到最多的就是双向绑定 下面将用JavaScript实现数据的双向绑定 <!DOCTYPE html> <html> <head ...

随机推荐

  1. python 匹配中文字符

    参考: http://hi.baidu.com/nivrrex/blog/item/e6ccaf511d0926888d543071.html           http://topic.csdn. ...

  2. properties模板

    jdbc.driver=com.mysql.jdbc.Driverjdbc.url=jdbc:mysql://localhost:3306/ssmdemo1?useSSL=true&useUn ...

  3. 数据库原理 第七章 数据库设计和ER模型

    第七章讲述一个E-R设计如何转换成一个关系模式的集合以及如何在该设计中找到某些约束. 1.概念设计定义了数据库中表示的实体.实体的属性.实体之间的联系,以及实体和联系上的约束 在设计一个数据库模型的时 ...

  4. 如何让Android 支持HEIF 图片解码和加载（免费的方法）

    字节跳动火山引擎ImageX提供了一种能力,可以支持客户端android 直接解码HEIF 和HEIC图片,经过测试发现,可以免费使用: 一.阅前准备 HEIF图片格式是什么? 高效率图像格式(Hig ...

  5. [转]CAP和BASE理论

    1. CAP理论 2000年7月,加州大学伯克利分校的Eric Brewer教授在ACM PODC会议上提出CAP猜想.2年后,麻省理工学院的Seth Gilbert和Nancy Lynch从理论上证 ...

  6. SLAM的通用框架：GSLAM

    SLAM的通用框架:GSLAM GSLAM: A General SLAM Framework and Benchmark 论文链接: http://openaccess.thecvf.com/con ...

  7. CVPR2020：三维实例分割与目标检测

    CVPR2020:三维实例分割与目标检测 Joint 3D Instance Segmentation and Object Detection for Autonomous Driving 论文地址 ...

  8. jemeter压测, 高级应用: 发1万个请求,每个请求参数都不同, 使用CSV数据文件配置

    今天接到一个压测任务, 数据源需要自己从测试环境库中取, 并且使用jemeter 请求, 每个请求参数都不相同 这里使用jemeter的 CSV数据文件来配置: 这样配置好后, 开始发送请求: csv ...

  9. 设置NX欢迎界面

    环境变量 变量名:UGII_WELCOME_PAGE 变量值:http://www.baidu.com/

  10. centos 7 iotop 安装

    安装指令:yum -y install iotop 指定查看aubunt 用户的读写状态:iotop -u aubunt -P -k -t 允许在非交互模式下每隔3秒刷新一次,只刷新6次:iotop ...