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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
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图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
python del()函数用法
2013/03/24 Python
python实现文件名批量替换和内容替换
2014/03/20 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
python单元测试unittest实例详解
2015/05/11 Python
python如何在终端里面显示一张图片
2016/08/17 Python
浅谈python对象数据的读写权限
2016/09/12 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
Python爬取梨视频的示例
2021/01/29 Python
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
优秀干部获奖感言
2014/01/31 职场文书
银行批评与自我批评
2014/02/10 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
报效祖国演讲稿
2014/09/15 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
医院志愿者活动总结
2015/05/06 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers