通过原生js实现数据的双向绑定
通过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方法：
最后实现效果：
如果你看到这里或者正好对你有所帮助，希望能点个关注或者推荐，感谢；
有错误的地方，欢迎在评论指出，作者看到会进行修改。
参考资料：
通过原生js实现数据的双向绑定的更多相关文章
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- js实现数据视图双向绑定原理
这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了几行代码看他 ...
- 原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- 数据的双向绑定 Angular JS之开端篇
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...
- JavaScript实现数据的双向绑定
接触到Angulr.js和Vue.js后,提到最多的就是双向绑定 下面将用JavaScript实现数据的双向绑定 <!DOCTYPE html> <html> <head ...
随机推荐
- Git指令大全
仓库 # 在当前目录新建一个Git代码库 $ git init # 下载一个项目和它的整个代码历史 $ git clone [url] 配置 # 显示当前的Git配置 $ git config --l ...
- 浅析IOC 和 DI
学习过spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...
- AICompiler动态shape编译框架
AICompiler动态shape编译框架 移动互联网的兴起,不仅产生了海量数据,也对人机交互有了新的定义.企业如何动态处理不同规格图片数据,如何更灵活处理不同长度的对话语料等等,提升企业运营效率,争 ...
- 台积电5nm光刻技术
台积电5nm光刻技术 在IEEE IEDM会议上,台积电发表了一篇论文,概述了其5nm工艺的初步成果.对于目前使用N7或N7P工艺的客户来说,下一步将会采用此工艺,因为这两种工艺共享了一些设计规则.新 ...
- Django（60）Django内置User模型源码分析及自定义User
前言 Django为我们提供了内置的User模型,不需要我们再额外定义用户模型,建立用户体系了.它的完整的路径是在django.contrib.auth.models.User. User模型源码分析 ...
- 菜鸟刷题路：剑指 Offer 09. 用两个栈实现队列
剑指 Offer 09. 用两个栈实现队列 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 appendTail 和 deleteHead ,分别完成在队列尾部插入整数和在队列头部删除整数的 ...
- python学习笔记01-简单接触
前言:陆陆续续学习python一年多了,每次都因为各种原因中断了,希望这次可以通过记录更新的方式坚持学完一轮. 简单了解python Python是一种解释型.面向对象.动态数据类型的高级程序设计语言 ...
- HR面试：过五关斩六将后，小心阴沟翻船！（史上最全、避坑宝典）
文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...
- Pytest学习笔记4-assert断言
前言 pytest作为单元测试框架,自然少不了断言功能,用过unittest的人都知道,在unittest中有丰富的断言方法,比如assertEqual().assertIn().assertTrue ...
- win7旗舰版任务栏窗口不合并显示，鼠标移至窗口时可预览应用内容
1.鼠标移至任务栏--右键--属性: 2.选择"当任务栏被占满时合并"或"从不合并",第一个选项更优: 3.右键桌面"计算机"的" ...