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 サーバーの構築方法 (推奨)

推薦する

高品質なコードを書く Web フロントエンド開発実践書の抜粋

(P4) Web 標準は一連の標準で構成されています。中心となる概念は、Web ページの構造、スタイ...

Linux カーネルの探究: Kconfig の秘密

Linux 構成/ビルド システムがどのように機能するかを深く理解します。 Linux カーネル構成...

vue3 を使用してマテリアル ライブラリを構築する方法

目次なぜマテリアルライブラリが必要なのでしょうか?材質は何ですか?素材の種類fuep、vue3 ベー...

MySQL サブクエリ (ネストされたクエリ)、結合テーブル、複合クエリの詳細な説明

1. サブクエリMySQL 4.1以降はサブクエリをサポートしていますサブクエリ:別のクエリ内にネス...

MySQLデータベースに画像を保存するいくつかの方法

通常、ユーザーがアップロードした写真はデータベースに保存する必要があります。一般的に、解決策は 2 ...

MySQL ロックブロッキングの詳細な分析

日常のメンテナンスでは、スレッドがブロックされることが多く、データベースの応答が非常に遅くなります。...

Vue3 の ref toRef と toRefs の違いを理解する方法

目次1. 基本1.参照2. 参照3. 参照4. 最適な使い方2. 詳細な1. なぜrefが必要なのか...

MySQL 結合テーブルと ID 自動増分の例の分析

結合の書き方左結合を使用する場合、左側のテーブルが必ず駆動テーブルになりますか? 2 つのテーブルの...

MYSQL トランザクション チュートリアル Yii2.0 マーチャント引き出し機能

序文私はプログラマーとしてスタートした PHP プログラマーです。これまで、トレーニング コースで勉...

ソケット '/tmp/mysql.sock' 経由でローカル MySQL に接続できない解決策

エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...

Vue3+Vue-cli4 プロジェクトで Tencent スライダー検証コードを使用する方法

導入:従来の画像検証コードと比較して、スライダー検証コードには次の利点があります。サーバーは検証コー...

フロントエンドフレームワーク Vue における親子コンポーネントデータの双方向バインディングの実装

目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...

Vue の better-scroll コンポーネントを使用して水平スクロール機能を実現する

について最近、Vue を学習する過程で、基本的な知識の練習と強化を目的として、Qunar.com の...

MySQL実行計画の詳細な説明

EXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情報を提供します...

MySQL チュートリアル データ定義言語 DDL の例 詳細な説明

目次1. SQL言語の基本機能の紹介2. データ定義言語の目的3. データベースの作成と破棄4. デ...