[解決済み] jQueryプラグインの構文を理解したい
質問
jQueryのサイトでは、jQueryの基本的なプラグイン構文はこのように記載されています。
(function( $ ){
$.fn.myPlugin = function() {
// there's no need to do $(this) because
// "this" is already a jquery object
// $(this) would be the same as $($('#element'));
this.fadeIn('normal', function(){
// the this keyword is a DOM element
});
};
})( jQuery );
私は、Javascriptの観点からそこで何が起こっているのかを理解したいのです。なぜなら、それは私が以前に見たJSのどの構文にも従っていないように見えるからです。 これが私の質問のリストです。
-
function($)...を変数、例えば"the_function"に置き換えると、構文はこのようになります。
(the_function)( jQuery );
"( jQuery );"は何をしているのでしょうか? the_functionの周りの括弧は本当に必要ですか? なぜそこにあるのでしょうか? また、似たようなコードを他に挙げることはできますか?
-
それはfunction( $ )で始まっています。 つまり、私の知る限りでは決して実行されることのない関数を、すでに定義されている$というパラメータで作成しているのですね。 そこで何が起こっているのでしょうか?
助けてくれてありがとうございます!
どのように解決するのですか?
function(x){
x...
}
は単に名前のない関数で、1つの引数、"x"を受け取り、xで何かを行います。
一般的な変数名である'x'の代わりに、あまり一般的でない変数名ですが、合法的に使用できる$を使用することができます。
function($){
$...
}
式としてパースするように括弧でくくります。
(function($){
$....
})
関数を呼び出すには、関数の後ろに()をつけて、引数のリストを指定します。例えば、この関数を呼び出すには、引数として
$
の値として3を渡してこの関数を呼び出したいとしたら、次のようにします。
(function($){
$...
})(3);
一応、この関数を呼び出して、変数としてjQueryを渡してみましょう。
(function($){
$....
})(jQuery);
これは、1つの引数を取る新しい関数を作成し、その関数を呼び出して、値としてjQueryを渡します。
なぜ?
- jQueryで何かをするために毎回jQueryを書くのは面倒だからです。
を書けばいいじゃないですか。
$ = jQuery
?
- なぜなら、他の誰かが $ を他の意味に定義しているかもしれないからです。これは、$の他のいかなる意味もこの意味によって影が薄くなっていることを保証します。
関連
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み] jQueryのdocument.createElementと同等?
-
[解決済み] jQueryでドロップダウンリストの選択値を変更する
-
[解決済み] 内蔵DOMメソッドやPrototypeを使ってHTML文字列から新しいDOM要素を作成する
-
[解決済み] 非同期アロー関数のシンタックス
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] javascript includes() 大文字小文字を区別しない
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?