javascriptは双方向データバインディングを簡単に実現します.

4121 ワード

直接コード




    
    Title





    function watch(obj,key,callback) {
        var old = obj[key];
        //      :    

        //      :             。

        //      :          。（descriptor）
        Object.defineProperty(obj,key,{
            set:function(val){
                var oldVal = old;
                old = val;
                callback(val,oldVal,this);
            },
            get:function(){
                return old;
            }
        });
    }

    var input = document.getElementById("myinput");
    var bind = document.getElementById("bind");
    var obj = {};
    watch(obj, "input",function (val) {
        input.value = val;
        bind.value = val;
        console.log("     view ，  module       ，       "+val);
    });
    bind.onkeyup = function() {
        obj.input = bind.value;
    }
    input.onkeyup = function () {
        obj.input = input.value;
    };

注:コンソールでobj.inputの値を変えて入力ボックスの値を変えることができます.
その中のobject.defineProperty、vue.jsはそれを通じて双方向の結合を実現したのです.

var a= {}
    Object.defineProperty(a,"b",{
      value:123
    })
    console.log(a.b);//123

とても簡単です.三つのパラメータを受け入れます.全部必要です.パラメータの最初のパラメータ:オブジェクトの2番目のパラメータ:定義された属性または方法の名前が必要です.三つ目のパラメータ:ターゲット属性が持つ特性.(descriptor)前の二つのパラメータは多くなくて、コードを見れば分かります.主に第三のパラメータdescriptorを見て、どのような評価がありますか?
descriptor彼は以下のように評価しています.私たちは簡単に認識して、後の例を紹介します.

value:属性の値(言うまでもない)

writable:falseの場合、属性の値は書き換えられません.読み取り専用の

です.

configrable:総スイッチは、一旦falseであると、もう彼をセットすることができません.

enumerable:for...inサイクル中に巡回できますか?それともObject.keysに列挙されます.

get:後で詳しく話してください.

set:後で詳しく話してください.
第一例を見てみましょう.

var a= {}
    Object.defineProperty(a,"b",{
      value:123
    })
    console.log(a.b);//123

私たちはvalueを設置しただけで、他の設定はしていませんが、初めての時は簡単に理解できます.これはデフォルトで私たちにwritable、configrable、enumerableを教えてくれます.値を設定します.値はすべてfalseです.つまり、上のコードと下のコードは等価です(初回設定の場合に限ります).

var a= {}
Object.defineProperty(a,"b",{
  value:123,
  writable:false,
  enumerable:false,
  configurable:false
})
console.log(a.b);//123

以上はとても重要ですよ.以上の理解はsetとgetには効きません.
configrable
総スイッチは初めてfalseを設置した後、二回目は何の設定もできません.例えば、

var a= {}
Object.defineProperty(a,"b",{
  configurable:false
})
Object.defineProperty(a,"b",{
  configurable:true
})
//error: Uncaught TypeError: Cannot redefine property: b

間違えます.上記のデフォルト値に注意してください.初めてセットしないとどうなりますか?falseに設定してあげます.だから.二回目です.彼を再設置したらどうなりますか?そうです.間違いを報告します.
writable
fasleに設定すると、読み取り専用になります.

var a = {}; 

Object.defineProperty(a, "b", { 
    value : 37,
    writable : false });

console.log(a.b); //    37
a.b = 25; //       （         ，           ）
console.log(a.b); //    37，       。

enumerable
属性特性enumerableは、オブジェクトの属性をfor...inサイクルとObject.keys()に列挙できるかどうかを定義します.

var a= {}
Object.defineProperty(a,"b",{
  value:3445,
  enumerable:true
})
console.log(Object.keys(a));//   ["b"]

falseに変更

var a= {}
Object.defineProperty(a,"b",{
  value:3445,
  enumerable:false //       
})
console.log(Object.keys(a));//   []

for…inは類似していますので、詳しくは説明しません.
セットとゲット
descriptorの中に訪問器(getとset)とwriableまたはvalueを同時に設置してはいけません.そうでないと間違います.つまり、使ってみたいということです.setとgetは使えません.

var a= {}
Object.defineProperty(a,"b",{
  set:function(newValue){
    console.log("      ,     "＋newValue)
    },
  get:function(){
    console.log("     ")
    return 2 //    ，      2
   }
})
a.b =1 //         ,     1
console.log(a.b)    //        
                    //   2        ，

簡単に言えば、この「b」の値付けや値取りはそれぞれsetとgetの対応する関数をトリガします.これがobserveを実現する鍵です.次のページでは、vueのobserveの実現ソースコードを分析して、自分がどのように一歩一歩実現するかを話します.

var a = {
  b: {
    c:1
  },
  d:1
  
}
a.$watch("b.c",()=>console.log("   "))

要約:http://www.cnblogs.com/weiqu/p/5860945.html

Javascript類と静的類の実現(続)