原生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 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
JavaScript实现横版菜单栏
Mar 17 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php批量修改表结构实例
2017/05/24 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
用户注册常用javascript代码
2009/08/29 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
TensorFlow实现Softmax回归模型
2018/03/09 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
python做反被爬保护的方法
2019/07/01 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
几道Web/Ajax的面试题
2016/11/05 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
分公司经理岗位职责
2013/11/11 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
促销活动总结模板
2014/07/01 职场文书
商场周年庆活动方案
2014/08/19 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
银行求职信模板
2015/03/20 职场文书
办公室规章制度范本
2015/08/04 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书