質問編集履歴
3
HTMLソースと追記の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,7 +7,16 @@
|
|
|
7
7
|
|
|
8
8
|
例えば、スムーススクロール、ドロップダウンメニュー、等々…複数の自作スクリプトを１つのファイルにまとめている場合です。
|
|
9
9
|
|
|
10
|
+
**下に追記を加えています。**
|
|
10
11
|
|
|
12
|
+
###HTML
|
|
13
|
+
```
|
|
14
|
+
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
15
|
+
<script src="script.js"></script><!--自作スクリプト-->
|
|
16
|
+
</body>
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
|
|
11
20
|
###（パターンA その1）1つずつ$(function(){…});で囲む
|
|
12
21
|
|
|
13
22
|
```javascript
|
|
@@ -91,4 +100,35 @@
|
|
|
91
100
|
###補足
|
|
92
101
|
「スムーススクロールの記述」「ドロップダウンメニューの記述」というのはまったく別のところに使用している想定です。
|
|
93
102
|
例えば、「スムーススクロール」はページのトップへ戻るボタンに、「ドロップダウンメニュー」はグローバルナビゲーションに使用していたり、といった具合です。
|
|
94
|
-
それぞれに変数を指定したりすることもあります。
|
|
103
|
+
それぞれに変数を指定したりすることもあります。
|
|
104
|
+
|
|
105
|
+
###追記
|
|
106
|
+
jQueryの入門書をあらためて確認してみたのですが、その中でそれぞれの役割ごとで$(function(){}で分けて記述しているものがあり、ますます混乱しています。（具体的に書籍名を書いた方がいいのでしょうか）
|
|
107
|
+
|
|
108
|
+
１つのHTMLページに対して外部JSファイルに章を追うごとにドロップダウンメニュー、コンテンツ切り替えタブ等々を追加していく内容なのですがそれぞれ下記のような記述がなされています。
|
|
109
|
+
```javascript
|
|
110
|
+
//1つのJS外部ファイルです
|
|
111
|
+
|
|
112
|
+
//ドロップダウンメニュー
|
|
113
|
+
$(function(){
|
|
114
|
+
$(セレクタ).click(function(){
|
|
115
|
+
var 変数…
|
|
116
|
+
});
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
//コンテンツを切り替えるタブ
|
|
120
|
+
$(function(){
|
|
121
|
+
$(セレクタ).click(function(){
|
|
122
|
+
var 変数…
|
|
123
|
+
});
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
//下記、色々とサンプルが続くがすべて$(function(){}で囲まれている
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
もしかすると、後で読者が必要なサンプルをコピー&ペーストしやすいようにとの著者の配慮かもしれませんが、この当たりの意図は不明です。
|
|
130
|
+
|
|
131
|
+
自分自身の記述について、コメントを書いて工夫はしているものの、どこまでがどの処理だったか後で見返すと混乱することがあります。人の記述したものだと尚更です。
|
|
132
|
+
書籍のサンプルのような書き方（パターンA その1）1つずつ$(function(){…});で囲むだと正直見やすい、というのがあります。
|
|
133
|
+
ただ、すでにご回答いただいている通り、$(function(){}の処理を何度も記述するのはNGなのかなと思うところもあります。
|
|
134
|
+
このあたり、引き続きご意見いただけるととても助かります。
|
2
補足の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -85,4 +85,10 @@
|
|
|
85
85
|
例えば、このパターンの記述をしていると、こういった場面でメリット、デメリットがある等。
|
|
86
86
|
|
|
87
87
|
未熟なため説明が拙く申し訳ございません。
|
|
88
|
-
必要に応じて補足するようにいたしますのでどうぞ宜しくお願いいたします。
|
|
88
|
+
必要に応じて補足するようにいたしますのでどうぞ宜しくお願いいたします。
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
###補足
|
|
92
|
+
「スムーススクロールの記述」「ドロップダウンメニューの記述」というのはまったく別のところに使用している想定です。
|
|
93
|
+
例えば、「スムーススクロール」はページのトップへ戻るボタンに、「ドロップダウンメニュー」はグローバルナビゲーションに使用していたり、といった具合です。
|
|
94
|
+
それぞれに変数を指定したりすることもあります。
|
1
言語の付け忘れ
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
})(jQuery);
|
|
66
66
|
```
|
|
67
67
|
###（パターンB その3）１つ１つカプセル化
|
|
68
|
-
```
|
|
68
|
+
```javascript
|
|
69
69
|
(function($){
|
|
70
70
|
|
|
71
71
|
//スムーススクロールの記述
|