原生javascript实现类似vue的数据绑定功能示例【观察者模式】

本文实例讲述了原生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.Vevb.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。