初探數據雙向綁定

時間 2019-11-07

標籤初探數據雙向綁定简体版

原文原文鏈接

認識Object.defineProperty以及Object.defineProperties

Object.defineProperty會直接在對象上定義新的屬性和方法，或者修改存在的屬性和方法，並返回這個對象。spa

語法：

Object.defineProperty(object, propertyname, descriptor)

參數：

object 必需。添加須要修改屬性或者添加屬性的對象。
propertyname 必需。須要定義或者修改屬性的名稱(字符串)。
descriptor 必需。屬性描述符。通俗說，屬性的描述。能夠添加數據(數據描述符)屬性，或者訪問器(存取描述符)屬性。數據描述符與存取描述符不可混用,不然報錯。後續詳解。

descriptor的參數

數據描述符code

value-----屬性的值，默認爲 undefined。
writable-----屬性是否可寫，當屬性的值能夠被賦值操做修改時設置爲true。默認爲false。

訪問器描述符對象

get-----屬性的getter方法，屬性若是有getter方法，則返回屬性值，不然返回undefined。默認爲 undefined。
set-----屬性的setter方法，屬性若是沒有setter方法，返回undefined。該方法接收惟一的參數，做爲屬性的新值。默認爲 undefined。

實例

實現input輸入，span同時輸出功能blog

<body>
    <input type="text">
    <span></span>
</body>

<script>
    var input = document.querySelector("input");
    var span = document.querySelector("span");
    //建立新對象
    var obj = {};
    //getValue只是本身定義的屬性名字
    Object.defineProperty(obj,"getValue",{
        //configurable-----若是爲false，
        //則任未嘗試刪除目標屬性或修改屬性如下
        //特性（writable, configurable, enumerable）的行爲將被無效化。
        configurable:true,
        //傳入參數並把參數賦值
        set:function(Data){
            input.value = Data;
            span.innerHTML = Data;
        }
    })
    //input標籤設置鍵盤彈起事件
    input.onkeyup = function(){
        //賦值，實現數據雙向開始。
        obj.getValue = input.value;
    }
</script>

運行結果事件

注意ip

當使用了getter或setter方法，不容許使用writable和value這兩個屬性。
get或set不是必須成對出現，任寫其一就能夠。若是不設置方法，則get和set的默認值爲undefined

Object.defineProperties使用

語法字符串

Object.defineProperties(obj, props)

使用實例

兩個input標籤之間數據互傳get

<body>
    <div>
        輸入數據
        <input type="text" class="one">
    </div>
    <div>
        顯示數據
        <input class="tow"></input>
    </div>
</body>
<script>
    var one = document.querySelector('.one');
    var tow = document.querySelector('.tow');
    //建立新對象
    var obj = {};
    //使用對象的方法保存屬性的名字
    Object.defineProperties(obj, {
        onediv: {
            //ture表示容許刪除屬性或者修改屬性
            configurable: true,
            //傳入參數並把參數賦值
            set: function (newValue) {
                one.value = newValue;
                tow.value = newValue;
            }
        },
        towdiv: {
            //ture表示容許刪除屬性或者修改屬性
            configurable: true,
            //傳入參數並把參數賦值
            set: function (newValue) {
                one.value = newValue;
                tow.value = newValue;
            }
        }
    })
    //input標籤設置鍵盤彈起事件
    one.onkeyup = function(){
        //賦值，實現數據雙向開始。
        obj.onediv = one.value;
    }
    //input標籤設置鍵盤彈起事件
    tow.onkeyup = function(){
        //賦值，實現數據雙向開始。
        obj.towdiv = tow.value;
    }
</script>

運行結果input