vue用Object.defineProperty手写一个简单的双向绑定的示例
前言 上次写了一个object.defineproperty() 不详解,文末说要写用它来写个双向绑定。说话算话,说来就来
前文链接 object.defineproperty() 不详解
先看最后效果
model演示.gif
什么是双向绑定?
1.当一个对象(或变量)的属性改变,那么调用这个属性的地方显示也应该改变,模型到视图(model => view)
2.当调用属性的这个地方改变了这个属性(通常是一个表单元素),那么这个对象(或变量)的属性也会改为最新的值 ,即视图到模型(view => model)
我们怎么知道对象的属性变了?
上文说到,object.defineproperty 设置对象属性的描述字段里面有两个属性 set (设置属性时被调用)和get(获取属性时被调用)
,只说不练,你再讲什么?眼见为实好吗?ok ,上代码
var user = {}; var defaultname = "狂奔的蜗牛"; object.defineproperty(user,"name",{ get:function(){ console.log("你是不是来获取值啦"); return defaultname; }, set:function(value){ console.log("你是不是来设置值啦"); defaultname = value; } }) console.log(user.name); user.name = "狂奔的萝卜"; console.log(user.name);
get和set存取时被调用
如上图所示 每当我获取user.name属性时,get方法被调用,get 方法对应的函数被执行,输出 你是不是来获取值啦;每当我设置user.name属性时,set方法对应的函数被执行,输出 你是不是来设置值啦 ; 是的,我们监控到了代码对user.name属性的存取。
说明 假设id="model" 的元素的 value 是user.name的值,既然我们可以在改变属性的执行日志输出(console.log("你是不是来设置值啦");),那么,我们在设置值的时候给id="model" 的元素设置下新值,不就实现了从模型到视图?!!,说干就干
模型到视图(model => view)的同步
说明 假设id="model" 的元素的 value 是user.name的值,既然我们可以在改变属性的执行日志输出(console.log("你是不是来设置值啦");),那么,我们在设置值的时候给id="model" 的元素设置下新值,不就实现了从模型到视图?!!,说干就干
<body> 手写一个简单双向绑定<br/> <input type="text" id="model"><br/> <div id="modeltext"></div> </body> <script> var user = {}; var defaultname = "狂奔的蜗牛"; document.queryselector("#model").value = defaultname; document.queryselector("#modeltext").textcontent = defaultname; //定义属性 监控改变 object.defineproperty(user,"name",{ get:function(){ console.log("你是不是来获取值啦"); return defaultname; }, set:function(newvalue){ console.log("设置新值"); defaultname = newvalue; console.log("实现 模型 => 视图"); document.queryselector("#model").value = newvalue; document.queryselector("#modeltext").textcontent = newvalue; } }) console.log("2s 后改变值"); settimeout(() => { //改变值 user.name = "狂奔的萝卜"; }, 2000); </script>
模型到视图(model => view)的同步
视图到模型(view => model)的同步
问: 我们能捕捉到view对值更改吗?
答:可以!! id="model" 的input元素的 value 是user.name的值,填充在这个文本框里面,文本框有个“ keyup” 事件,当我们在文本框中输入文字的时候,文本框的值会跟着改变,并且会连续触发keyup事件,那么我们只需要监听这个事件,是不是就可以捕捉到view对值的更改了??既然文本框的值会跟着改变,我们获取最新的值再把新值更新到user.name属性,不就实现了视图到模型(view => model)的同步?没代码说个啥
<body> 手写一个简单双向绑定<br/> <input type="text" id="model"><br/> <div id="modeltext"></div> </body> <script> var user = {}; var defaultname = "狂奔的蜗牛"; var model = document.queryselector("#model"); var modeltext = document.queryselector("#modeltext"); model.value = defaultname; modeltext.textcontent = defaultname; //定义属性 监控改变 object.defineproperty(user,"name",{ get:function(){ console.log("你是不是来获取值啦"); return defaultname; }, set:function(newvalue){ console.log("设置新值"); defaultname = newvalue; model.value = newvalue; modeltext.textcontent = newvalue; } }) model.addeventlistener("keyup", function () { user.name = this.value; console.log("实现 视图 => 模型"); }, false) </script>
view2model.gif
【最终源码】
在上述代码的基础上,加入了 用户输入中文的判断(用户输入中文时,频繁触发 keyup事件,但实际上输入并没有结束。)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>双向绑定</title> </head> <body> 手写一个简单双向绑定<br/> <input type="text" id="model"><br/> <div id="modeltext"></div> </body> <script> var model = document.queryselector("#model"); var modeltext = document.queryselector("#modeltext"); var defaultname = "defaultname"; var userinfo = {} model.value = defaultname; object.defineproperty(userinfo, "name", { get: function () { return defaultname; }, set: function (value) { defaultname = value; model.value = value; console.log("-----value"); console.log(value); modeltext.textcontent = value; } }) userinfo.name = "new value"; var isend = true; model.addeventlistener("keyup", function () { if (isend) { userinfo.name = this.value; } }, false) //加入监听中文输入事件 model.addeventlistener("compositionstart", function () { console.log("开始输入中文"); isend = false; }) model.addeventlistener("compositionend", function () { isend = true; console.log("结束输入中文"); }) </script> </html>
【完结】
object.defineproperty 可以做很多好玩儿的,自己慢慢探索哈~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 在PXC中重新添加掉线节点
推荐阅读
-
用vue的双向绑定简单实现一个todo-list的示例代码
-
用ES6的class模仿Vue写一个双向绑定的示例代码
-
用object.defineproperty()和proxy实现简单的双向绑定,并比较两者优劣
-
vue用Object.defineProperty手写一个简单的双向绑定的示例
-
利用Object.defineProperty实现一个简单的MVVM双向绑定
-
简单实现Vue2.0(Object.defineProperty)和Vue3.0(Proxy)的数据双向绑定
-
JS ES6用Proxy模拟一个简单的数据双向绑定
-
vue用Object.defineProperty手写一个简单的双向绑定的示例
-
用vue的双向绑定简单实现一个todo-list的示例代码
-
用ES6的class模仿Vue写一个双向绑定的例子