通过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. 重新整理 .net core 实践篇—————配置系统之强类型配置[十]

    前言 前文中我们去获取value值的时候,都是通过configurationRoot 来获取的,如configurationRoot["key"],这种形式. 这种形式有一个不好的 ...

  2. 在gin框架中使用JWT

    在gin框架中使用JWT JWT全称JSON Web Token是一种跨域认证解决方案,属于一个开放的标准,它规定了一种Token实现方式,目前多用于前后端分离项目和OAuth2.0业务场景下. 什么 ...

  3. 『动善时』JMeter基础 — 36、JMeter接口关联【正则表达式提取器】

    目录 1.正则表达式提取器介绍 2.正则表达式提取器界面详解 3.正则表达式提取器的使用 (1)测试计划内包含的元件 (2)请求一界面内容 (3)正则表达式提取器界面内容 (4)请求二界面内容 (5) ...

  4. windows 映射驱动器 图标显示不正常

    正常图标是这样的: 我的变成了这样: 解决方法: 注册表进入: HKEY_CURRENT_USER\SOFTWARE\Classes\Applications\Explorer.exe\Drives\ ...

  5. Jittor实现Conditional GAN

    Jittor实现Conditional GAN Generative Adversarial Nets(GAN)提出了一种新的方法来训练生成模型.然而,GAN对于要生成的图片缺少控制.Conditio ...

  6. 3D点云几何拟合

    3D点云几何拟合 Supervised Fitting of Geometric Primitives to 3D Point Clouds 论文地址: http://openaccess.thecv ...

  7. nvGRAPH原理概述

    nvGRAPH原理概述 nvGRAPH的API参考分析. 简介 数据分析是高性能计算的不断增长的应用.许多高级数据分析问题可以称为图形问题.反过来,当今许多常见的图形问题也可以称为稀疏线性代数.这是N ...

  8. 基于ARM Cortex-M的SoC存储体系结构和实战

    基于ARM Cortex-M的SoC存储体系结构和实战 System on Chip Architecture Tutorial Memory Architecture for ARM Cortex- ...

  9. GStreamer 1.0 series序列示例

    GStreamer 1.0 series序列示例 OpenEmbedded layer for GStreamer 1.0 这layer层为GStreamer 1.0框架提供了非官方的支持,用于Ope ...

  10. MySQL笔记03（黑马）

    今日内容 DQL:查询语句 排序查询 聚合函数 分组查询 分页查询 约束 多表之间的关系 范式 数据库的备份和还原 DQL:查询语句 排序查询 语法:order by 子句 order by 排序字段 ...