jQueryのプチプラグイン化でjQueryを使った関数を広く使えるようにする
jQueryを使うと、簡単に関数を組むことができますが、
jQueryの性質上、$(function(){・・・});の中に書いた関数は、その中でしか呼び出すことができないため、
サイトの規模が大きくなってくると、ファイルを分けて必要なときだけ呼び出したいときなどに、不都合が生じます。
例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(function(){ example("#nav");//呼び出し可能 //呼び出したい関数 function example(elm){ elm = $(elm); elm.fadeOut(); return true; } }); $(function(){ example("#nav");//ここからだと呼び出せない }); |
サイト全体で使う共通の関数を作っておいて、common.jsとしてまとめておき、
各ページで必要なときだけ呼び出したくても、この方法だとできません。
jQueryをプラグイン化するときに使う方法を使うと、この問題を解決することができます。
上の例のような関数の場合だと、
|
1 2 3 4 5 6 7 8 | $.fn.example = function(){ var elm = this;//thisは$(this)でもOK elm.fadeOut(); return true; } |
といった具合に書き直すことで、
好きな場所で
|
1 2 3 | $(function(){ $("#nav").example(); }); |
と記述して、関数を呼び出すことができます。
関数を呼び出すときの引数を指定したい場合は、
オプションとして設定できるようにしておけば同様に関数を使うことができます。
そのときは、
|
1 2 3 4 5 6 7 8 9 10 11 12 | $.fn.example = function(options){ //オプション options = $.extend({ speed : "normal" }, options); var elm = this; elm.fadeOut(options.speed); } |
といった感じでオプションを設定できるようにすることで、
|
1 2 3 4 5 | $(function(){ $("#nav").example({ speed : "fast" }); }); |
の用な感じで 、関数に情報を渡すことができ、ある程度融通を利かすことができます。
何度もたくさんのページに同じ関数を使い回す際は、是非お試しください。
Author Profile
SHARE