首頁  >  文章  >  web前端  >  JavaScript原生實作觀察者模式的範例_javascript技巧

JavaScript原生實作觀察者模式的範例_javascript技巧

韦小宝
韦小宝原創
2017-12-15 13:27:311242瀏覽

下面小編就為大家分享一篇JavaScript原生實作觀察者模式的範例,JavaScript源碼,對JavaScript感興趣的一起跟隨小編過來看看吧

觀察者模式又叫做發布訂閱模式,它定義了一種一對多的關係,讓多個觀察者對象同時監聽某一個主題對象,這個主題對象的狀態改變時就會通知所有觀察著對象。 它由兩類物件組成,主題和觀察者,主題負責發布事件,同時觀察者透過訂閱這些事件來觀察該主體,發布者和訂閱者是完全解耦的,彼此不知道對方的存在,兩者僅僅共享一個自訂事件的名稱。

在Nodejs中透過EventEmitter實作了原生的對於這一模式的支援。

在JavaScript中事件監聽機制就可以理解為一種觀察者模式。透過onclick進行事件綁定,然後透過互動行為進行觸發或事件主動觸發。

下面給出一個JS自訂的PubSub,仔細閱讀下面這段程式碼有助於你理解觀察者模式。

一、定義觀察者類別Pubsub


#
/* Pubsub */
 function Pubsub(){
  //存放事件和对应的处理方法
 this.handles = {};
 }


二、實作事件訂閱on


//传入事件类型type和事件处理handle
 on: function (type, handle) {
  if(!this.handles[type]){
   this.handles[type] = [];
  }
  this.handles[type].push(handle);
 }


三、實作事件發布emit


emit: function () {
  //通过传入参数获取事件类型
 var type = Array.prototype.shift.call(arguments);
  if(!this.handles[type]){
   return false;
  }
 for (var i = 0; i < this.handles[type].length; i++) {
   var handle = this.handles[type][i];
   //执行事件
  handle.apply(this, arguments);
  }
 }


需要說明的是Array.prototype.shift.call(arguments)這句程式碼,arguments物件是function的內建對象,可以取得到呼叫該方法時傳入的實參數組。

shift方法取出陣列中的第一個參數,就是type類型。

四、實作事件取消訂閱off


#
off: function (type, handle) {
  handles = this.handles[type];
  if(handles){
   if(!handle){
    handles.length = 0;//清空数组
  }else{
    for (var i = 0; i < handles.length; i++) {
     var _handle = handles[i];
     if(_handle === handle){
      handles.splice(i,1);
     }
    }
   }
  }
 }


完整程式碼:


/* Pubsub */
 function Pubsub(){
  //存放事件和对应的处理方法
 this.handles = {};
 }
 Pubsub.prototype={
  //传入事件类型type和事件处理handle
  on: function (type, handle) {
   if(!this.handles[type]){
    this.handles[type] = [];
   }
   this.handles[type].push(handle);
  },
  emit: function () {
   //通过传入参数获取事件类型
  var type = Array.prototype.shift.call(arguments);
   if(!this.handles[type]){
    return false;
   }
 for (var i = 0; i < this.handles[type].length; i++) {
    var handle = this.handles[type][i];
    //执行事件
   handle.apply(this, arguments);
   }
  },
  off: function (type, handle) {
   handles = this.handles[type];
   if(handles){
    if(!handle){
     handles.length = 0;//清空数组
   }else{
 for (var i = 0; i < handles.length; i++) {
      var _handle = handles[i];
      if(_handle === handle){
       handles.splice(i,1);
      }
     }
    }
   }
  }
 }


##、測試


var p1 = new Pubsub();
 p1.on(&#39;mm&#39;, function (name) {
 console.log(&#39;mm: &#39;+ name);
 });
 p1.emit(&#39;mm&#39;,&#39;哈哈哈哈&#39;);
console.log(&#39;===============&#39;);
 var p2 = new Pubsub();
 var fn = function (name) {
 console.log(&#39;mm2: &#39;+ name);
 };
 var fn2 = function (name) {
 console.log(&#39;mm222: &#39;+ name);
 };
 p2.on(&#39;mm2&#39;, fn);
 p2.on(&#39;mm2&#39;, fn2);
 p2.emit(&#39;mm2&#39;,&#39;哈2哈2哈2哈2&#39;);
 console.log(&#39;-------------&#39;);
p2.off(&#39;mm2&#39;, fn);
 p2.emit(&#39;mm2&#39;,&#39;哈2哈2哈2哈2&#39;);
 console.log(&#39;-------------&#39;);
p2.off(&#39;mm2&#39;);
 p2.emit(&#39;mm2&#39;,&#39;哈2哈2哈2哈2&#39;);
 console.log(&#39;-------------&#39;);


#以上這篇JavaScript原生實作觀察者模式的範例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家PHP中文網。

相關推薦:

#JavaScript觀察者模式定義與dom事件實例詳解

javascript觀察者模式定義、場景實例程式碼詳解

#分析javascript觀察者模式的原理、功能

以上是JavaScript原生實作觀察者模式的範例_javascript技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn