通过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. 第5讲 | 从物理层到MAC层：如何在宿舍里自己组网玩联机游戏？

    第一层(物理层) 水晶头要做交叉线,用的就是所谓的 1-3.2-6 交叉接法. 有一个叫做 Hub 的东西,也就是集线器.这种设备有多个口,可以将宿舍里的多台电脑连接起来.但是,和交换机不同,集线器没 ...

  2. 删除本地解压版Mysql

    1.关闭服务 以管理员身份运行cmd,使用命令net stop mysql停止服务. 2.卸载服务 使用命令mysqld -remove mysql卸载服务. 这时候在服务里已经找不到mysql服务了 ...

  3. ELK搭建-windows

    一.E 二.L 启动 三.K 四.filebeat 五.配置文件使用 1.logstash-sample.conf # Sample Logstash configuration for creati ...

  4. 干货：ANR日志分析全面解析

    一.概述 解决ANR一直是Android 开发者需要掌握的重要技巧,一般从三个方面着手. 开发阶段:通过工具检查各个方法的耗时,卡顿情况,发现一处修改一处. 线上阶段:这个阶段主要依靠监控工具发现AN ...

  5. AMD Ryzen 5000‘Cezanne’APU

    AMD Ryzen 5000'Cezanne'APU Spotted,Zen 3&7nm Vega芯片将在2021年前保留AM4支持 AMD Ryzen 5000 'Cezanne' APU ...

  6. Recommenders with TensorRT

    Recommenders with TensorRT 推荐系统用于向社交网络.媒体内容消费和电子商务平台的用户提供产品或媒体推荐.基于MLP的神经协作滤波器(NCF)推荐器使用一组完全连接或矩阵乘法层 ...

  7. ADAS处理器集成功能安全单片机MCU

    ADAS处理器集成功能安全单片机MCU ADAS processors integrate functional safety MCU 拉斯维加斯-德州仪器公司引进了ADAS和网关处理器TDA4VM和 ...

  8. java面试必知必会——排序

    二.排序 时间复杂度分析 排序算法 平均时间复杂度 最好 最坏 空间复杂度 稳定性 冒泡 O(n²) O(n) O(n²) O(1) 稳定 选择 O(n²) O(n²) O(n²) O(1) 不稳定 ...

  9. springmvc——自定义类型转换器

    一.什么是springmvc类型转换器? 在我们的ssm框架中,前端传递过来的参数都是字符串,在controller层接收参数的时候springmvc能够帮我们将大部分字符串类型的参数自动转换为我们指 ...

  10. springboot的restful风格获取请求中携带的参数

    http://localhost:8080/emp/1 有以上请求,我们controller要怎么获取请求中传递的参数1呢? 通过PathVariable注解,如下: @DeleteMapping(& ...