通过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. PHP转JAVA开发30分钟实战攻略

    服务端开发中,有很多知识是相通的,例如mysql,redis,http协议等. 基于这些基础,在编程语言上的转变并不困难. 本文主要从下面几点出发,讲述如何快速从php开发转为java开发: 使用框架 ...

  2. Swagger的学习

    Swagger 号称世界上最流行的Api框架; RestFul Api文档在线自动生成工具=>Api文档与API定义同步更新 直接运行,可以在线测试API接口 支持多种语言:(Java,Php. ...

  3. 永远的Ace 实验四 团队作业1：软件研发团队组建

    项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/2018CST/ 这个作业要求链接 https://www.cnblogs.com/nwnu-da ...

  4. Python 扩展 Op

    Python 扩展 Op 注意 :本文涉及的 Python Kernel 仅在 gcc 4.8.5 编译环境下充分测试,进一步的完善计划见 Issue 3951. 背景介绍 OneFlow 将各种对于 ...

  5. YOLOV4各个创新功能模块技术分析（三）

    YOLOV4各个创新功能模块技术分析(三)  八.数据增强相关-Stylized-ImageNet 论文名称:ImageNet-trained cnns are biased towards text ...

  6. python之读取excel实例演示

    1.基础知识点击这里 import openpyxl def read_excel(workbook,sheetname=None): wd=openpyxl.load_workbook(workbo ...

  7. day05对象和类

    day06作业: 第一题:分析以下需求,并用代码实现 手机类Phone 属性: 品牌brand 价格price 行为: 打电话call() 发短信sendMessage() 玩游戏playGame() ...

  8. c语言经典算法---计算Fibonacci数列

    算法是一个程序和软件的灵魂,作为一名优秀的程序员,只有对一些基础的算法有着全面的掌握,才会在设计程序和编写代码的过程中显得得心应手.下面我就分享一个C语言中比较基础却极为重要的一个算法----计算Fi ...

  9. WordPress安全篇(1)：WordPress网站启用HTTPS详细教程

    以前我们浏览网页使用的都是HTTP协议,HTTP使用明文传输,所以传输过程中很容易遭受黑客窃取.篡改数据,很不安全.在WordPress网站上启用HTTPS协议访问后,能大大提升站点的安全性,启用HT ...

  10. linux命令基础（一课）

    一.Linux命令基础 1.shell Linux系统中运行的一种特殊程序 在用户和内核之间充当'翻译官' 用户登录Linux系统时,自动加载一个shell程序 bash是Linux系统中默认使用的s ...