原生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 相关文章推荐
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
微信小程序tabBar设置实例解析
Nov 14 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
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
php cookie 详解使用实例
2016/11/03 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python循环语句中else的用法总结
2016/09/11 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
python实现简单flappy bird
2018/12/24 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
项目技术负责人岗位职责
2015/04/13 职场文书
2016年寒假生活小结
2015/10/10 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
Python 数据可视化之Matplotlib详解
2021/11/02 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python