続・jQueryの書き方


ノンプログラマに jQuery のおまじない部分でつまずくと言われたのと、自分も少し使い分けが整理できてきたのでまとめてみる。意外とルーブとか条件判定は悩まんけど、その前後にあるごにょごにょした部分がひかかるのだとか。

誤解を恐れずにまとめると JavaScript はグローバル変数を汚染しやすく、コンフリクトしたら嫌なので回避しようぜってコトよね。
んで、その書き方がいくつかありますよと。

<head> タグ内でサクッと済ませたい時

1
2
3
jQuery(function($){
    // $('#id').click() とかココに書いてく…
});

Onload前に実行したい場合にこう書いてます。
<head> タグ内だけじゃなく別ファイルでも使えるけど、ちょっと試したい時とか、簡単な処理の時によく使うかな。

$(function(){…}); って書き方もあるけど、古くは prototype.js と競合したり、気が付けばWordPressのデフォルトで呼ばれる jQuery が noConfrict になってて使えなかったりするので、こう書くようにしてます。
また、noConfrict をあえて宣言して $ を使わず、$j = jQuery; として置き換えたり、潔く全て jQuery(…) で書いてもいいんだけど、$ で書くのが手軽だし最初にこう書くだけで、その中ではいつも通りというのが楽なんよね。

先読みするファイル内で jQuery 使いたい時

1
2
3
(function($){
    // $('#id').click() とかココに書いてく…
})(jQuery);

自前の関数とかでも jQuery 使いたい時とか。別ファイルだと読み込みのタイミングで評価されるので、実行部分よりも関数とかあらかじめ指定する時によく使うかな。
(function(){})(); って書き方は function ooo(){…} 的な指定と ooo(); って実行をまとめて書いてるだけです。これに引数として jQuery を渡して、内側では $ で記述できるようにしてます。

あ、でも、関数定義して他の js ファイルからもこれを利用したい場合は、そのままでは使えません。その場合は、下記のようにしてあえてグローバルにしたりします。

1
2
3
4
5
6
(function($){
    function ooo(){
        ...
    }
    window.ooo = ooo;
})(jQuery);

※蛇足かも…

jQuery のプラグイン

1
2
3
jQuery.fn.ooo = function(){
...
};

これプラグイン書かないと使わないので、なんでこんな書き方なんだという説明だけしとく。
jQuery も当たり前にコンフリクト対策してあって、グローバル変数は jQuery と $ しか使わないように工夫されてます。プラグインであってもこのルールに乗っかれるようになってて、jQuery.fn.ooo のように指定すれば、$(‘#id’).ooo() といった統一の書き方になるように作られてます。

たまにコンフリクト考えてなくて $.fn.ooo から書かれてるプラグインあったりするので、その場合は2番目の方法でプラグイン指定を囲んでやると良いす。一行目に (function($){ 、最後の行に })(jQuery); って書けばうまく行く事もあれば、行かない事もあるよ。

あ、ちなみに JavaScript では下記2つは大体同じ意味です。
※厳密には評価されるタイミングが違う

1
2
3
4
5
6
7
function ooo() {
...
}

var ooo = function(){
...
};

うーん、あんまりまとまってないかな?
んでも、書き方はイロイロあるけど簡潔に書かれてるものが好まれてるだけと思う。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です