3

Websockets を使用して JavaScript でチャット ルーム アプリケーションに取り組んでいます。ただし、あちこちに jQuery の小さなスニペットがあることを除けば、JavaScript の経験はほとんどありません。

私の質問は、オブジェクトを自己完結型にし、同じオブジェクトの他のインスタンスに干渉することなく複数のインスタンスを作成できるようにするには、どのデザイン パターンを使用すればよいですか? また、'this' キーワードが現在のオブジェクト インスタンス以外のものを参照している場合に、パブリック オブジェクト プロパティを格納し、イベント ハンドラー内からそれらにアクセスする方法を知る必要があります。

コード例は素晴らしいでしょう！

現在、私はプロトタイプ デザイン パターンを使用していますが、機能しているように見えますが、控えめに言ってもあまりエレガントではありません...特にイベントの処理方法に関して、より良い方法はありますか

私は現在次のようなことをしています:

function Room( args ) {
    this.container = $( '#room-' + args.id );
    this.container.find( '.someBtn' ).on( 'click', this.someEventHandler() );
}

Room.prototype.someEventHandler = function() {
    var self = this;

    return function( event ) {
        console.log( self, this, event );
    }
}

ありがとう！

4

2 に答える 2

1

プロトタイプは十分に優れており、説明したタスクにはうまく機能します。

もっと知りたい場合は、読むことから逃れることはできません :-) そこには多くの設計パターンがあり、違いが小さいため、場合によっては好みの問題になります。

パターンに関する最高の読み物の 1 つを次に示します: JS デザイン パターン

モジュールパターンとrequirejsに関する別のもの：モジュールを使用したコードの編成

于 2013-01-11T16:23:59.107 に答える
0

要素を把握して $.proxy を使用するために Room に任せないことをお勧めします

function Room( args ) {
    this.container = $( args.elem ); //elem can be selector, dom element, or another jQuery object
    this.container.find( '.someBtn' ).on( 'click', $.proxy( this.clicked, this) );
}

Room.prototype.clicked = function(event) {
    console.log( this, event.currentTarget );
}

clickedメソッド内のthisroom インスタンス abd event.currentTargetは、ハンドラーがアタッチされている要素または委任されたターゲットです。http://api.jquery.com/event.currentTarget/を参照してください。

上記をさらにクリーンにするためのjQueryの保留中の機能リクエストがありますhttp://bugs.jquery.com/ticket/12031

于 2013-01-11T16:22:47.063 に答える