下面是我给大家整理的js原生代码实现数据双向绑定，有兴趣的同学可以去看看。
封装成jquery的插件了，复制代码后在jquery之后引入；
也可以去掉插件那行直接使用。
<!--使用方法-->
<div data-bind-1="name"></div>
<input type="text" data-bind-1="name" />
<script>
$.dbind(1).set("name", "123");
</script>
(function() {
//封装成jqery插件
jquery.dbind = function(id) {
return new dbind(id);
}; //下面是具体的实现
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 = 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 + ":input",
timein;
changehandler = function(evt) {
var target = evt.target || evt.srcelement, // ie8 compatibility
prop_name = target.getattribute(data_attr); if(prop_name && prop_name !== "") {
cleartimeout(timein);
timein = settimeout(function() {
pubsub.publish(message, prop_name, target.value);
}, 50);
}
}; // listen to change events and proxy to pubsub
if(document.addeventlistener) {
document.addeventlistener("input", changehandler, false);
} else { // ie8 uses attachevent instead of addeventlistener
document.attachevent("oninput", 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 = 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 dbind(uid) {
var binder = new databinder(uid),
user = { // ...
attributes: {},
set: function(attr_name, val) {
this.attributes[attr_name] = val; // use the `publish` method
binder.publish(uid + ":input", attr_name, val, this);
},
get: function(attr_name) {
return this.attributes[attr_name];
},
_binder: binder
}; // subscribe to the pubsub
binder.on(uid + ":input", function(evt, attr_name, new_val, initiator) {
if(initiator !== user) {
user.set(attr_name, new_val);
}
}); return user;
}
})();
上面是我整理给大家的js原生代码实现数据双向绑定，希望今后会对大家有帮助。
相关文章：
通过代码详细为你讲解如何在js中创建div，span，label
js下载文件流的简单操作（附上代码）
入门级video.js使用笔记（代码附上）
以上就是js原生代码实现数据双向绑定（可以直接拿来使用，已经封装好了）的详细内容。