原生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 获取字符串字节数的多种方法
Jun 02 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
基于Python的接口测试框架实例
2016/11/04 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
python中entry用法讲解
2020/12/04 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
2014年中班元旦活动方案
2014/02/14 职场文书
公司停电通知
2015/04/15 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python