美文网首页
JavaScript基础篇(二): 浅谈Getter/Sette

JavaScript基础篇(二): 浅谈Getter/Sette

作者: 废材小熊猫 | 来源:发表于2019-01-02 20:00 被阅读0次

    做为一名前端攻城师,基础必须要好,这一章就来简单的说说什么是get,什么是set。



    get和set简单来说就是监听属性的取值、赋值动作。说道这里,你肯定很懵逼,你说清楚啊,这么说谁能懂? 既然这样,那来个简单的小栗子演示一下get和set的操作吧:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>get/set</title>
    </head>
    <input type="text" v-model="test1">
    <input type="text" v-model="test2">
    
    <body>
        <script>
            let data = {
                test1: '',
                test2: ''
            };
            (function () {
                //input改变,更新data里面的数据。
                var dom = document.querySelectorAll('input');
                for (var i = 0; i < dom.length; i++) {
                    if (dom[i].getAttribute('v-model')) {
                        let a = dom[i].getAttribute('v-model');
                        dom[i].oninput = function (e) {
                            data[a] = e.target.value;
                        };
                    }
                };
                //data数据改变。更改Input的value。
                for (let list in data) {
                    Object.defineProperty(data, list, {
                        get: function () {
                            return list;
                        },
                        set: function (value) {
                            list = value;
                            for (x = 0; x < dom.length; x++) {
                                if (dom[x].getAttribute('v-model')) {
                                    let a = dom[x].getAttribute('v-model');
                                    if (data[a] != a) {
                                        dom[x].value = data[a];
                                    }
                                }
                            }
                        }
                    });
    
                }
            })();
            //可在下面添加方法改变data下的值查看value是否改变。
        </script>
    </body>
    
    </html>
    

    好的,大家能看到在上面的代码中,写了一个简单的双向绑定的例子来展示了get/set的使用,当修改输入框的值时:


    test.gif

    从上图中可以看到,修改了输入框的值,然后在控制台打印的时候,会触发get方法,返回对应的值打印到控制台上。
    对应的,如果在修改了data里面test1,test2的值,就会触发set方法,并运行里面包含的逻辑代码,如下:


    test2.gif
    可以看到,当在控制台修改了data里面test1和test2的值时,输入框里对应的值也发送了改变,这就是set方法里面的逻辑。
    好的,相信到了这里,打架对set和get方法已经有了比较深刻的认知,希望大家能在工作中对js基础进一步的加强,溜了溜了~

    相关文章

      网友评论

          本文标题:JavaScript基础篇(二): 浅谈Getter/Sette

          本文链接:https://www.haomeiwen.com/subject/oldtrqtx.html