匿名関数とjqueryでの初期化のための個別の名前付き関数


9

ページが読み込まれたときに物事を初期化するために使用されるいくつかのコードがあるとしましょう、それは次のようになります:

function initStuff() { ...}
...
$(document).ready(initStuff);

initStuff関数は、スニペットの3行目からのみ呼び出されます。二度と。したがって、通常、これは次のような匿名のコールバックに入れられます。

$(document).ready(function() { 
    //Body of initStuff
});

関数をコード内の専用の場所に置くことは、ready()の呼び出しでこれが初期化コードであることを明確にするため、実際には読みやすさには役立ちません。

どちらか一方を優先する他の理由はありますか?


4
最初のものはグローバル名前空間を乱雑にします。2番目を選択します。
riwalk

回答:


10

@ Stargazer712が述べたように、最初の名前空間はグローバル名前空間を乱雑にするため、2番目の名前空間は勝者の私見です。さて、2番目の例では無名関数を使用しているため、デバッガーのコールスタックは役に立たず、使用するデバッガーによって結果が異なります。通常、私がやっていることは次のとおりです:

$(document).ready(function MODULE_init() { 
    //Body of initStuff
});

そうすれば、グローバル名前空間が乱雑にならず、便利な呼び出しスタックが得られます。

私は、すべての匿名(まあ、もう匿名ではない;))関数定義で上記の規則を使用する傾向があります。これは、Firefox JSコードを閲覧するときに見つけた規則です。

編集:以上のことをすべて説明したところで、Oliverは単体テストで優れた点を示しています。上記は、より複雑な操作のラッパーとして機能することを目的としており、テストされていないコードを大量に格納することはありません。


+1デバッグについて言及するため。Node.jsコードで「名前付きコールバック」(この用語が実際に存在するかどうかわからない)の使用を見たことがあるので、これも良い方法だと思います。
Oliver Weiler

kangax.github.com/nfe名前付き関数式-この記事では、それらについて知りたいすべてのことを説明します。
Sean McMillan

7

この場合は問題にならないと思いますが、匿名のコールバック関数があり、他の匿名のコールバック関数を呼び出す場合は、最初のアプローチを使用する傾向があります。これにより、コードがより読みやすくなり、理解しやすくなります。

単体テストに関しては、initstuff機能を個別にテストできるため、最初のアプローチの方が優れています。


通常、これらの初期化関数には多くのコードはありません。それはいくつかの場所からいくつかのデータをフェッチするかもしれません、それだけです
マーティンN.

3

読みやすさ/デバッグ/テストなどのために、最初のものに行きます。ページ上のすべての関数に対してローカル名前空間を作成するだけで、グローバル名前空間の乱雑な問題を回避できます。ポールアイリッシュが推奨するオブジェクト表記スタイルを使用します(http://paulirish.com/2009/perf/のスライド13〜15を参照)

var MYPAGE = {
  onReady : function(){
  // init code
  },
  someOtherCallback : function(){}
};

jQuery(document).ready(MYPAGE.onReady);

2

グローバル名前空間を乱雑にせずにinitメソッドを登録する3つ目の方法もあります。

jQuery(function(){....});

それは短く、DOMドキュメントの検索を回避します

jQuery(document).ready(function(){...}); 

します。


+1:これは標準的な方法だと思いますが、$私が好む定義の矛盾による問題を回避するために:jQuery(function($) {...});
kevin cline
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.