Home > Article > Web Front-end > js native code implements two-way data binding (can be used directly, already encapsulated)
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!