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

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

1. はじめに

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

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

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

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

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

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

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

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

基本的な方法は、

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

などのように、インスタンス化中にコールバックを直接設定することです。も使用できますが、明らかに柔軟性が不十分です。ダイアログを入力のように作成し、いつでもイベントを追加できるようにするにはどうすればよいでしょうか? 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. 構造

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: 'dialog one'
});

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

//do something

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

//do something

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

//do something

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

//do something

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

//do something

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

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

。 6. まとめ

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

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

関連する推奨事項:

Node.js でバイナリ データをエンコードおよびデコードするために Buffer を使用する方法

NodeJ の基本構文と型の紹介

以上がNodejs オブザーバー パターンの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。