JavaScript でオブザーバーパターンを実装する方法-jsチュートリアル-php.cn

JavaScript でオブザーバーパターンを実装する方法

亚连

リリース： 2018-06-20 16:18:58

オリジナル

1566 人が閲覧しました

以下のエディターは、オブザーバーパターンの JavaScript ネイティブ実装の例を共有します。これは優れた参考値であり、皆さんの役に立つことを願っています。エディターをフォローして見てみましょう

オブザーバーパターンはパブリッシュ/サブスクライブパターンとも呼ばれ、複数のオブザーバーオブジェクトが特定のトピックオブジェクトとステータスを同時に監視できるようにする 1 対多の関係を定義します。トピックオブジェクトの変更は、監視しているすべてのオブジェクトに通知されます。トピックとオブザーバーの 2 種類のオブジェクトで構成されます。トピックはイベントの発行を担当し、オブザーバーはこれらのイベントをサブスクライブすることでサブジェクトを監視します。パブリッシャーとサブスクライバーは完全に分離されており、お互いの存在を知りません。カスタムイベントの名前を共有するだけです。

Nodejs では、このモードのネイティブサポートは EventEmitter を通じて実装されます。

JavaScript のイベントリスニングメカニズムは、オブザーバーパターンとして理解できます。 onclick を通じてイベントをバインドし、インタラクティブな動作を通じてイベントをトリガーするか、イベントをアクティブにトリガーします。

以下は JS でカスタマイズされた PubSub です。次のコードを注意深く読むと、オブザーバーパターンを理解するのに役立ちます。

1. Pubsubクラスを定義します

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

ログイン後にコピー

2. イベント発行の実装を実装します

//传入事件类型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);
  }
 }

ログイン後にコピー

説明するのは配列です。コード shift.call(arguments) では、arguments オブジェクトは関数の組み込みオブジェクトであり、メソッドの呼び出し時に渡される実際のパラメーターグループを取得できます。 shift メソッドは、配列の最初のパラメーター (型 type) を取り出します。

4. イベントの購読解除を実装します

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);
      }
     }
    }
   }
  }
 }

ログイン後にコピー

5. テスト

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;);

ログイン後にコピー

上記は私があなたのためにまとめたものです。みんなの役に立つ未来。