質問: ### 疑問点 jQueryを勉強しはじめ、まだ日の浅いものです。 かなりの根本の部分がわからなくなってきてしまったため、ご教授いただけないでしょうか。 1つのJSファイルに複数の役割を持ったスクリプトを記述をする場合、1つ1つ$(function(){...});で囲んでいくのが作法として正しいのでしょうか? それともまとめて記述をしてしまっても良いのでしょうか? 例えば、スムーススクロール、ドロップダウンメニュー、等々...複数の自作スクリプトを1つのファイルにまとめている場合です。 **下に追記を加えています。** ### HTML ``` ``` ### (パターンA その1)1つずつ$(function(){...});で囲む ``` $(function(){ //スムーススクロールの記述 }); $(function(){ //ドロップダウンメニューの記述 }); //・・・ ``` ### (パターンA その2)$(function(){...});の中にまとめて記述 ``` $(function(){ //スムーススクロールの記述 //ドロップダウンメニューの記述 //・・・ }); ``` ついでに、CMSを使用する場合はjQueryをカプセル化するようなルールが職場にあり、下記のようなパターンもあり得ます。 ### (パターンB その1)カプセル化の中で1つずつ$(function(){...});で囲む ``` (function($){ $(function(){ //スムーススクロールの記述 }); $(function(){ //ドロップダウンメニューの記述 }); })(jQuery); ``` ### (パターンB その2)カプセル化の中でまとめて記述 ``` (function($){ //スムーススクロールの記述 //ドロップダウンメニューの記述 ・・・ })(jQuery); ``` ### (パターンB その3)1つ1つカプセル化 ``` (function($){ //スムーススクロールの記述 })(jQuery); (function($){ //ドロップダウンメニューの記述 })(jQuery); ``` 職場でも人によって書き方がまちまちで、このあたり気になりますので教えていただけないでしょうか? 例えば、このパターンの記述をしていると、こういった場面でメリット、デメリットがある等。 未熟なため説明が拙く申し訳ございません。 必要に応じて補足するようにいたしますのでどうぞ宜しくお願いいたします。 ### 補足 「スムーススクロールの記述」「ドロップダウンメニューの記述」というのはまったく別のところに使用している想定です。 例えば、「スムーススクロール」はページのトップへ戻るボタンに、「ドロップダウンメニュー」はグローバルナビゲーションに使用していたり、といった具合です。 それぞれに変数を指定したりすることもあります。 ### 追記 jQueryの入門書をあらためて確認してみたのですが、その中でそれぞれの役割ごとで$(function(){}で分けて記述しているものがあり、ますます混乱しています。(具体的に書籍名を書いた方がいいのでしょうか) 1つのHTMLページに対して外部JSファイルに章を追うごとにドロップダウンメニュー、コンテンツ切り替えタブ等々を追加していく内容なのですがそれぞれ下記のような記述がなされています。 ``` //1つのJS外部ファイルです //ドロップダウンメニュー $(function(){ $(セレクタ).click(function(){ var 変数... }); }); //コンテンツを切り替えるタブ $(function(){ $(セレクタ).click(function(){ var 変数... }); }); //下記、色々とサンプルが続くがすべて$(function(){}で囲まれている ``` もしかすると、後で読者が必要なサンプルをコピー&ペーストしやすいようにとの著者の配慮かもしれませんが、この当たりの意図は不明です。 自分自身の記述について、コメントを書いて工夫はしているものの、どこまでがどの処理だったか後で見返すと混乱することがあります。人の記述したものだと尚更です。 書籍のサンプルのような書き方(パターンA その1)1つずつ$(function(){...});で囲むだと正直見やすい、というのがあります。 ただ、すでにご回答いただいている通り、$(function(){}の処理を何度も記述するのはNGなのかなと思うところもあります。 このあたり、引き続きご意見いただけるととても助かります。
回答: もっともトラブルが起きにくい安全な書き方は ``` (function($){ $(function(){ //スムーススクロールの記述 //ドロップダウンメニューの記述 }); })(jQuery); ``` じゃないですかねぇ。 ``` ```