原生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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 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
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
用JAVASCRIPT如何给<textarea></textarea>赋值
2007/04/20 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
python3音乐播放器简单实现代码
2020/04/20 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
python中的for循环
2018/09/28 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
Python爬取某平台短视频的方法
2021/02/08 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
采购部部门职责
2013/12/15 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
物业保安员岗位职责
2014/03/14 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
劳动模范获奖感言
2015/07/31 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL