1. ホーム
  2. javascript

[解決済み] jQueryプラグインの構文を理解したい

2023-03-27 10:18:27

質問

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のどの構文にも従っていないように見えるからです。 これが私の質問のリストです。

  1. function($)...を変数、例えば"the_function"に置き換えると、構文はこのようになります。

     (the_function)( jQuery );
    
    

    "( jQuery );"は何をしているのでしょうか? the_functionの周りの括弧は本当に必要ですか? なぜそこにあるのでしょうか? また、似たようなコードを他に挙げることはできますか?

  2. それはfunction( $ )で始まっています。 つまり、私の知る限りでは決して実行されることのない関数を、すでに定義されている$というパラメータで作成しているのですね。 そこで何が起こっているのでしょうか?

助けてくれてありがとうございます!

どのように解決するのですか?

function(x){ 
    x...
}

は単に名前のない関数で、1つの引数、"x"を受け取り、xで何かを行います。

一般的な変数名である'x'の代わりに、あまり一般的でない変数名ですが、合法的に使用できる$を使用することができます。

function($){ 
    $...
}

式としてパースするように括弧でくくります。

(function($){
    $....
})

関数を呼び出すには、関数の後ろに()をつけて、引数のリストを指定します。例えば、この関数を呼び出すには、引数として $ の値として3を渡してこの関数を呼び出したいとしたら、次のようにします。

(function($){
    $...
})(3);

一応、この関数を呼び出して、変数としてjQueryを渡してみましょう。

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

これは、1つの引数を取る新しい関数を作成し、その関数を呼び出して、値としてjQueryを渡します。

なぜ?

  • jQueryで何かをするために毎回jQueryを書くのは面倒だからです。

を書けばいいじゃないですか。 $ = jQuery ?

  • なぜなら、他の誰かが $ を他の意味に定義しているかもしれないからです。これは、$の他のいかなる意味もこの意味によって影が薄くなっていることを保証します。