東日本橋の制作・開発会社 プレスマンのスタッフブログ

PRESSMAN*Tech

プログラミング

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

JavaScriptの変数のスコープは慣れないとちょっとわかりにくいです。
クロージャも無名関数もわかりにくいんじゃないでしょうか。
しかし、例によってこれらについて書いてある記事はググればいくらでもあるので割愛。
それに、いくら解説を読んでも実際たくさんのコードを書かないとなかなか理解できません。

jQuery用に書かれたJavaScriptをみるとよく

(function($){
    var hoge = function(){
        alert($("#hoge").val());
    };
    hoge();
})(jQuery);


みたいに書かれています。ぱっと見るといったい何をやっているのか意味不明ですよね。
これは何をやっているか理解すると「おぉー」と言う感じです。

 

分解して書くと下記と似たような意味になります。

var piyo = function(fuga) {
        var hoge = function() {
            var foo = fuga("#hoge2");
            alert(foo.val());
        };
        hoge();
    };
piyo(jQuery);

関数を作ってそれにjQueryという引数を渡して実行しているだけです。
$は普通にただの変数なので特別に考える必要はないです。(fugaに書き直しています)
JavaScriptは変数に関数を入れられる(というか参照値が入るのだけど)ことを覚えておけばわかりやすいと思います。

で、これが何なの?別にこんなことすることないじゃんと言う話になりますが、利点は当然あります。
まず、$が別に定義されてしまっていた場合です。例えば、prototype.jsとjQueryを同時に使う場合がこれにあたります。
どちらも$が特別な意味を持った変数です。jQueryでは変数jQuery == $ なので無名関数の引数$にjQueryを渡して実行して、あげればprototype.jsとの混在環境でもfunction($){}の中では普段と同じように$("#hoge")のように書くことができます。
あとは、変数のスコープの問題です。色々なライブラリを組み合わせれば当然変数名が被るでしょう。しかし、function($){}の中で、varをつけて変数を宣言しておけばこの中だけのスコープになるので、他のライブラリに影響しなくなります。

JavaScriptはスコープ、無名関数、クロージャがわかるようになると書くのが非常に楽しくなります。あと、applyもキモです。applyに関してはまた後日。多分。

この記事をシェアする:

-プログラミング
-,

Copyright© PRESSMAN*Tech , 2020 All Rights Reserved Powered by STINGER.