今天学习一下js实现vue.js中的双向绑定

女爷i 2022-05-17 09:13 149阅读 0赞

看完后，越来越感觉到JavaScript原生的强大了。

话不多，源码附上

实现效果图:

![70][]

# **HTML:** #

<div id="app">
    			<input type="text" zf-model="msg" />
    			<input type="text" zf-model="name"/>
    			{
       {msg}}	{
       {name}}
    			<div>逍遥君</div>
    			<div>{
       {name}}</div>
    		</div>
    		<div id="app_1">
    			
    		</div>

# **js:** #

<script>
    			//将数据和节点挂载在一起
    			let obj = {msg:new ViewModel(''),name:new ViewModel('')};			
    			
    			function ViewModel(data){
    				this.data = data; //this.data代表的是当前的值 （new一个对应一个）
    				this.nodes = [];//放节点的盒子
    			};
    			
    			ViewModel.prototype.bindNode = function(node){ //这里要做的事就是把节点和数据绑定在一起(prototype可以让你向对象添加属性和方法)
    				this.nodes.push(node);//数组中添加input
    //				console.log(this.nodes)
    			};
    			ViewModel.prototype.setVal = function(newVal){ //这里要做的是将input的值赋给{
       {}}
    				if(newVal !== this.data){
    					this.data = newVal;
    					this.update()
    				};
    			};
    			ViewModel.prototype.getVal = function(){ //把该方法暴露，取得data的值
    				return this.data
    			}
    			ViewModel.prototype.update = function(){ //更新方法 可以把节点依次渲染成想要的结果
    				this.nodes.forEach(node=>{
    					if(node.nodeType === 1 ){
    						node.value = this.data;
    					}else{
    						node.textContent = node.my.replace(/\{\{([^}]*)}\}/g,function(){
    							return obj[arguments[1]].data;
    						})
    					}
    				})
    			}
    
    			function compile(el){
    				let ele =document.querySelector(el); //取元素
    				//我们不要直接操作节点 可能会导致页面的回流
    				let fragment = document.createDocumentFragment() //创建一个文档碎片
    				//取ele下的第一个元素	直到取完为止并且将内容放到文档碎片中
    				let child;
    				while(child = ele.firstChild){
    					fragment.appendChild(child);
    				};
    				function replace(fragment){ //用来递归判断是否有我们想要的标签
    				//				NodeList 类数组 Array.prototype.slice.call					
    					Array.from(fragment.childNodes).forEach(node=>{	//childNodes取他的儿子 forEach遍历数组
    	
    	//					console.log(node)
    						//判断node 节点是标签 还是文本
    						if(node.nodeType === 1){	//元素节点
    	//						node.attributes; //取到节点上的所有属性  这还是一个类数组 
    							Array.from(node.attributes).forEach(attr=>{
    	//							console.dir(attr);  //console.dir 显示一个对象的所有属性和方法
    								let {name,value} = attr;  //相当于 let name = attr.name; let value = attr.value
    								if(name.includes('zf-')){	//array.includes是判断数组里是否包含某一元素,返回true和false
    									obj[value].bindNode(node) //给对应的input添加上bindNode这个方法
    									node.addEventListener("input",function(e){
    										obj[value].setVal(e.target.value)
    									})
    								};
    							});
    							//取得节点上的所有属性
    						};
    						let reg = /\{\{([^}]*)\}\}/g;
    						let text = node.textContent; //取得node文本节点中的数值用来做正则判断
    													//test方法用来检索字符串中是否有匹配的文本，有返回true.否则false
    						if(node.nodeType === 3 &&reg.test(text)){//文本节点
    							text.replace(reg,function(){
    //								console.log(arguments)  //获取到函数中的所有参数
    								node.my = text ; //自定义属性   保留原有的值
    								obj[arguments[1]].bindNode(node);//给对应的text添加上bindNode这个方法
    							});
    						};
    						if(node.childNodes.length){
    							replace(node); //如果有嵌套关系 继续查找
    						};
    					});
    				};
    				replace(fragment); //编译后要调用update方法
    				Object.keys(obj).forEach(key=>{ //Object.keys()，该方法返回一个数组，可以拿到对象的所有属性
    					obj[key].update();	
    				})
    				// 这里操作数据  是不会导致页面回流
    				ele.appendChild(fragment);
    			};
    			compile('#app')
    		</script>

[70]: /images/20220517/a130cd77f1c94b2c9b99b037f547a46f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js实现vue的数据双向绑定

写在前面 > 很多面试官在面试的时候为了显示自己很牛，喜欢问面试者，你会不会使用原生js实现vue的双向绑定啊，每次我遇到这种面试官我都想揍他一顿，不是说这个问题问得不好

向右看齐/ 2022年10月04日 13:56/ 0 赞/ 244 阅读

相关 Vuejs——（1）入门（单向绑定、双向绑定、列表渲染、响应函数）

参照链接： http://cn.vuejs.org/guide/index.html 【起步】部分本文是在其基础上进行补全和更详细的探寻嗯，根据朋友

迷南。/ 2022年07月17日 00:23/ 0 赞/ 278 阅读

相关原生js实现双向数据绑定

js实现双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta chars

怼烎@/ 2022年05月26日 07:48/ 0 赞/ 242 阅读

相关 js双向绑定数据

转自：http://www.jb51.net/article/107917.htm 前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-

深碍√TFBOYSˉ_/ 2022年05月24日 00:56/ 0 赞/ 266 阅读

相关今天学习一下js实现vue.js中的双向绑定

看完后，越来越感觉到JavaScript原生的强大了。话不多，源码附上实现效果图: ![70][] HTML: <div id="app">

女爷i/ 2022年05月17日 09:13/ 0 赞/ 150 阅读

相关 JS 实现双向数据绑定

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

末蓝、/ 2022年02月21日 14:48/ 0 赞/ 354 阅读

相关 js实现简单的双向绑定

<body> <div id="app"> <input type="text" id="txt"> <p id="sh

秒速五厘米/ 2022年01月31日 22:53/ 0 赞/ 316 阅读

相关 Vue.js双向绑定的实现原理

[Vue.js双向绑定的实现原理][Vue.js] Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。本文仅探究双向绑定是怎样实现的

野性酷女/ 2022年01月26日 09:45/ 0 赞/ 280 阅读

相关用JS简单实现Vue的双向绑定

Vue实现数据双向绑定原理：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，gette

男娘i/ 2021年07月25日 01:43/ 0 赞/ 486 阅读

相关 Vuejs基本知识(十一)【双向绑定】

双向绑定这个概念现在越来越普及。在`Angular`出现的时候,就作为宣传的王牌概念. 现在几乎是个js前端框架,就有这个功能. 它的概念是: 某个变量，定义于 `<sc

痛定思痛。/ 2021年06月26日 16:06/ 0 赞/ 526 阅读