[JS]原生使用Object.defineProperty劫持数据,实现响应式数据驱动DOM(借助VUE2.X的核心思想)

原创 已于 2023-03-05 12:11:24 修改 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vscode

于 2022-04-21 15:27:37 首次发布
举个栗子

点击按钮只修改响应式数据,达到DOM更新和数据更新的功能
在这里插入图片描述

核心思想

定义一个即将被监听劫持的对象 => 给每一个对象.属性增加Object.defineProperty(),从而实现修改属性是会触发getter和setter

  • getter 用于获取被劫持后计算出指定的结果
  • setter 监听到修改操作时,由setter进行更新相关DOM

  • 定义需要被劫持的响应式对象数据
    在这里插入图片描述

  • 对于定义的数据进行针对劫持,使用getter和setter进行对DOM的处理
    在这里插入图片描述

  • 当点击功能按钮时,只需要修改定义的响应式数据就可以
    在这里插入图片描述

完整代码

供体验 希望大佬指点不足之处
供参考 下方注释掉的是JS原生操作DOM实现的

<html>
	<head>
		<title>操作DOM</title>
	</head>
	<style>
		.context,.footer{
			display: inline-block;
		}
	</style>
	<script>
		window.onload=function(){
			let data = {
				checkedLen:null,/**获取当前选中的数量*/
				count:null,/**获取当前所有的item数量*/
				checkboxAll:false,/**手动全选后勾选[全选/全不选]*/
				selectAll:false,/**控制点击[全选]按钮*/
				allDontChoose:true,/**控制点击[全不选]按钮*/
				inverse:false,/**控制点击[反选]按钮*/
			}
			let items=document.getElementsByName('checkbox')
			
			/**获取当前选中的数量*/
			Object.defineProperty(data,'checkedLen',{
				get:function(){
					let items=document.getElementsByName('checkbox')
					let len = 0
					for (const item of items) {
						if(item.checked) len++
					}
					return len
				},
			})
			/**获取当前所有的item数量*/
			Object.defineProperty(data,'count',{
				get:function(){
					let items=document.getElementsByName('checkbox')
					return items.length
				}
			})
			/**手动全选后勾选[全选/全不选]*/
			Object.defineProperty(data,'checkboxAll',{
				get:function(){
					return data.checkedLen == data.count
				},
				set:function(newValue){
					let all = document.getElementById('all')
					all.checked = newValue
					if((data.checkedLen == data.count) || newValue){
						for (let item of items) {
							item.checked = newValue
						}
					}
					
				},
			})
			/**控制点击[全选]按钮*/
			Object.defineProperty(data,'selectAll',{
				get:function(){
					return data.checkedLen == data.count
				},
				set:function(newValue){
					let selectAll = document.getElementById('selectAll');
					selectAll.disabled = newValue
					if(newValue){
						for (let item of items) {
							item.checked = newValue
						}
					}
				},
			})
			/**控制点击[全不选]按钮*/
			Object.defineProperty(data,'allDontChoose',{
				get:function(){
					return data.checkedLen == null || data.checkedLen === 0
				},
				set:function(newValue){
					let allDontChoose = document.querySelector('#allDontChoose')
					allDontChoose.disabled = newValue
					if(newValue){
						for (let item of items) {
							item.checked = !newValue
						}
					}
				}
			})
			/**控制点击[反选]按钮*/
			Object.defineProperty(data,'inverse',{
				set:function(newValue){
					for (let item of items) {
						item.checked = !item.checked
					}
				}
			})
			
			data.allDontChoose = true
			for (const item of items) {
				item.onclick = function(){
					data.selectAll = data.checkedLen == items.length
					data.checkboxAll = data.checkedLen == items.length
					data.allDontChoose = data.checkedLen == null || data.checkedLen === 0
				}
			}
			/**全选*/
			let selectAll = document.getElementById('selectAll')
			selectAll.addEventListener('click',function(){
				data.selectAll = true
				data.checkboxAll = true
				data.allDontChoose = false
			})
			/*全选/全不选*/
			let checkboxAll = document.getElementById('all')
			checkboxAll.addEventListener('click',function(){
				data.selectAll = this.checked
				data.checkboxAll = this.checked
				data.allDontChoose = !this.checked
			})
			/*全不选*/
			let allDontChoose = document.getElementById('allDontChoose')
			allDontChoose.addEventListener('click',function(){
				data.allDontChoose = true
				data.selectAll = false
				data.checkboxAll = false
			})
			/**反选*/
			let inverse = document.getElementById('inverse')
			inverse.addEventListener('click',function(){
				data.inverse = true
				if(data.checkedLen === 0 ){
					data.selectAll = false
					data.checkboxAll = false
					data.allDontChoose = true
				}else if(data.checkedLen < data.count){
					data.selectAll = false
					data.checkboxAll = false
				}else{
					data.selectAll = true
					data.checkboxAll = true
					data.allDontChoose = false
				}
			})
			let submit = document.getElementById('submit')
			submit.addEventListener('click',function(){
				let chooseMatter = []
				for (const item of items) {
					if(item.checked) chooseMatter = [...chooseMatter,item.value]
				}
				alert(!!chooseMatter.length ? chooseMatter:'没有选择,请勾选喜欢的球')
			})
		}
	</script>
	<body>
		<form style="max-width: 500px;">
			<h3>JS原生使用Object.defineProperty劫持数据,实现响应式数据驱动DOM(借助VUE2.0的核心思想)</h3>
			<fieldset>
				<legend><label><input type="checkbox" id="all"/> 全选 / 全不选</label></legend>
				<div class="context">
					<label><input type="checkbox" name="checkbox" value="0" /> 篮球</label>
					<label><input type="checkbox" name="checkbox" value="1" /> 足球</label>
					<label><input type="checkbox" name="checkbox" value="2" /> 排球</label>
					<label><input type="checkbox" name="checkbox" value="3" /> 冰球</label>
					<label><input type="checkbox" name="checkbox" value="4" /> 花球</label>
				</div>
				<div class="footer">
					<input type="button" value="全选" id="selectAll"></input>
					<input type="button" value="全不选" id="allDontChoose"></input>
					<input type="button" value="反选" id="inverse"></input>
					<input type="button" value="提交" id="submit"></input>
				</div>
			</fieldset>
		</form>
		<script>
			// window.onload = function(){
			// 	let all = document.getElementById('all') /**全选/全不选*/
			// 	let allCheckbox = document.getElementsByName('checkbox')
			// 	for (const item of allCheckbox) {
			// 		item.onclick = function(){
			// 			if(!all.checked) all.checked = true
			// 			for (const i of allCheckbox) {
			// 				if(!i.checked) all.checked = false
			// 			}
			// 		}
			// 	}
			// 	all.addEventListener('click',function(){
			// 		for (let item of allCheckbox) {
			// 			if(item.checked != this.checked) item.checked = this.checked
			// 		}
			// 	})
			// 	let selectAll = document.getElementById('selectAll')
			// 	selectAll.addEventListener('click',function(){
			// 		for (let item of allCheckbox) {
			// 			if(!item.checked) item.checked = true
			// 		}
			// 		all.checked = true
			// 	})
			// 	let allDontChoose = document.getElementById('allDontChoose')
			// 	allDontChoose.addEventListener('click',function(){
			// 		for (let item of allCheckbox) {
			// 			if(item.checked) item.checked = false
			// 		}
			// 		all.checked = false
			// 	})
			// 	let inverse = document.getElementById('inverse')
			// 	inverse.addEventListener('click',function(){
			// 		all.checked = true
			// 		for (let item of allCheckbox) {
			// 			item.checked = !item.checked
			// 			if(!item.checked) all.checked = false
			// 		}
			// 	})
			// 	let submit = document.getElementById('submit')
			// 	submit.addEventListener('click',function(){
			// 		let chooseMatter = []
			// 		for (const item of allCheckbox) {
			// 			if(item.checked) chooseMatter = [...chooseMatter,item.value]
			// 		}
			// 		console.log(chooseMatter)
			// 	})
			// }
		</script>
	</body>
