首頁  >  文章  >  web前端  >  js原生程式碼實作資料雙向綁定(可以直接拿來使用,已經封裝好了)

js原生程式碼實作資料雙向綁定(可以直接拿來使用,已經封裝好了)

亚连
亚连原創
2018-05-18 13:45:282320瀏覽

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn