🧊

jQuery Plugin Design Patterns

って検索したのにコレだ！って情報が出てこなかったので、自分でメモしておく。

  • jQueryのプラグインを書くにあたり、そもそもどういうやり方があるのか
  • 気をつけるべきポイントはどこなのか

みたいなことのメモ。
イマサラ感は気にしない。

書き方は2パターン

  • $(elm).hoge();
  • $.hoge()

見慣れた記法ですね。
jQueryさまさま。

$(elm).hoge();

セレクターでひっかけてきた要素に対して何かしたい場合はコレ。

// 基本形
$.fn.myPlugin = function() {};

// いっぱいあるならこうするのがきれい
$.fn.extend({
  myPlugin: function() {},
  myPlugin2: function() {},
});

// サンプル
$.fn.colorRed = function() {
  // thisが$(elm)
  this.css('color', 'red');
  return this;
};

$('h1').colorRed();

$.hoge()

これは $.ajax() みたく、別に対象の要素がない場合。

// 直接プロパティにくっつける
$.myPlugin = function() {};

// extendでも一緒
$.extend({
  myPlugin: function() {},
  myPlugin2: function() {}
});

// サンプル
$.alertNow = function() {
  var d = new Date;
  alert(d.toLocaleString());
};
$.alertNow();

そのほか

基本

お行儀よくするために、ちゃんとスコープはしぼる。

;(function ($, window, document, undefined) {
  // your plugin here..
})(jQuery, window, document);

競合してないか

どこまで厳密にやるかです。

  • $に既に同名で拡張がされてないか
  • $.data() とかで要素をマーキングしておく

などすることが多い模様。

return this

特定の要素に対してなんかするとき、チェーンさせたいですよね！ということで。

$(elm).colorRed().addClass('piyo');
// ってできるように

$.fn.colorRed = function() {
  this.css('color', 'red');
  return this; // jQueryなやつを返す
  // return this.css('color', 'red'); でもOK
};

複数要素を前提に

jQueryな要素にjQueryなことするだけなら気にしなくてもいいけど、違う場合に困ります。

$.fn.myPlugin = function ( options ) {
  return this.each(function () {
    new Plugin(this, options);
  });
};

基本的にeachしちゃっていいと思う。

オプション

直接は関係ないけど。

var defaultOption = {
  hoge: 1,
  fuga: 'piyo'
};

$.extend(defaultOption, option);

ってな具合に必要なオプションだけ上書きできるしコードもすっきり。
オプションのネスト具合には注意。

jQuery.UIに学ぶ

ここに書いた内容では漠然とした不安がある・・もっともっと厳密にやるべき・・な場合もきっとあるはずで、
そういうときは以下のリンクが参考になる気がしました。

参考: https://github.com/jquery-boilerplate/jquery-patterns

jQuery.UI の $.widget のライトなやつないかしら。

イベント系にフックするなら

jQuery.event.specialとかそのへんから見るとよさげ。

参考：Ben Alman » jQuery special events