JS双方向のデータバインディングを実現

リファレンスここhttps://www.cnblogs.com/tianhaining/p/8425345.html

まず、カザフスタンの顔の質問で始まり、VモデルのVUEが結合双方向のデータを達成する方法です
ケケを、以下の古典的な顔の質問暗唱し始めた
ときのデータで宣言されたVUE、私は新しいインスタンスだったとき、最初にデータをそれは方法がObject.definePropertyあるトリガ、ゲッターとセッターの形で保存されています。この方法で設定および取得方法は2つあります。データを保存します。場合は、データの変更、セッターは見に通知されますので、〜の観点から、データ駆動型の変化は、（もちろん、これは絶対的な権利、唯一自分の要約ではありません）

そして、この方法は、それをやっているこのObject.defineProperty。

これは、新しい属性に直接オブジェクトを定義する、またはオブジェクトの既存のプロパティを変更し、オブジェクトを返します。

このメソッドは、オブジェクトのプロパティを追加または変更することができ正確。追加する属性を割り当てることにより、通常の動作が列挙プロパティ中に提示することができ、列挙されている（のために...またはObject.keys法）、これらの属性の値を変更することができ、それを削除することができます。この方法では、追加のオプションがデフォルト（または設定）を変更することができます。デフォルトでは、属性値を変更することはできません追加するObject.defineProperty（）を使用します。

VAR OBJ = {}; 
    Object.defineProperty（OBJ、 'テスト' 、{ 
        GET（） => {にconsole.log（ 'GETは、Aと呼ばれる' ）}、
        SET：（） => {にconsole.logは（「SET 'と呼ばれます）} 
    }）

get関数を呼び出すときに、私は、オブジェクトの値を読んだとき、私は、オブジェクトに割り当てられたブラウザのコントローラでは、機能セットを呼び出します。

また、双方向のデータバインディングまたはVUE顔MVVMデザインパターンのシリーズは、ここを参照してください、または最大の利点と他の質問のVUEは、より深い理解を持っています。

当時、彼はデータバインディングの双方向達成ネイティブJSと述べ
、次のようにコードがあります

<input type = "テキスト" ID = "INPUT_1"> 
<スパンID = "span_1"> </ span>を


<スクリプト> VAR OBJ = {}; 
    Object.defineProperty（OBJ、 'テスト' 、{ 
        セット：（newValに） => { 
            のdocument.getElementById（ 'INPUT_1'）値= newValに; 
            のdocument.getElementById（ 'span_1'）のinnerHTML = newValに; 
        } 
    }）。
    document.addEventListener（ 'keyUpイベント'、（E）=> { 
        obj.test = e.target.value;       // 事件监听    }） </スクリプト>

この時点で、私はspanタグに同期ページ上の入力ボックス、およびコンソールに入るものを達成することができ、入力およびスパンタグに同期obj.testに割り当てられます。

JS双方向のデータバインディングを実現

おすすめ