es5 实现简单的数据劫持

最新推荐文章于 2021-10-21 19:40:02 发布

qq_37751687

最新推荐文章于 2021-10-21 19:40:02 发布

阅读量259

点赞数

分类专栏： es5 文章标签：数据劫持 Object.defineProperty()

本文链接：https://blog.csdn.net/qq_37751687/article/details/100654590

版权

es5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码有任何疑问之处欢迎留言。

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input class="content" type="text" name="" value="">
        <div class="show"></div>
        <script type="text/javascript">
            var input = document.getElementsByClassName('content')[0];
            var div = document.getElementsByClassName('show')[0];

            var data = {
                value:'wy'
            }

            input.oninput = function(){
                data.value = this.value;
            }

            function update(){
                div.innerText = data.value;
            }

            function observer(data){//监控data对象变化
                if (!data || typeof data != 'object') {
                    return data;
                }else {
                    Object.keys(data).forEach(function(ele){
                        definedRective(data,ele,data[ele]);
                    })
                }
            }
            observer(data);

            function definedRective(data,key,val){
                Object.defineProperty(data,key,{
                    get:function(){
                        return val;
                    },
                    set:function(newVal){
                        val = newVal;
                        update();
                    }
                })
            }


        </script>
    </body>
</html>