通过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. F5 BIG-IQ 8.0 发布 - 借助一个统一的管理平台，管理您的所有 BIG-IP 设备和服务

    针对完整可见性和控制的 BIG-IQ 集中式管理 BIG-IP 设备和服务的端到端控制 高效管理(编排.可见性和合规性)依赖于跨本地和云部署中始终如一的应用服务和安全策略.利用独立统一的管理平台实现对 ...

  2. [leetcode] 72. 编辑距离(二维动态规划)

    72. 编辑距离 再次验证leetcode的评判机有问题啊!同样的代码,第一次提交超时,第二次提交就通过了! 此题用动态规划解决. 这题一开始还真难到我了,琢磨半天没有思路.于是乎去了网上喵了下题解看 ...

  3. Elasticsearch常用DSL关键字

    Elasticsearch常用DSL关键字 query: 用于包含查询使用到的语法 match_all: 最简单的查询,获取索引所有数据,类似搜索 *.如:"query":{&qu ...

  4. Go语言网络通信---tcp群发消息

    server package main import ( "fmt" "net" "os" "time" ) func ...

  5. 视觉SLAM技术应用

    视觉SLAM技术应用 SLAM技术背景 SLAM技术全称Simultaneous localization and mapping,中文为"同时定位与地图构建".SLAM可以在未知 ...

  6. Git操作_本地仓库第一次推送到远程仓库

    实现目的: 本地已经安装好Git,pycham已经有一个项目,打算放到Git远程仓库 前提条件:本地配置好了公钥,且GIT 上关联好公钥,步骤如下: git本地仓库连接github操作步骤:windo ...

  7. springboot注解之@ConditionalOnProperty

    最近在研究springboot的源码,看到很多@ConditionalOnXxx的注解,大概明白此注解的意思,就是判断条件,这个条件就是Xxx,例如ConditionalOnProperty就是判断配 ...

  8. BurpSuite安装与sqlmap联动

    这是我新建的一台虚拟机,还没有安装java运行环境. 这是我的[burpsuite2.0](https://pan.baidu.com/s/1uGn4IE6_6Xn4cwj_Vo5BBg),现在我们去 ...

  9. pandas的数据结构介绍（一）—— Series

    pandas两个主要数据结构之一--Series 类似于一维数组,由一组数据和与其相关的一组索引组成 obj = Series([4, 7, -5, 3], index=['d', 'b', 'a', ...

  10. Django（69）最好用的过滤器插件Django-filter

    前言   如果需要满足前端各种筛选条件查询,我们使用drf自带的会比较麻烦,比如查询书名中包含"国"字,日期大于"2020-1-1"等等诸如此类的请求,Djan ...