Home  >  Article  >  Web Front-end  >  js native code implements two-way data binding (can be used directly, already encapsulated)

js native code implements two-way data binding (can be used directly, already encapsulated)

亚连
亚连Original
2018-05-18 13:45:282320browse

The following is the js native code I compiled for you to implement two-way data binding. Interested students can take a look.

It is encapsulated into a jquery plug-in. Copy the code and introduce it after Jquery;
You can also remove the plug-in line and use it directly.

<!--使用方法-->
<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;
}
})();

The above is the js native code I compiled for everyone to implement two-way data binding. I hope it will be helpful to everyone in the future.

Related articles:

I will explain to you in detail how to create div, span, label in js through code

##JS Simple operation of downloading file stream (code attached)

Entry-level video.js usage notes (code attached)

The above is the detailed content of js native code implements two-way data binding (can be used directly, already encapsulated). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn