JS原生数据双向绑定实现代码

2020-11-27 来源：尚佳旅游分享网

代码如下：

<span style="font-family:Times New Roman;font-size:14px;" deep="7"><!DOCTYPE html> 
<html lang="en"> <head> 
 <meta charset="UTF-8"> 
 <title>Demo</title> 
 <script> 
 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 = "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; 
 } 
 </script> 
</head> 
<body> 
<input type="text" bind-1="name" /> 
<span bind-1="name"></span> 
<script> 
 var DBind = new DBind( 1 ); 
 DBind.set( "name", "" ); 
</script> 
</body> 
</html>
</span>

效果示例：

总结

以上所述是小编给大家介绍的JS原生数据双向绑定实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

显示全文

全部栏目

JS原生数据双向绑定实现代码