原生javascript实现类似vue的数据绑定功能示例【观察者模式】


Posted in Javascript onFebruary 24, 2020

本文实例讲述了原生javascript实现类似vue的数据绑定功能。分享给大家供大家参考,具体如下:

观察者模式

let observer = {
    /*订阅功能*/
    addSubscriber: function (cb) {
      this.subscribers.push(cb);
    },
    /*退订功能*/
    removerSubscriber: function (cb) {
      let index = this.subscribers.indexOf(cb);
      this.subscribers.splice(index, 1)
    },
    // 发布功能
    publish: function (what) {
      for (let i in this.subscribers) {
        if (typeof this.subscribers[i] == "function") {
          this.subscribers[i](what);
        }
      }
    },
    // 让每个对象具有订阅功能
    make:function(obj){
      for(let key in this){
        obj[key] = this[key];
      }
      obj.subscribers = [];
    },
  }

使用实例

// 定义对象
    let o = {};
    // 实现数据绑定 实现具有发布订阅功能
    observer.make(o);
    // 发布
    $("#num").oninput = function(){
      o.publish(this.value);
    };
    // 平方功能
    o.addSubscriber(function(num){
      $("#sqrnum").value = Math.pow(num,2);
    });
    o.addSubscriber(function(num){
      $("#cubenum").value = Math.pow(num,3);
    });
    o.addSubscriber(function(num){
      $("#fourFangnum").value = Math.pow(num,4);
    });
    o.addSubscriber(function(num){
      $("#sqrtnum").value = Math.sqrt(num);
    });
  }
  function $(str){//#box .cls p
    if(str.charAt(0)=="#"){
      return document.getElementById(str.substring(1));
    }else if(str.charAt(0)=="."){
      return document.getElementsByClassName(str.substring(1));
    }else{
      return document.getElementsByTagName(str);
    }
  }

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
对node.js中render和send的用法详解
May 14 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
Angular(5.2->6.1)升级小结
Dec 27 Javascript
Vue 技巧之控制父类的 slot
Feb 24 #Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 #Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 #Javascript
原生javascript中this几种常见用法总结
Feb 24 #Javascript
js实现坦克大战游戏
Feb 24 #Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 #Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 #Javascript
You might like
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
对于Python的Django框架部署的一些建议
2015/04/09 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
Django框架 信号调度原理解析
2019/09/04 Python
Python类中self参数用法详解
2020/02/13 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
年终自我鉴定
2013/10/09 职场文书
迎八一活动主题
2014/01/31 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
材料加工工程求职信
2014/02/19 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
Python深度学习之Pytorch初步使用
2021/05/20 Python
Python实现单例模式的5种方法
2021/06/15 Python
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技