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

举个栗子

点击按钮只修改响应式数据,达到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 = 0for (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 = newValueif((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 = newValueif(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 = newValueif(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 = truefor (const item of items) {item.onclick = function(){data.selectAll = data.checkedLen == items.lengthdata.checkboxAll = data.checkedLen == items.lengthdata.allDontChoose = data.checkedLen == null || data.checkedLen === 0}}/**全选*/let selectAll = document.getElementById('selectAll')selectAll.addEventListener('click',function(){data.selectAll = truedata.checkboxAll = truedata.allDontChoose = false})/*全选/全不选*/let checkboxAll = document.getElementById('all')checkboxAll.addEventListener('click',function(){data.selectAll = this.checkeddata.checkboxAll = this.checkeddata.allDontChoose = !this.checked})/*全不选*/let allDontChoose = document.getElementById('allDontChoose')allDontChoose.addEventListener('click',function(){data.allDontChoose = truedata.selectAll = falsedata.checkboxAll = false})/**反选*/let inverse = document.getElementById('inverse')inverse.addEventListener('click',function(){data.inverse = trueif(data.checkedLen === 0 ){data.selectAll = falsedata.checkboxAll = falsedata.allDontChoose = true}else if(data.checkedLen < data.count){data.selectAll = falsedata.checkboxAll = false}else{data.selectAll = truedata.checkboxAll = truedata.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>
微信扫一扫,免费保护车主号码隐私挪车码即可到手免费使用

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/47139.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

P04 并发小球V1 V2.1

目录 线程游戏V1——多线程 目标效果 一 Ball类 ​ 二 BallThread类 三 UIListenner类 ​ 四 GameUI类 运行结果 问题分析 线程游戏V2——三线程 目标效果 新增MoveThread线程实现类 修改监听器类UIListenner代码 运行结果 问题分析 问题2代码实现 V2版本如何实现…

用python写的判断是否是水仙花数

水仙花数是百位的3次方十位的3次方个位的3次方原数 while循环 i100while i<1000:a100i//100 #//用于取整&#xff0c;a100得到的值是百位的a10(i//10)%10 #%用于取余&#xff0c;a10得到的值是十位的ai%10 #a得到的值是个位的if(ia100**3a10**3a**3): #判断是…

固定管线shader编写:基本属性

欢迎转载&#xff01;转载时请注明出处&#xff1a; http://write.blog.csdn.net/postedit/50753008 shader 部分介绍&#xff1a; properties&#xff1a;属性部分 material&#xff1a;材质部分 lighting&#xff1a; 启用光照&#xff08;顶点光照&#xff09; settexture :…

计算机图形学(2):OpenGL画球体

参考文章 配置OpenGL环境看上一篇文章 效果图&#xff1a; main.cpp&#xff1a; #include "Dependencies/glew/glew.h" #include "Dependencies/GLFW/glfw3.h"#include "Dependencies/glm/glm.hpp" #include "Dependencies/glm/gtc/m…

MATLAB | 一起来感受数学之美叭

前两天去观摩了MATHWORKS官方举办的Mathematics is beautiful数学之美投票比赛&#xff0c;见到了很多非常惊艳的作品&#xff0c;在这里分享给大家让大家一同感受大神们的创造力&#xff0c;接下来由我来做全程解说。 虽然看起来代码都写好了&#xff0c;&#xff0c;&#x…

由绘制python蟒蛇实例来整体掌握turtle绘图方法

经典案例&#xff1a;python蟒蛇的绘制 话不多说&#xff0c;直接上代码&#xff0c;先整体感知turtle图形绘制。 print("python蟒蛇的绘制") import turtle as t#引入turtle库函数来实现绘图功能 #并使用import...as...使turtle起个小名为t&#xff0c;使代码简洁 t…

七夕节快到了,教你用MATLAB绘制blingbling的大钻石

1效果 2程序说明 其实非常简单&#xff0c;只需要计算出各个顶点位置&#xff0c;并用fill3绘制一个个面出来即可&#xff0c;为了钻石的色彩更加丰富&#xff0c;我们用light函数设置了光照并为fill3创建出的PATCH对象设置了以下属性。 FaceAlpha 面透明度EdgeAlpha 边透明度…

520还在画玫瑰?教你用MATLAB画个玫瑰花球

效果如下&#xff1a; 原理 玫瑰绘制 要画花球我们要先会绘制一朵花&#xff1a; 如何画一朵花可以看看这篇&#xff1a;MATLAB 3D玫瑰花绘制 三维坐标变化 主要用下面的坐标变化方法&#xff1a; 正十二面体球 想像这里有一个正十二面体球&#xff0c;我们把每一面放上…

Android应用开发-学生信息管理系统

设计目的 1、网上很少有关于SQLite简单综合项目的测试APP。 2、把自己所学的部分UI综合一下&#xff0c;希望能给新手一些帮助。 涉及知识点 1、包括SQLite的增删查找等功能。查找中加入了“模糊搜索”的功能。 2、RecyclerView展示 3、SharedPreference保存密码&#xff0c…

基于Android的班级管理APP的设计与实现

选题背景 在当代大学生的日常学习和生活中&#xff0c;手机已经成为必不可少的工具&#xff0c;这导致大学学习生活中的各种日常生活及学习事务需要通过手机作为媒介进行通知及处理。而目前市场上存在的各种社交软件&#xff08;如QQ、微信等&#xff09;并不是为大学生量身定…

团队博客————学生成绩管理系统

项目简介&#xff1a; 支持实现教师端的登录注册&#xff0c;增添、修改与删除学生信息&#xff0c;增添学生时学号自动生成&#xff1b;将学生成绩导入并按照总分排序&#xff0c;查询成绩并支持模糊匹配&#xff1b;可导出学生成绩到excel表格&#xff1b;可生成以分数段划分…

基于android的学生选课信息app

学生选课系统是一个学校不可缺少的部分&#xff0c;该系统可以快速方便的使学生完成课程的选修及选修课程的管理&#xff0c;让管理员方便的管理选修课和设置选修时间&#xff0c;教师也可以查看自己代的选修课和给学生录入成绩。 本软件是一个Android 客户端JSP Servlet服务端…

安卓学生管理系统

安卓学生管理系统是大三时的期末作业&#xff0c;这里附上github链接&#xff0c;给需要交作业的小朋友~ app截图如下&#xff1a;

Android 学生管理系统

Android学生管理系统 由android mysql实现 1.需求分析 功能需求和页面需求两天没有细想&#xff0c;想到啥功能写啥功能想到啥界面写啥界面 2.系统设计 总体界面结构参照了微信的设计结构&#xff0c;主要功能包括管理员的注册和登录&#xff0c;所有学生信息的查询、单个…

奏响风电数字化“协奏曲”,联想助力世优电气打造智能管理闭环

双碳目标之下&#xff0c;可再生能源行业的快速增长&#xff0c;以及能源电力企业降本增效的需求&#xff0c;使得智能化管理平台成为新能源企业数字化转型的关键选择。 这一点&#xff0c;湖南世优电气股份有限公司&#xff08;以下简称“世优电气”&#xff09;感触颇深。作为…

探访世优科技数字人虚拟直播产品体系 | 世优开放日再次成功举行

2023年5月30日&#xff0c;世优科技全栈技术产品体验活动&#xff08;第二期&#xff09;顺利落下帷幕。此次活动共邀请到30余位各行各业的嘉宾到场&#xff0c;在两个多小时的开放日活动中&#xff0c;世优科技全面展示数字人及虚拟直播领域的技术产品体系。来访嘉宾们全程体验…

斩获5项大奖,世优科技虚拟人驱动技术亮相2022亚洲VRAR博览会

2022第6届以“开放共建创造融合”为主题的亚洲VR&AR博览会于8月12日落下帷幕。在数字经济发展和5G时代的大浪潮下&#xff0c;VR/AR产业链正在迎来加速发展&#xff0c;这从博览会的现场盛况可见一斑&#xff0c;本届展会吸引了众多来自海内外的VR/AR领域专家、学者&#x…

世优科技虚拟数字人直播方案,助力企业品牌破局直播同质化难题

随着互联网的快速发展&#xff0c;短视频带货、直播带货行业呈现出井喷式发展&#xff0c;网络电商直播已经成长为一个巨大的产业。预计2026年&#xff0c;我国网络直播市场规模将超过2万亿元。直播的快速发展越来越深刻地影响人们的消费及生活方式。但火热的同时&#xff0c;也…

元宇宙世界杯来袭,虚拟数字人+虚拟场景开创世界杯观赛全新体验

距离万众期盼的2022卡塔尔世界杯开幕已不足一周&#xff0c;世界杯作为全球最负盛名的体育赛事&#xff0c;不仅是球迷的节日&#xff0c;更是属于全民的狂欢。在开赛之际&#xff0c;中国移动重磅发布世界杯“元宇宙”全新玩法&#xff0c;通过融合“虚拟技术融合创新”全量全…

iDWF互博会即将开幕,世优科技携虚拟人女娲及虚拟直播SaaS平台亮相

助力数字经济发展的新引擎&#xff0c;探索“元宇宙”的新窗口&#xff0c;链接政产学研用金的新平台&#xff0c;全景数字生活的超级体验馆。以“通向数字新世界”为主题&#xff0c;2022互联网技术与应用博览会&#xff08;简称&#xff1a;iDWF互博会&#xff09;即将于2022…