非常に単純な JS 双方向データ バインディングの実装_JavaScript スキル

双方向データ バインディングとは、オブジェクト プロパティの変更をユーザー インターフェイスの変更にバインドしたり、その逆を行う機能を指します。つまり、ユーザー オブジェクトと name 属性がある場合、user.name に新しい値を割り当てると、新しい名前が UI に表示されます。同様に、UI にユーザー名の入力ボックスが含まれている場合、新しい値を入力すると、それに応じてユーザー オブジェクトの name プロパティが変更されます。

Ember.js、Angular.js、KnockoutJS などの多くの人気のある JS フレームワーク クライアントは、最新の機能に双方向のデータ バインディングを実装しています。これは、ゼロから実装することが難しいという意味ではなく、また、これらの機能が必要な場合にこれらのフレームワークを採用する唯一の選択肢であるという意味でもありません。以下のアイデアは実際には非常に基本的なもので、3 段階の計画として考えることができます:

UI 要素と属性を相互にバインドする方法が必要です
プロパティと UI 要素の変更を監視する必要があります
すべてのバインドされたオブジェクトと要素に変更を認識させる必要があります

上記のアイデアを実装する方法はまだたくさんあります。簡単で効果的な方法の 1 つは、PubSub モードを使用することです。 考え方は単純です。データ属性を使用して HTML コードをバインドし、バインドされたすべての JavaScript オブジェクトと DOM 要素が PubSub オブジェクトをサブスクライブします。 JavaScript オブジェクトまたは HTML 入力要素がデータの変更をリッスンしている限り、PubSub オブジェクトにバインドされたイベントがトリガーされ、他のバインドされたオブジェクトおよび要素が対応する変更を加えます。

jQuery を使用して簡単な実装を作成します

DOM イベントのサブスクライブとパブリッシュは、jQuery を使用して実装するのが非常に簡単です。次に、次のような Jquery を使用します。

function DataBinder( object_id ) {
 // Use a jQuery object as simple PubSub
 var pubSub = jQuery({});
 // We expect a `data` element specifying the binding
 // in the form: data-bind-<object_id>="<property_name>"
 var data_attr = "bind-" + object_id,
  message = object_id + ":change";
 // Listen to change events on elements with the data-binding attribute and proxy
 // them to the PubSub, so that the change is "broadcasted" to all connected objects
 jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) {
 var $input = jQuery( this );
 pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
 });
 // PubSub propagates changes to all bound elements, setting value of
 // input tags or HTML content of other tags
 pubSub.on( message, function( evt, prop_name, new_val ) {
 jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
  var $bound = jQuery( this );
  if ( $bound.is("input, textarea, select") ) {
  $bound.val( new_val );
  } else {
  $bound.html( new_val );
  }
 });
 });
 return pubSub;
}

上記の実装の場合、User モデルの最も単純な実装方法は次のとおりです。

function User( uid ) {
 var binder = new DataBinder( uid ),
  user = {
  attributes: {},
  // The attribute setter publish changes using the DataBinder PubSub
  set: function( attr_name, val ) {
   this.attributes[ attr_name ] = val;
   binder.trigger( uid + ":change", [ attr_name, val, this ] );
  },
  get: function( attr_name ) {
   return this.attributes[ attr_name ];
  },
  _binder: binder
  };
 // Subscribe to the PubSub
 binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
 if ( initiator !== user ) {
  user.set( attr_name, new_val );
 }
 });
 return user;
}

ここで、User モデル属性を UI にバインドしたい場合は、適切なデータ属性を対応する HTML 要素にバインドするだけで済みます。

// javascript
var user = new User( 123 );
user.set( "name", "Wolfgang" );
// html
<input type="number" data-bind-123="name" />

このようにして、入力値はユーザー オブジェクトの name 属性に自動的にマッピングされ、その逆も同様です

同じです。これで簡単な実装が完了しました。

jQuery 実装は不要

今日のほとんどのプロジェクトでは、おそらく jQuery がすでに使用されているため、上記の例は完全に受け入れられます。しかし、逆の極端な方向に進み、jQuery への依存関係も削除する必要がある場合はどうすればよいでしょうか?まあ、それを証明するのはそれほど難しいことではありません (特にサポートが IE 8 以降に制限されているため)。最終的には、通常の JavaScript を使用してカスタム PubSub を実装し、DOM イベントを保持する必要があります:

function DataBinder( object_id ) {
 // Create a simple PubSub object
 var pubSub = {
  callbacks: {},
  on: function( msg, callback ) {
   this.callbacks[ msg ] = this.callbacks[ msg ] || [];
   this.callbacks[ msg ].push( callback );
  },
  publish: function( msg ) {
   this.callbacks[ msg ] = this.callbacks[ msg ] || []
   for ( var i = , len = this.callbacks[ msg ].length; i < len; i++ ) {
   this.callbacks[ msg ][ i ].apply( this, arguments );
   }
  }
  },
  data_attr = "data-bind-" + object_id,
  message = object_id + ":change",
  changeHandler = function( evt ) {
  var target = evt.target || evt.srcElement, // IE compatibility
   prop_name = target.getAttribute( data_attr );
  if ( prop_name && prop_name !== "" ) {
   pubSub.publish( message, prop_name, target.value );
  }
  };
 // Listen to change events and proxy to PubSub
 if ( document.addEventListener ) {
 document.addEventListener( "change", changeHandler, false );
 } else {
 // IE uses attachEvent instead of addEventListener
 document.attachEvent( "onchange", changeHandler );
 }
 // PubSub propagates changes to all bound elements
 pubSub.on( message, function( evt, prop_name, new_val ) {
 var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),
  tag_name;
 for ( var i = , len = elements.length; i < len; i++ ) {
  tag_name = elements[ i ].tagName.toLowerCase();
  if ( tag_name === "input" || tag_name === "textarea" || tag_name === "select" ) {
  elements[ i ].value = new_val;
  } else {
  elements[ i ].innerHTML = new_val;
  }
 }
 });
 return pubSub;
}

セッターで jQuery トリガー メソッドを呼び出すことを除いて、モデルは同じままにすることができます。トリガー メソッドの呼び出しは、異なる特性を持つカスタマイズされた PubSub のパブリッシュ メソッドの呼び出しに置き換えられます:

// In the model's setter:
function User( uid ) {
 // ...
 user = {
 // ...
 set: function( attr_name, val ) {
  this.attributes[ attr_name ] = val;
  // Use the `publish` method
  binder.publish( uid + ":change", attr_name, val, this );
 }
 }
 // ...
}

私たちは、メンテナンス可能な純粋な JavaScript の 100 行未満で、再び望みの結果を達成しました。

上記の内容は、js 双方向データ バインディングに関するチュートリアルです。皆様のお役に立てれば幸いです。