以下是我要幫大家整理的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原生程式碼實作資料雙向綁定(可以直接拿來使用,已經封裝好了)的詳細內容。更多資訊請關注PHP中文網其他相關文章!