Vueにおける双方向データバインディングの原理に関する研究

双方向バインディングの考え方

双方向データ バインディングの考え方は、データ層と UI 層のどちらかが変更されると、データが同期して更新されます。他の。

双方向バインディングのいくつかの方法

現在、フロントエンドで双方向データ バインディングを実装するには、大きく 3 つの方法があります:

1. パブリッシャー/サブスクライバー モード (backbone.js)

アイデア: カスタムを使用するdata 属性は HTML コードでのバインディングを指定します。すべてのバインドされた JavaScript オブジェクトと DOM 要素は、パブリッシャー オブジェクトに「サブスクライブ」されます。 JavaScript オブジェクトまたは HTML 入力フィールドの変更が検出されるたびに、イベントをパブリッシャー/サブスクライバー パターンに委任し、バインドされたすべてのオブジェクトと要素に変更をブロードキャストして伝播します。

2. 破損値の検出 (angular.js)

アイデア: ポーリングを通じてデータの変更を検出します。特定のイベントがトリガーされた場合にのみ、盗難値の検出が開始されます。

おおよそ次のとおりです:

• ユーザーによるテキストの入力、ボタンのクリックなどの DOM イベント。 (ng-click)

• XHR 応答イベント ($http)

• ブラウザ位置変更イベント ($location)

• タイマー イベント ($timeout、$interval)

• $digest() または $apply ( )

3. データハイジャック (vue.js)

アイデア: データオブジェクトのプロパティの取得と設定を監視するには、このようにしてノードの命令が呼び出されます。 、最適な使用方法 一般的な = 等号の割り当てをトリガーできます。

Wue 双方向データバインディングの小さなデモアイデア

① Wue オブジェクトを構築し、オブジェクトのプロパティ el と data を定義し、オブジェクトの作成時に対応するデータを渡し、init() メソッドを実行します。

var Wue=function(params){
 this.el=document.querySelector(params.el);
 this.data=params.data;
 this.init();
};

② Initメソッド内でbindTextメソッドとbindModelメソッドが実行されます。これら2つのメソッドは、dom内のw-model命令とw-text命令にバインドされたhtmlを解析し、それに応じて処理します。

init:function(){
  this.bindText();
  this.bindModel();
 }

③ bindingText メソッドは、w-text 命令を含む要素を配列に配置します (例: w-text='demo')。次に、innerHTML の値を data[demo] に渡された値と等しくします。

bindText:function(){
  var textDOMs=this.el.querySelectorAll('[w-text]'),
  bindText;
  for(var i=0;i<textDOMs.length;i++){
  bindText=textDOMs[i].getAttribute(&#39;w-text&#39;);
  textDOMs[i].innerHTML=this.data[bindText];
  }
 }

④ bindingModel メソッド、w-model 命令を持つ要素 (通常はフォーム関連の要素) を配列に配置します。例: w-model='demo'、keyup イベントを各要素にバインドします (ブラウザの書き込みメソッドと互換性があります) ）。

bindModel:function(){
 var modelDOMs=this.el.querySelectorAll('[w-model]'),
 bindModel;
 var _that=this;
 for(var i=0;i<modelDOMs.length;i++){
 bindModel=modelDOMs[i].getAttribute(&#39;w-model&#39;);
 modelDOMs[i].value=this.data[bindModel]||&#39;&#39;;
 //数据劫持
 this.defineObj(this.data,bindModel);
 if(document.addEventListener){
 modelDOMs[i].addEventListener(&#39;keyup&#39;,function(event) {
  console.log(&#39;test&#39;);
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }else{
 modelDOMs[i].attachEvent(&#39;onkeyup&#39;,function(event){
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }
 }
}

⑤ Object.definePropertyを使ってsetメソッドとgetメソッドを定義し、setメソッド内でbindTextメソッドを呼び出します。これは、入力で w-model の値が変更されると set メソッドが自動的に実行されるため、このメソッドでは w-text を更新するメソッドのみを呼び出すことができます。

defineObj:function(obj,prop,value){
  var val=value||'';
  var _that=this;
  try{
  Object.defineProperty(obj,prop,{
  get:function(){
  return val;
  },
  set:function(newVal){
  val=newVal;
  _that.bindText();
  }
  })
  
  }catch (err){
  console.log('Browser not support!')
  }
 }

⑥使い方

html:<br><h3>双向数据绑定demo</h3>
<div id="wrap">
 <input type="text" w-model=&#39;demo&#39;>
 <h5 w-text=&#39;demo&#39;></h5>
</div><br>js:
 <script src=&#39;../js/wue.js&#39;></script>
 <script>
 new Wue({
 el:&#39;#wrap&#39;,
 data:{
  demo:&#39;winty&#39;
 }
 })
 </script>

以上がこの記事の内容です、この記事の内容が皆様の勉強や仕事に少しでもお役に立てれば幸いです。また、PHP中国語サイトも応援させていただきます。

Vue の双方向データ バインディングの原則に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。