本文實例講述了原生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程序設計有所幫助。