原生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解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
vue实现路由切换改变title功能
May 28 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
PHP学习笔记之一
2011/01/17 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python实现邮件发送功能
2019/08/10 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
python交互模式基础知识点学习
2020/06/18 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
大学生村官承诺书
2014/03/28 职场文书
程序员求职信
2014/04/16 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
年终工作总结范文
2019/06/20 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技