Higé au lait

jQuery プラグインを書くときのポイント

jQuery, JavaScript

input に事前に値を入力しておく - Higé au lait を例に jQuery のプラグイン（メソッド追加）書き方のポイントを書いて見る。（あくまでも私の書き方）

メソッドの追加法

(function($) {
    $.fn.[メソッド名] = function() {}
})(jQuery)

という書き方をしているけど、

jQuery.fn.[メソッド名] = function() {}

でも

jQuery.fn.extend({
    '[メソッド名]': function() {}
})

でもいけるので好きな書き方で。

メソッドの引数

$.fn.preInput = function(txt, options) {
	var default_options = {
		class_name: 'pre-input'
	};

//	options = $.merge(default_options, options || {});
	options = $.extend(default_options, options || {});

ここで重要なのは "$.merge" "$.extend"。

重要な引数（ここでは txt）はひとつの引数として、その他はあってもなくてもいいようにオブジェクトとしている。

そのオブジェクトとして渡された引数を $.merge $.extend メソッドで デフォルトで指定した変数を上書きしている。

$.merge $.extend 便利！！

追記修正 2009/2/0 23:25

$.merge メソッドではなく $.extend メソッドでした。

ややこしい。

jQuery オブジェクトを返す

jQuery のメソッドはほぼすべてが jQuery オブジェクトを返す。*1

jQuery オブジェクトを返すと何が便利かというと、

$('p').css('color', 'red').hover(function() { alert('hover') }, function() {}) 

のようにメソッドを繋げて書けること。

jQuery オブジェクトを返すために

return this.each() // each メソッドも jQuery オブジェクトを返す。

としている。

each メソッド: 各要素に対する処理

this.each(function() {
  ...
  var elm = $(this);
  ...
});

each メソッド内で $() で指定した各要素に対する処理をかいていくのだけど、ここで注意することは each(function() {}) 内の this は jQuery オブジェクトではなく 各エレメントそのものであるということ。

つまり、その要素に対して jQuery のメソッドを使いたければ上のように $(this) とする必要がある。

まとめ

4 点ほど書いたけど、この中でもっとも jQuery らしくするのは 3 番目に書いた jQuery オブジェクトを返すということだと思う。

jQuery はそれ自体で便利なメソッドが十分用意されているので、それらを組み合わせてちょこちょこっと手を加えればそれらしいものが簡単にできる。お試しあれ。

ツイートする

Permalink | コメント(0) | トラックバック(1)