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

  <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>

/**
 * 関数検証コールバックコールバックメソッド* [$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);
 関数検証コールバック(メッセージ、プロパティ名、ターゲット、ターゲット値){
}

関数 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(){
 コンソールログ($(これ))
}