- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- 用纯JS如何做到双向绑定，思路和方法是什么
用纯JS如何做到双向绑定，思路和方法是什么
Admin 2022-06-07 群英技术资讯 483 次浏览
今天小编跟大家讲解下有关“用纯JS如何做到双向绑定，思路和方法是什么”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。看下面截图
这是一个普通的html文件，也并没有引入vue.js，是不是在代码中看到有些熟悉的地方？比如："v-model","v-on:click"，还有常用的“双花括号{{}}”赋值语句。
首先说一下实现双向绑定的思路：
一、创建一个自定义vue js对象，例如上面的wslVue 对象，初始化方法里面需要的参数有：（1）需要挂载到的dom对象id、（2）自定义vue对象的data属性（json对象）、（3）后面添加了一个模拟挂载的方法。（这里有用的就是（1）、（2）参数，（3）参数可以当认为vue对象所有的初始化工作完成后可以进行渲染（挂载）了方法回调）。
二、重写vue属性data json对象的set、get方法，同时可以为vue对象添加data下的所有属性，重写vue生成属性的set、get方法，方法里直接执行data的set、get方法（目的是可以直接用vue对象属性的读写进行dom操作）。
三、解析html，将html里面的标签node、文本node进行特定重组（这里说的特定重组指的就是将vue指令，{{}} 赋值符号转换为正常的html文档进行输出），在解析过程中对每一个需要操作的node进行缓存、绑定逻辑、添加监听事件（比如：input标签输入）。
再说一下实现这些功能的js主要的方法有哪些：
一、js对象属性的set、get方法。
二、document.createDocumentFragment html片段解析。
三、相关的正则判断进行html代码片段重组。
最后需要创建哪些工具类？
一、vue对象。
二、观察者类Watcher，保存需要操作的node节点和属性变更需要做的回调方法。
三、管理所有观察者Watcher的管理类Dep，控制数据变更相关Watcher进行回调渲染。
实现vue双向绑定
初始化vue对象方法
注释：
1：为vue对象添加data里全部的属性，并重写set、get方法。
2：为vue对象添加方法管理methods对象，当解析html获取到v-on:click方法的时候为标签添加click事件方法体。
3：这里进行解析html，解析时遇到需要处理的node时创建Watcher对象，将相关node及指令保存在Watcher对象里，并把Watcher对象添加到观察者管理类Dep集合里面。
4：初始化完成后进行挂载，渲染完整的html到指定的dom元素上。
Compile类解析需要挂载对应的dom
获取全部的node节点
解析特定指令
标签元素与文本内容判断
这里如果是标签node需要解析里面的v-on和v-model指令
v-model
v-on:click
红线处即为vue对象里methods匹配出来的方法，为当前的node添加点击事件。
这里如果是文本内容node需要解析里面的{{}}指令。
总结：这里会创建很多Watcher对象，对象保存了当前vue对象、node、数据变更回调，并保存在Dep管理类里，以待数据变更时直接执行方法回调进行渲染。
特定指令判断
Watcher及Dep对象
最后放一张思维导图
结尾：到这里基本的思路就讲完了，没有太复杂的逻辑，表达能力有限。希望对大家能有帮助，同时也接受大神们的批评指正，共同进步。
到此这篇关于“用纯JS如何做到双向绑定，思路和方法是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
path模块使用场景有哪些，执行机制是怎样
本文 Node.js 版本为 16.14.0，本文的源码来自于此版本。希望大家阅读本文后，会对大家阅读源码有所帮助。path 的常见使用场景Path 用于处理文件和目录的路径，这个模块中提供了
-
如何用JS写个简单的购物车，方法是什么
这篇文章主要为大家详细介绍了原生JavaScript实现购物车效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
-
插件化封装hook请求的实现及过程是什么
这篇文章主要为大家介绍了插件化机制优雅封装你的hook请求使用方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
-
mock.js配置步骤是什么，使用mock能解决什么问题
目录mockjs配置和使用方式需求步骤mock使用及mock无侵入的解决什么是mock？为什么要用到mock？如何使用mock？mock无侵入式配置mockjs配置和使用方式需求在前后端分离的开发中，需要前后端同时开发，但是在后端完成前，暂时是没有数据返回给前端使用的，如果先写静态后面再改，就有重复工作的内耗存在。所以
-
JS中修改body的样式怎么操作，写法是什么
这篇文章主要介绍了在js中修改html body的样式，下面文章围绕js修改html 和body样式的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
