jsプロジェクトでの双方向データバインディングの簡単な実装方法

jsプロジェクトでの双方向データバインディングの簡単な実装方法

序文

双方向データ バインディングとは、オブジェクトのプロパティが変更されると、対応する UI も同時に変更できること、およびその逆であることを意味します。つまり、name プロパティを持つユーザー オブジェクトがある場合、user.name に新しい値を設定するたびに、UI にも新しい値が表示されます。同様に、UI にデータ ユーザーの名前の入力ボックスが含まれている場合、新しい値を入力すると、ユーザー オブジェクトの名前プロパティがそれに応じて更新されます。

Ember.js、Angular.js、KnockoutJS などの多くの一般的な JavaScript フレームワークは、双方向データ バインディングを主要な機能の 1 つとして推進しています。これは、ゼロから実装するのが難しいという意味ではなく、この種の機能が必要な場合にこれらのフレームワークを使用するのが唯一の選択肢であるという意味でもありません。基本的な考え方は実は非常に基本的なものであり、それを実装するには次の 3 つのポイントに要約できます。

  • どの UI 要素がどのプロパティにバインドされているかを判断する方法が必要です。
  • プロパティとUIの変更を監視する必要がある
  • バインドされたすべてのオブジェクトと UI 要素に変更を伝播する必要があります。

パブリッシュ・サブスクライバ・パターン

パブリッシュ/サブスクライブ モデルは、実際にはオブジェクト間の 1 対多の依存関係です。オブジェクトの状態が変化すると、それに依存するすべてのオブジェクトに状態の変化が通知されます。

サブスクライバーは、サブスクライブしたいイベントをディスパッチセンター(イベントチャネル)に登録(Subscribe)します。パブリッシャー(Publisher)がディスパッチセンターにイベントを発行(Publish Event)すると、つまりイベントがトリガーされると、ディスパッチセンターはサブスクライバーが登録した処理コードをディスパッチセンターに一律にディスパッチ(Fire Event)します。

結果

電話

HTML 呼び出し終了バインディング data-bind-phone="name"

  <ul>

       <li class="block-phone fix bd-bottom">

            <label for="J_verificationPhone" data-bind-phone="tishi"><span>電話番号</span></label>

            <input class="fix1" id="J_verificationPhone" data-bind-phone="name" name="phone" type="text" />

            <button class="right J_clickTime" type="button">

            <span class="award-messages-btn2 J_messagesBtn1">認証コードを取得</span>

            <span class="award-messages-btn2 J_messagesBtn2 none"><i>60 秒後に再送信</i></span>

          </ボタン>

     </li>

       <li class="ブロック検証修正">

            <label for="J_verificationCode"><span>検証コード</span></label>

            <input class="fix1" data-bind-code="tishi" id="J_verificationCode" data-bind-phone="name" name="verification-code" class="" type="" />

       </li>

   </ul>

js呼び出し次のコードコメントを参照してください

/**
 * 関数検証コールバックコールバックメソッド* [$btn1 説明]
 * データバインド電話="名前"
 * @message {[type]} 変更されたフィールド電話番号
 * @prop_name {[type]} フィールドの値名
 * @target {[type]} ターゲット jsdom オブジェクト。
 * @targetValue {[type]} ターゲットjsdomオブジェクトの値
 */// コールバック関数をリッスンすると、関数は targetvalue、ターゲット js dom オブジェクトの値を取得し、変更されたフィールドを操作するのに便利です。 ! !
var User = require('../../entry/module/twoWayAudio.js');
var phone = 新しいユーザー('phone',verificationCallback);
 関数検証コールバック(メッセージ、プロパティ名、ターゲット、ターゲット値){
}

インポートされたソースコード twoWayAudio

関数 DataBinder(object_id,verificationCallback){
  // 単純な pubSub オブジェクトを作成する var pubSub = {
コールバック: {},
on: 関数(メッセージ、コールバック) {
this.callbacks[msg] = this.callbacks[msg] || [];
this.callbacks[msg].push(コールバック);
},
公開: 関数(メッセージ) {
\

this.callbacks[msg] = this.callbacks[msg] || [];
(var i = 0, len = this.callbacks[msg].length; i < len; i++) {
this.callbacks[msg][i].apply(this,arguments);
};
}
},

data_attr = "data-bind-" + object_id、
メッセージ = object_id + ":change",
changeHandler = 関数(イベント) {
var target = event.target || event.srcElement, // IE8 互換 prop_name = target.getAttribute(data_attr);
if (prop_name && prop_name !== "") {
if (検証コールバック) {
var targetValue = target.value;
検証コールバック (メッセージ、prop_name、ターゲット、ターゲット値);
}
pubSub.publish(メッセージ、prop_name、target.value);
}
};

