6

これは、JavaScriptコードの構造に関する一般的な質問であり、適切に構造化されたコードに向かって正しい方向に進んでいるかどうかです。

私が持っている現在のコード：

(function (myNamespace, $, undefined) {
    myNamespace.className = {
       init:function { } // do stuff
    }
} (window.myNamespace= window.myNamespace|| {}, jQuery)));

(function (myNamespace, $, undefined) {
        myNamespace.className2 = {
           init:function { } // do stuff
        }
} (window.myNamespace= window.myNamespace|| {}, jQuery)));

明らかに、上記のコードでは、同じ名前空間を使用して（ページ/サイトのセクションごとに）、myNamespace.className.init()などを介して呼び出すことができます。必要に応じてこれらを組み合わせることもできますが、読みやすくするためにクラスをカプセル化しています。

今、私はメディエーターの概念についてhttp://addyosmani.com/largescalejavascript/を読んでいます。私の二次的な質問は、いつ（そしてもし）これらを使うべきかということです。className2から、明らかに私は次のことができます。

 myNamespace.className2 = {
               init:function { myNamespace.className.init() } // do stuff
            }

では、なぜこれがclassName likeにサブスクライブしmediator.subscribe("classNameInit")、そのイベントをclassNameで公開するのでしょうか。

JavaScriptの記述方法を変更している間、これを正しく行う必要があるため、コードの構造に関する提案を非常に受け入れています。

4

1 に答える 1

8

事前にすべての組み合わせがわからない、またはすべての組み合わせを想定する方が効率的である、無制限の組み合わせで一緒に機能する複数のピースがある場合に使用します。

ソーシャルメディアアプリを作成していて、ユーザーのリストをカプセル化するクラスを作成したとします。一部の画面では、リスト内のユーザーをクリックするとプロファイルが開きます。別の画面では、ユーザーをクリックすると、ユーザーが残したすべてのコメントが検索され、3番目の画面では別のことが起こります。

メディエーター/pubsubを使用せずにこれを作成する場合、最終的にはonclickイベントの一連のifステートメントになります...

UserList.prototype.onUserClick = function(user) {
     // Check if we're supposed to open a popup
     if (this.mode === 'profile')

     // Check for something else
     else if (this.mode === 'something else')

     // Check for another case
     else if (this.mode === 'foo')
}

Mediatorは、UserListが最終的に発生する可能性のあるすべての状況についての知識を持っている必要がないため、この問題の解決策です。代わりに、UserListの上記のコードは、ユーザーがクリックされたときにブロードキャストするように単純に改良できます...

UserList.prototype.onUserClick = function(user) {
    this.publish('user-click', user);
}

次に、他の各画面またはUIピースは、ユーザークリックメッセージを簡単にリッスンできます...

// On pages where there needs to be a popup profile
Mediator.onMessage('user-click', function(data) {
    showProfilePopup(data);
});

// Or perhaps on a search page
SearchBox.onMessage('user-click', function(data) {
    this.searchByUser(data);
});

さらに、メディエーターが輝き始めるのは、これらの他のUIコンポーネントが、ユーザークリックを起動するSearchBoxときに特に関心がないためUserList、ユーザークリックが公開されたときにのみ関心があり、ページ上の他のUIコントロールがユーザーを起動できるためです-同様にクリックすると、これらのピースがそれに反応する可能性があります。

ちなみにclassName = { }、クラスを作成していません。おそらく欲しいのはですclassName = function() { }。

于 2012-03-01T14:47:41.607 に答える