Nodejs オブザーバーパターンの概要-jsチュートリアル-php.cn

Nodejs オブザーバーパターンの概要

不言

リリース： 2018-06-30 16:11:12

オリジナル

1376 人が閲覧しました

この記事では主に Nodejs オブザーバーモードに関する情報を紹介しますので、必要な方は参考にしてください

1. はじめに

最近、Nodejs の API をレビューし、さらに新しい機能を使用してみます。より高いレベルで習得するために、この API の概要は、英語版の単純な中国語版とは異なります。まずは、皆さんのお役に立てれば幸いです。コアイベント

Nodejs イベントは、Nodejs のコアメカニズムをサポートするオブザーバーパターンを実装し、http/fs/mongoose などはすべてイベントを継承し、リスニングイベントを追加できます。この設計パターンは、クライアント側のコンポーネントプログラミングのアイデアでよく使用されます。まず、このパターンを簡単に理解しましょう。

私が初めてオブザーバーパターンに触れたのは、Extjs フレームワークの Ext.util.observable ソースコードでした。当時、私は JS に慣れていなかったので、このパターンが非常に強力だと感じたのも初めてでした。後になって、underscore.js のソースコードにもこのパターンが含まれていることが分かりました。コンポーネントを作成するときは、後者のほうがシンプルで洗練されています。

オブザーバーモードは、on('show', callback) などの監視イベントをオブジェクトに追加することであり、show などの条件を満たしたときにオブジェクトによってトリガーされます。ブラウザ自体が監視メカニズムを実装しています。ドームのために。

入力にkeyup監視を追加すると、その値を出力することが目的になります

$( &#39;input&#39; ).on( &#39;keyup&#39;, function(){
   console.log( this.value );
} );

ログイン後にコピー

このように、内容を入力すると、その値がログに出力されます。

しかし、Dialog などのコンポーネントを作成する場合、最も一般的に使用される表示/非表示イベントをどのように監視すればよいのでしょうか?

基本的な方法は、

var dialog = new Dialog({
  content: &#39;这里是弹出框的内容&#39;,
  show: function(){
    console.log( &#39;当弹框时输出此段内容&#39; );
  }
});

ログイン後にコピー

などのように、インスタンス化中にコールバックを直接設定することです。も使用できますが、明らかに柔軟性が不十分です。ダイアログを入力のように作成し、いつでもイベントを追加できるようにするにはどうすればよいでしょうか? 2. オブザーバーモードの実装

まず、基本的な監視を提供する Events オブジェクトを実装します。イベントは json の形式で、オブジェクトの _events のスタックにプッシュします

var Events = {
  on: function( name, callback){
    this._events = this._events || {};
    this._events[ name ] = this._events[ name ] || [];
    this._events[ name ].push( callback );
  },
  emit: function( name ){
    this._events = this._events || {};
    var args = Array.prototype.slice.call( arguments, 1 ),
       me = this;
    if( this._events[ name ] ){
      $.each( this._events[ name ], function( k, v ){
        v.call( me, args );
      } )
    }
  }   
}

ログイン後にコピー

次に、オブジェクトの属性をコピーする関数を抽象化します

function extend( source ){
  var args = Array.prototype.slice.call( arguments, 1 );
  for( var i = 0, parent; parent = args[i]; i++ ){
    for( var prop in parent ){
      source[ prop ] = parent[ prop ];
    }
  }
}

ログイン後にコピー

ダイアログを実装します。

作成のみ; メソッド: 表示 / 非表示; イベント: 表示 / 非表示;

効果を見るときは、このスタイルを追加します

コンポーネントを実装します

拡張属性

インスタンスを生成し、3 つの表示イベントと非表示リスニングイベントを追加します

.dialog{
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -100px;
  width: 200px;
  height: 120px;
  background: #fff;
  border: 5px solid #afafaf;
}

ログイン後にコピー

6 つの異なる表示イベントと非表示イベントを 6 回追加しました。

dialog.show()を実行すると、対応するログが3つ出力されます。追加されたイベントは、図に示すように、dialog._events に保存されます

追加された 3 つのショーはすべて正常に出力され、イベントは _events 属性に保存されます

nodejs Events もこのプロセスを実装します。

3. 構造 Nodejs オブザーバーパターンの概要

var Dialog = function( config ){
  this.config = config;
  this.init( this.config );
};

ログイン後にコピー

4. API

が提供するメソッドはすべて、addListener の略称であり、他の属性はインスタンスにリスニングイベントを追加します。名前が示唆しているので、簡単に説明します

extend( Dialog.prototype, {

  init: function( config ){
    this.render( config )
  },

  render: function( config ){
    this.el = $( &#39;<p>&#39; ).addClass( &#39;dialog&#39; );
    this.el.html( config.content );
    $( &#39;body&#39; ).append( this.el );
  },

  show: function( param ){
    this.el.fadeIn();
    this.emit( &#39;show&#39;, param );
  },

  hide: function( param ){
    this.el.fadeOut();
    this.emit( &#39;hide&#39;, param );
  }

}, Events );

ログイン後にコピー

5. アプリケーション

上記の API セクションで示したように、通常はイベントを直接インスタンス化するだけです

ただし、先ほどのダイアログなどのnodejs側で、ダイアログにイベントの機能も持たせるのはどうでしょうか？ Extjs

によって実装された拡張ソリューションを使用して、ダイアログビルダーを作成できます

var dialog = window.dialog = new Dialog({
  content: &#39;dialog one&#39;
});

dialog.on( &#39;show&#39;, function( txt ){
  console.log( &#39;dialog show one &#39; + txt );
} );

//do something

dialog.on( &#39;show&#39;, function( txt ){
  console.log( &#39;dialog show two &#39; + txt );
} );

//do something

dialog.on( &#39;show&#39;, function( txt ){
  console.log( &#39;dialog show three &#39; + txt );
} );

//do something

dialog.on( &#39;hide&#39;, function( txt ){
  console.log( &#39;dialog hide one &#39; + txt );
} );

//do something

dialog.on( &#39;hide&#39;, function( txt ){
  console.log( &#39;dialog hide two &#39; + txt );
} );

//do something

dialog.on( &#39;hide&#39;, function( txt ){
  console.log( &#39;dialog hide three &#39; + txt );
} );

ログイン後にコピー

このようにして、メソッドが呼び出されると、イベントがトリガーされます

。 6. まとめ

nodejs は非常に優れた監視メカニズムを備えており、nodejs の最も特徴的な I/O モードもサポートしています。たとえば、http サービスを開始すると、そのサービスが監視されます。 connect/close、http.request の場合、データ/終了などを監視します。監視メカニズムを理解することは、nodejs の基礎を学習して理解するのに有益であり、プログラミング的思考の向上にも役立ちます。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。