[解決済み] なぜ無名関数を定義して、引数としてjQueryを渡すのか?
質問
backbone.jsのスクリーンキャストにある素晴らしいpeepcodeのデモコードに目を通しています。その中で、バックボーン コードはすべて、jQuery オブジェクトを渡される匿名関数で囲まれています。
(function($) {
// Backbone code in here
})(jQuery);
私自身のバックボーンコードでは、すべてのコードをjQuery DOMの'ready'イベントでラップしています。
$(function(){
// Backbone code in here
});
最初のアプローチのポイント/利点は何でしょうか?この方法で無名関数を作成すると、関数の引数として渡されたjQueryオブジェクトが直ちに実行され、$がjQueryオブジェクトであることが効果的に保証されます。これは、jQueryが'$'にバインドされていることを保証するため、またはこれを行う他の理由があるため、唯一のポイントでしょうか?
どのように解決するのですか?
表示された 2 つのコード ブロックは、いつ、なぜ実行されるかが劇的に異なっています。これらは互いに排他的ではありません。これらは同じ目的を果たすものではありません。
JavaScript モジュール
(function($) {
// Backbone code in here
})(jQuery);
これは、即座に呼び出される関数で実装された "JavaScript Module" パターンです。
- http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript
- http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
このコードの目的は、あなたのコードに "モジュール性"、プライバシー、およびカプセル化を提供することです。
この実装は、呼び出した関数から即座に呼び出される
(jQuery)
という括弧で囲まれています。括弧の中にjQueryを渡す目的は、グローバル変数へのローカルスコープを提供することです。これにより、グローバル変数の検索にかかるオーバーヘッドを軽減することができます。
$
変数を探すオーバーヘッドを減らすことができ、場合によってはミニフィアの圧縮や最適化をよりよく行うことができるようになります。
即座に呼び出される関数は、そう、即座に実行されます。関数の定義が完了するとすぐに、その関数が実行されます。
jQueryの"DOMReady"関数
これはjQueryの"DOMReady"関数のエイリアスです。 http://api.jquery.com/ready/
$(function(){
// Backbone code in here
});
jQuery の "DOMReady" 関数は、DOM が JavaScript コードによって操作される準備ができたときに実行されます。
BackboneコードにおけるモジュールとDOMReadyの比較
jQuery の DOMReady 関数の内部で Backbone コードを定義するのは悪い形式であり、アプリケーションのパフォーマンスに損害を与える可能性があります。この関数は、DOMが読み込まれ、操作できるようになるまで呼び出されることはありません。つまり、オブジェクトを定義する前に、ブラウザが少なくとも一度はDOMを解析するまで待つということです。
DOMReady関数の外側でBackboneオブジェクトを定義するのがより良いアイデアです。私は、他の多くの人々と同様、これをJavaScriptモジュールパターンの内部で行うことを好み、コードのカプセル化とプライバシーを提供できます。私は、モジュールの外側の必要なビットにアクセスするために、quot;Revealing Module"パターン(上記の最初のリンクを参照)を使用することがよくあります。
DOMReady 関数の外側でオブジェクトを定義し、それらを参照する何らかの方法を提供することにより、ブラウザが JavaScript を処理する際に先手を打つことができ、潜在的にユーザー エクスペリエンスを高速化することが可能になります。また、オブジェクトを移動するときに DOMREady 関数をさらに作成することを心配することなく、オブジェクトを移動できるため、コードがより柔軟なものになります。
たとえBackboneオブジェクトを別の場所で定義したとしても、DOMReady関数を使用する可能性があります。その理由は、多くのBackboneアプリが何らかの方法でDOMを操作する必要があるからです。これを行うには、DOMの準備が整うまで待つ必要があり、したがって、アプリケーションの定義後にDOMReady関数を使用してアプリケーションを開始する必要があります。
この例はウェブ上でたくさん見つかりますが、ここではモジュールと DOMReady 関数の両方を使用した、非常に基本的な実装を紹介します。
// Define "MyApp" as a revealing module
MyApp = (function(Backbone, $){
var View = Backbone.View.extend({
// do stuff here
});
return {
init: function(){
var view = new View();
$("#some-div").html(view.render().el);
}
};
})(Backbone, jQuery);
// Run "MyApp" in DOMReady
$(function(){
MyApp.init();
});
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み] JavaScript / jQuery のイベントバインディングを Firebug などでデバッグするには?
-
[解決済み] カプセル化された匿名関数の構文について説明します。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