通过Object.defineProperty写双向绑定

最新推荐文章于 2024-07-11 19:31:59 发布

牙刷老大

最新推荐文章于 2024-07-11 19:31:59 发布

阅读量119

点赞数

分类专栏： js 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/ahuang_12138/article/details/115732944

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
        <meta name="viewport"
            content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
</head>

<body>
    <link rel="icon" href="favicon.ico" type="image x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>微商城</title>
    <script>window.routerBase = "/";</script>
    <div id="app">
        手写一个简单双向绑定<br />
        <div>view:<br/>
        <input id='view' type="text">
        </div>
        <div>model:<br/><span id='model'></span></div>
    </div>
    <script type="text/javascript">
       var obj = {name:'hl'}
       var view = document.querySelector('#view')
       var model = document.querySelector('#model')
       model.innerHTML = obj.name
       view.value = obj.name
       // model => view
       Object.defineProperty(obj,'name',{
           get: function(){
               console.log(this,'获取name')
           },
           set: function(val){
               // 劫持set该对象的name属性,当name变化时，dom相应的也变化，
               model.innerHTML = val
               view.value= val
           }
       })

       // view => model
       view.addEventListener('input',function(e){
        // dom变化时更新model
        obj.name = e.target.value
       })
    
    </script>
</body>

</html>

tip: 可以试试在控制台修改obj.name 的值查看效果
疑问：为啥get 方法中的this 为空对象，它的name 属性呢？求大佬赐教~~
参照网上其他人写的双向绑定，自动机加了点自己的注释和理解，望斧正

关于上面疑问，查看文档,解释如下：

在这里插入图片描述

so，由于继承关系，不一定，tip,如果get 方法 return 18，获取obj.name 一直会是18，但是对obj.name 赋值还是会双向绑定,so strange…

牙刷老大

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过Object.defineProperty写双向绑定

这里写自定义目录标题<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"></head><b
复制链接

扫一扫

专栏目录