jQueryを使う時の小ネタ集。断片的ではありますが、随時追記していきます〜。(記事の日付は最終更新日にしています。)
カプセル化
他のjQueryプラグインなどと競合しないようにカプセル化することは安全なプログラムを書く上で重要です。プラグインじゃなくてもjQueryファイルならそっと囲んでおいた方が良いでしょう。
よーーーく混同して間違えてしまうのですが、「$(function(){ });」とはまったく別物である。(後述)
;(function($) { // この括弧の中では変数はローカル変数として扱える。 var hensu = 96; // この中では、必ず$ = jQueryであり、安全である。 $('#hoge').fadeIn(); })(jQuery);
ページ読み込み判定など
ページの読み込みが完了した後に処理をはじめたい時の豆知識。「ready」イベントはjQueryを利用する場合ほぼ必ず使用することになるので必修です。
【ポイント】
readyイベントはDOMツリーの構築が完了した時点で発火します。画像の読み込みなどの完了は待ちませんので注意!画像の読み込みなども含む読み込み完了時に処理を発火させたい場合は「$(window).load(function(){});」がありますが、すでに非推奨(Deprecated | jQuery API Documentation)となっているので使用の際は慎重に。
■ readyイベント
jQueryはDOMを操作するので基本的にはDOMを全部読み込んでから発火させます。書き方は以下の2通りでどちらも意味は同じですが、下の短い方で慣れておくとスッキリ書けて良いですね。
$(document).ready(function() { // jQueryプログラムを記述。 });
$(function() { // jQueryプログラムを記述。 });
カプセル化の構文とすごく似ていてぼーっとしているとよく間違えます。カプセル化の括弧のなかに、さらにreadyイベントの括弧を書かないとページ読み込み前に処理が始まったりして変なエラーがでるはめになります…。
;(function($) { // ここに書いた処理はDOM読み込みと並行処理になる $(function() { // DOM読み込み後の処理はここに書く }); });
プラグイン化:オプションパラメータ
よく使う処理はプラグイン化したいですよね。対象要素やパラメータだけでも外部から指定できるようにできるとだいぶ使いやすくなります。
今回の例は一つの要素からの呼び出し、外部メソッドなしのシンプルなプラグインの例です。
/* * 【使用例】 * $('#nanika').myPlugin(); * $('#nanika').myPlugin({autLoop : true, speed : 1000}); */ ;(function($) { /* パラメータ定義:デフォルト値 */ var defaults = { autLoop: false, speed: 500 } // プラグインmyPluginの定義 $.fn.myPlugin = function(options){ // 使用例では、self = $('#nanika')となる。 var self = this; // 内部用パラメータを定義。 var slidePrm = {}; // パラメータのマージ。 // defaultsをベースに、optionsを上書きする。 slidePrm.settings = $.extend({}, defaults, options); // ここに処理を記述。 if(slidePrm.settings.autLoop) { // パラメータはこんな風に使える。 } // thisを返すことで、メソッドチェーン可能に。 return this; } })(jQuery);
プラグイン化はまだ経験不足なので模索中です…ご参考まで。
スクリプトファイルの圧縮
Javascript(jQuery)のソースファイルは本番アップ前に圧縮すると読み込み速度や実行速度が軽くなる可能性があります。コメントの削除や変数名の置き換えもしてくれ、ちょっとした隠蔽にもなるのでおすすめです。
- JavaScript圧縮 : Closure Compiler
圧縮前ソースを管理するのを忘れないようにしましょう。
0件のコメント
1 件のピンバック