原生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 相关文章推荐
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
RequireJs的使用详解
Feb 19 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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的计数器程序
2006/10/09 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
python中zip()方法应用实例分析
2016/04/16 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
护理学专业推荐信
2013/12/03 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
安全生产承诺书
2014/03/26 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
见义勇为事迹材料
2014/12/24 职场文书
PL350与SW11的比较
2021/04/22 无线电
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python