1. 程式人生 > >寵辱不驚,看庭前花開花落;去留無意,望天上雲捲雲舒

寵辱不驚,看庭前花開花落;去留無意,望天上雲捲雲舒

該接觸angular,就很好奇他是如何實現的,最近有些時間,就查閱了相關的東西,其實很簡單,並沒有想象中的那麼高大上。

從原理觸發

在JavaScript中給一個物件新增屬性可以像下面這樣

obj.age=20;
obj.say=function(){}

還可以通過Object.defineProperty來定義新屬性或者修改原有的屬性,其餘發如下

Object.defineProperty(obj,prop,descriptor)

語法中,obj是需要操作的目標物件,prop是需要定義或修改的屬性名字,descriptor所擁有的特性

然而關於descriptor目前有兩種形式,資料描述和存取器描述,關於存取器描述,他允許我們定義get,set等其他屬性,如下

var obj={};
var initValue='hello';
Object.defineProperty(obj,"newKey",{
    get:function(){
        return initValue;
    },
    set:function(value){
        initValue=value;
    }
});
console.log(obj.newKey);
obj.newKey='change value';
console.log(obj.newKey,initValue)

通過這個例子,我們知道了當獲取值的時候觸發get函式,當設定值得時候觸發set函式,設定的新的值由引數value拿到

實現程式碼

<input type="text" id="txt">
<p id="show-txt"></p>
var obj={};
let writeDom=document.getElementById("txt");
let showDom=document.getElementById("show-txt");
Object.defineProperty(obj,"txt",{
    get:function(){
        return obj;
    },
    set:function(value){
        showDom.innerHTML=value;
    }
});
writeDom.addEventListener("keyup",function(e){
    obj.txt=e.target.value;
})

其他的應用場景還需要小夥伴不斷的嘗試與發現。