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


Posted in Javascript onAugust 14, 2017

代码如下:

<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原生数据双向绑定实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
js仿微博动态栏功能
Feb 22 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
Vue.js对象转换实例
Jun 07 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
关于在mongoose中填充外键的方法详解
Aug 14 #Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 #Javascript
jQuery:unbind方法的使用详解
Aug 14 #jQuery
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 #Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 #Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 #Javascript
You might like
PHP中cookies使用指南
2007/03/16 PHP
php 异常处理实现代码
2009/03/10 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
php简单统计在线人数的方法
2016/05/10 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python 模拟登陆163邮箱
2020/12/15 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
什么是makefile? 如何编写makefile?
2013/01/02 面试题
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
保护环境倡议书
2014/04/14 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
三下乡个人总结
2015/03/04 职场文书
初中思品教学反思
2016/02/20 职场文书