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 相关文章推荐
理解Javascript_03_javascript全局观
Oct 11 Javascript
js快速排序的实现代码
Dec 08 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 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 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
点评js异步加载的4种方式
2015/12/22 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python接口开发实现步骤详解
2020/04/26 Python
Numpy数组的广播机制的实现
2020/11/03 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
英国大码女性时装零售商:Evans
2018/08/29 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
C语言面试题
2013/05/19 面试题
运动会获奖感言
2014/02/11 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
2015入党自荐书范文
2015/03/05 职场文书
同学聚会通知短信
2015/04/20 职场文书
行政诉讼答辩状
2015/05/21 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers