Simple implementation method of two-way data binding in js project

  <ul>

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

            <label for="J_verificationPhone" data-bind-phone="tishi"><span>Phone number</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">Get verification code</span>

            <span class="award-messages-btn2 J_messagesBtn2 none"><i>Resend after 60</i> seconds</span>

          </button>

     </li>

       <li class="block-verification fix">

            <label for="J_verificationCode"><span>Verification Code</span></label>

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

       </li>

   </ul>

/**
 * function verificationCallback callback method* [$btn1 description]
 * data-bind-phone="name"
 * @message {[type]} The changed field phone
 * @prop_name {[type]} value name of the field
 * @target {[type]} target jsdom object;
 * @targetValue {[type]} value of the target jsdom object
 */// Listen to the callback function, the function will get the value of targetvalue, target js dom object, which is convenient for operating the changed fields! ! !
var User = require('../../entry/module/twoWayAudio.js');
var phone = new User('phone',verificationCallback);
 function verificationCallback(message,prop_name,target,targetValue){
}

function DataBinder(object_id,verificationCallback){
  // 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 = 0, 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(event) {
var target = event.target || event.srcElement, // IE8 compatible prop_name = target.getAttribute(data_attr);
if (prop_name && prop_name !== "") {
if (verificationCallback) {
var targetValue = target.value;
verificationCallback (message,prop_name,target,targetValue);
}
pubSub.publish(message,prop_name,target.value);
}
};

// Listen for event changes and proxy to pubSub
if (document.addEventListener) {
document.addEventListener("keyup",changeHandler,false);
} else{
// IE8 uses attachEvent instead of addEventListener
document.attachEvent("onkeyup",changeHandler);
};

// pubSub propagates changes to all bound elements pubSub.on(message,function(event,prop_name,new_val){
var elements = document.querySelectorAll("[" + data_attr + "=" +prop_name + "]"),
tag_name;
for (var i = 0, 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;
}

function User(uid,verificationCallback) {
  var binder = new DataBinder(uid,verificationCallback),
  user = {
  attribute : {},
  // The attribute setter uses the data binder pubSub to publish set : function (attr_name, val) {
  this.attribute[attr_name] = val;
  binder.publish(uid + ":change",attr_name,val,this);
  },
  get : function (attr_name) {
  return this.attribute[attr_name];
  },
  _binder : binder
  };

binder.on(uid + ":change",function(event,attr_name,new_val,initiator) {
if (initiator !== user) {
user.set(attr_name,new_val);
}
});
return user;
}
module.exports = User;
// phone.set( "name", "lwl" );
  // phone.set( "tishi", "提示" );

 $('.block-phone #phone')[0].oninput=function(){
 console.log($(this))
}