</html>
微信扫一扫,免费保护车主号码隐私的挪车码即可到手免费使用

在这里插入图片描述

原生js实现响应式，数据驱动
欧阳的技术博客
11-03 1万+
mvvm
深入理解 Vue 响应式原理：从数据变化到 DOM 更新的底层机制
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
11-21 1599
Vue 的响应式原理是指 Vue 会将数据对象的属性转化为getter和setter，使得每当数据变化时，视图（DOM）能够自动更新。Vue 通过这种双向数据绑定的方式，简化了开发者手动更新 DOM 的工作。我们可以通过修改数据，来自动触发视图的更新，而无需手动操作 DOM。数据变化 -> 视图更新。Vue 会通过对数据的代理，当数据发生变化时，自动触发视图更新。为了实现这一点，Vue 会用 JavaScript 的特性来拦截对对象的访问（如属性的读取和设置），并做出相应的操作。
[数据驱动Dom]利用jquery实现输入数据的长期保存并渲染到页面(关闭浏览器数据也会保存)
weixin_44134588的博客
08-11 511
核心点 利用数组存储数据,将数组转化为字符串存到localStorage 它的基础操作在这里:https://blog.csdn.net/weixin_44134588/article/details/107803511 基础界面(实现功能为主,不要在乎外观): 用户输入之后就会渲染到浏览器中; 用户可以手动执行删除和上下移动操作; 上代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charse
使用原生js编写Vue双向数据驱动(1)
tdl081071tdy的博客
08-19 255
观察者模式与数据劫持部分还没完成，有时间在继续更新 function Vue(options){ this.$el = options.el; this.$data = options.data; if(this.$el){//若这个el节点存在不为空，则编译模板 //将data中的数据 全部转化成Object.defineProperty来定义 这样我...
vue的响应式都用它来实现，js中强大的Object.defineProperty()方法
codingWeb的博客
02-05 328
今天vue项目做完，部署到了nginx中，闲暇时间，回看项目，对vue的响应式的实现产生了好奇，于是看了vue的源码和一些大牛们对vue源码的解读，大致初略的了解了vue响应式的是实现原理 1.Vue中修改数据，Vue内部是如何监听message数据的变化的 Object.defineProperty() -> 监听对象属性的改变 2.当数据发生改变，Vue是如何知道要通知哪些数据，...
利用Object.defineProperty简单实现vue的数据响应式原理
weixin_44823731的博客
05-20 727
概念终究还是概念，实践才能真正理解的其中的精髓！
数据驱动
weixin_45576305的博客
06-08 349
数据驱动 数据驱动，就是通过控制数据的变化来改变（驱动）DOM。当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。 Vue实现数据数据驱动的双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineP
Vue进阶篇一 Object.defineProperty方法（es6的）、数据反映到视图、视图反映到数据（原生的v-model）、发布订阅模式优化架构
m0_55170432的博客
06-28 495
总结 <!-- 1. Object.defineProperty ES6提供的原生方法 Object.defineProperty(data, 'name', { // 访问data.name属性的时候会自动调用 并且get函数的返回值就是你通过data.name拿到的值 get(){ return '柴柴老师' }, // 设置一个对象属性的时候自动调用的函数 会把设置的最新的值当成实参传入set
vue2 怎么使用Object.defineProperty实现的双向绑定
最新发布
03-27
在 Vue2 的实现中，`Object.defineProperty` 是其核心工具之一，用于完成数据劫持并实现双向绑定。以下是其实现过程的具体分析： #### 数据劫持 Vue2 需要对所有的 data 属性进行拦截操作，以便能够监听到属性的...
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
10-16
标题中提及的“vue响应式更新机制”指的是Vue.js框架中一个核心特性，该特性能够使得当数据模型发生变化时，自动更新视图层的内容，从而实现数据驱动视图的目的。Vue采用数据劫持结合观察者模式的策略实现这一机制。...
原生js双向数据绑定 前端数据劫持Object.defineProperty
weixin_30826095的博客
08-27 139
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="text" id="dadasdasda">　　　 //o...
数据驱动展示表单dom, antd formItem封装
bangbDIV的博客
04-23 2125
数据驱动展示antd 表单dom
vue的源码学习之五——5.数据驱动（Virtual DOM）
路在脚下，幸福在手中，莫贪！！！！！
12-12 342
1. 介绍       版本：2.5.17。        我们使用vue-vli创建基于Runtime+Compiler的vue脚手架。        学习文档：https://ustbhuangyi.github.io/vue-analysis/data-driven/virtual-dom.html 2. Virtual DOM Vue 2.0 相比 Vue 1.0 最大的升级就是...
dom驱动和数据驱动的理解
qingdouxiaohua的博客
05-12 440
在数据驱动的模式下，开发人员将关注点放在数据本身上，由框架负责根据数据的变化自动更新页面内容。数据驱动的优势在于，开发人员只需关注数据的状态和交互逻辑，而不需要手动操作DOM，从而减少了手写繁琐的DOM操作代码的量。当数据发生变化时，开发人员需要手动选择要更新的DOM元素，并修改其属性或内容以反映新的数据状态。总结来说，DOM驱动和数据驱动的主要区别在于它们对数据和DOM操作的处理方式。DOM驱动需要开发人员直接操作DOM来更新页面内容，而数据驱动则通过数据和视图之间的绑定关系，自动处理UI的更新和渲染。
使用原生js来实现深入响应式原理
weixin_41927760的博客
07-29 991
html代码 <button> 点击 </button> <div class="box"> js代码 var data = { name: '' } var box = document.querySelector('.box') var btn = document.querySelector('button') btn.onclick...
双向绑定基础原理——Object.defineProperty()的使用
SCUhzs
08-13 1359
文章目录1、极简双向绑定示例1.1 Object.defineProperty()1.2 实现过程1.2.1 单个DOM与单个Obj1.2.2 两个DOM与单个Obj3、思考2.参考资料 1、极简双向绑定示例 前端有关VUE的笔试和面试中，观察订阅者模式和VUE中双向绑定的原理这两道题几乎是必考的了。 Vue双向绑定vm视图模型简单来说就是利用了Object.defineProperty(),通过劫持setter,实现model到view，view到model则是一堆事件监听 输入框的input,选择组件
DOM驱动和数据驱动的理解？
huai42717的博客
08-30 529
DOM驱动和数据驱动
说一下你对dom驱动和数据驱动的理解
hexadecimal_001的博客
07-12 1635
特点：传统的JavaScript开发方式通常是DOM驱动的，通过直接操作DOM元素来改变页面的内容、样式和行为。这种方式将应用的状态和视图分离，通过定义数据模型和声明式的模板来描述界面，框架负责根据数据的变化自动更新DOM。在数据驱动的框架中，开发者可以专注于管理数据的变化和业务逻辑，而不必过多关注DOM操作的细节。这种方式通过响应式的数据绑定机制，实现了更高效的页面更新和更好的用户体验。- 定义：数据驱动的编程方式则更专注于维护数据和界面之间的关系，通过绑定数据到界面元素来自动更新视图。
两分钟看懂vue数据驱动dom
weixin_43487252的博客
07-05 1099
不论对于前端哪个框架，数据无疑是最重要的，以数据改变来驱动dom操作，从而尽量减少对dom本身的操作，使得开发人员所有的关注点都集中到了数据，而页面呈现仅仅是一种数据变化带来的映射，这样的代码将使得维护成本大大降低。在当今大部分的框架设计中，这一点也变得越来越成为前端发展的趋势。 vue官网深入响应式原理图片 第1步 vue追踪数据变化建立在将所有的data属性转化为getter/setter，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值