// イベントの変更をリッスンし、pubSub にプロキシします
ドキュメントにイベントリスナーを追加する場合
document.addEventListener("keyup",changeHandler,false);
} それ以外{
// IE8 は addEventListener の代わりに attachmentEvent を使用します
document.attachEvent("onkeyup",changeHandler);
};

// pubSub はバインドされたすべての要素に変更を伝播します pubSub.on(message,function(event,prop_name,new_val){
var elements = document.querySelectorAll("[" + data_attr + "=" +prop_name + "]"),
タグ名;
(var i = 0, len = elements.length; i < len; i++) {
タグ名 = elements[i].tagName.toLowerCase();
if (tag_name === "input" || tag_name === "textarea" || tag_name === "select") {
要素[i].値 = new_val;

} それ以外{
要素[i].innerHTML = new_val;
};
};
})
pubSub を返します。
}

関数 User(uid,verificationCallback) {
  var バインダー = 新しい DataBinder(uid,verificationCallback)、
  ユーザー = {
  属性 : {}、
  // 属性セッターはデータバインダーpubSubを使用してセットを公開します: function (attr_name, val) {
  this.attribute[attr_name] = val;
  バインダーを公開します(uid + ":change",attr_name,val,this);
  },
  取得:関数(属性名){
  this.attribute[attr_name]を返します。
  },
  _binder : バインダー
  };

バインダー.on(uid + ":change",関数(イベント,attr_name,new_val,イニシエーター) {
if (イニシエーター !== ユーザー) {
user.set(attr_name,new_val);
}
});
ユーザーを返します。
}
module.exports = ユーザー;
// phone.set( "name", "lwl" );
  // phone.set( "tishi", "ヒント" );

代替ソリューション

上記は双方向データバインディングの単なるカバーです。実際、この要件はもっと簡単に実装できます。

 $('.block-phone #phone')[0].oninput=function(){
 コンソールログ($(これ))
}

要約する

これで、js プロジェクトでの双方向データバインディングの簡単な実装方法についての記事は終了です。より関連性の高い js 双方向データバインディング実装コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js データ バインディング メソッド (一方向、双方向、および 1 回限りのバインディング)
  • 非常にシンプルな js 双方向データバインディングを実装する
  • JavaScript で双方向データバインディングを実装する 3 つの方法の概要
  • JavaScriptデータの双方向バインディングを簡単に実装
  • JavaScript における双方向データバインディングの詳細な説明
  • JSネイティブデータ双方向バインディング実装コード
  • JSデータの双方向バインディングの原則と使用例の分析
  • jsでビューとデータの双方向バインディングを実現する方法の分析

<<:  MySQL Strict Modeの知識ポイントの詳細な説明

>>:  史上最も便利な Zookeeper サーバーの構築方法 (推奨)

推薦する

mysql-joinsの具体的な使用方法

目次結合構文: 1. InnerJOIN: (内部結合) 2. LeftJOIN: (左結合) 3....

mysqlのデータディレクトリ内のファイルを直接コピーしてデータを復元する実装

mysqlはデータディレクトリ内のファイルをコピーしてデータを復元します背景: MySQL がクラッ...

Nginx で IP と IP 範囲をブロックする方法

前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...

Javascriptのtry catchの2つの機能についてお話しましょう

プログラムは上から下へ順番に実行され、いくつかの制御文によって実行経路を変更することができます。制御...

MySQL 永続統計の詳細な説明

1. 永続的な統計情報の重要性:統計は、MySQL が実行プランを生成するためのガイドとして使用され...

Portainer を使用した Docker コンテナのデプロイのプロジェクト実践

目次1. 背景2. 操作手順3. Portinerをインストールする3.1 Dockerのデプロイメ...

React コンポーネント間で通信する 3 つの方法 (シンプルで使いやすい)

目次1. 親子コンポーネント通信2. クロスレベルコンポーネント通信1. レイヤーごとに値を渡す2....

Linuxの簡単な分析でファイアウォールの状態と外部に開いているポートの状態を確認する

1. ファイアウォールの状態を確認するファイアウォールのステータスを確認する systemctl s...

読み込み進捗バーのネイティブ JS 実装

この記事では、ネイティブ JS によって実装された動的読み込みプログレス バーの特殊効果を紹介します...

jsのディープコピーを理解しましょう

目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....

MySQL InnoDBエンジンのインデックスとストレージ構造の詳細な説明

序文Oracle や SQL Server などのデータベースには、ストレージ エンジンが 1 つだ...

mysql order by in の文字順序の詳細な説明 (推奨)

//MySQL ステートメント SELECT * FROM `MyTable` WHERE `id...

React onClickにパラメータを渡す問題について話しましょう

背景下のようなリストでは、削除ボタンをクリックすると削除操作を実行する必要があります。 リスト生成:...

MySQLでよく使われる演算子と関数の概要

まずデータ テーブルを作成しましょう。 使用テスト; テーブル「従業員」を作成します( emp_no...

ウェブデザインと制作の一般的な原則をまとめる

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...