ラストインコールバックをサポートするデザインパターン（ハッシュ変更の処理など）

Question

私のWebページでは、すべてブラウザのlocation.hashと対話する複数の独立したプラグインがあります。 （私は自分の仕事を分離し続けるコードのビットを持っているが、それはこの質問には無関係です。）例えば、私が持っている：

// file1.js 
$(window).bind('hashchange', function(){ ... }); 

// file2.js 
$(window).bind('hashchange', function(){ ... }); 

必要に応じて、上記の作品ページのロード時後のハッシュ変化。しかし、私はこのコードを最初にロードするどのハッシュでも処理する必要があります。このコードを書くと：

// file1.js 
$(window).bind('hashchange', function(){ ... }).trigger('hashchange'); 

// file2.js 
$(window).bind('hashchange', function(){ ... }).trigger('hashchange'); 

...最初のコードセットが2回実行されます。望ましくない

hashchangeイベントを1回だけトリガするのに適したパターンは、すべてのイベントハンドラを配置した後です。

Answer 1

一つのオプションを明示的、ファイルごとに別々の機能に出て処理コードを分離し、ちょうどそのコードを呼び出すことです：おそらく

// file1.js 
function doStuff1(){ ... }; 
$(window).bind('hashchange',doStuff1); 
doStuff1(); 

// file2.js 
function doStuff2(){ ... }; 
$(window).bind('hashchange',doStuff2); 
doStuff2(); 

Answer 2

1つのオプションは、イベントハンドラを名前空間にあるとトリガー：

// file1.js 
$(window).bind('hashchange.file1', function(){...}).trigger('hashchange.file1'); 

// file2.js 
$(window).bind('hashchange.file2', function(){...}).trigger('hashchange.file2'); 

これは一般的なhashchangeイベントが実際に発生したときに両方のハンドラが実行される原因となるが、唯一のトリガされたときに実行する名前空間ハンドラが発生します。

Answer 3

：

// file1.js 
$(window).bind('hashchange', function(){ ... }) 

// file2.js 
$(window).bind('hashchange', function(){ ... }) 

// Actual page 
$(window).trigger('hashchange'); 

Answer 4

でした。この作品のようなもの？

function doStuff(){ 

    //run some code only on the first execution 
    alert('execute miscellaneous code once on load'); 


    function myHandler(){ 
     alert('myHandler fired'); 
    } 


    //or just execute the function that gets returned below 
    myHandler(); 

    // return myHandler as the event handler 
    return myHandler; 

}; 

$(window).bind('hashchange', doStuff()); 

これは、あなたに、その後のhashchangeイベントとは異なる初期ロードを処理するための柔軟性を提供します。

更新：

は上記のサンプルコードを変更しました。 Here's a fiddle.

Answer 5

私たちのWebアプリケーションは、ページ内のさまざまなプラグインに基づいており、その状態には＃キーを使用します。

しかし、プラグインレベルではありません。
以下のコードは、アプリのメインjsファイルの一部です。
これは解析時に1回実行されます。 $b.pub

var hashChanged = function(){ 
    //action to do when the # changed 
    $b.pub(...); 
}; 
/* avoid an error on older browsers */ 
if('onhashchange' in window){ 
    window.onhashchange = hashChanged; 
} 
//start the app, the same way as an # change 
hashChanged(); 

は何をすべきかのプラグインを伝えるためにpub/subのイベンティングの一種です。