1月 21, 2012
from tech.kayac.com

jQuery pluginの書き方

(function($) {
    //このPluginの名前
    var name_space = 'basePlugin';
    $.fn[name_space] = function(options) {
        //いったん退避
        var elements = this;

        //設定情報の構築
        var settings = $.extend({
            //optionの初期値を設定
            'param' : 'value'
        }, options);

        //内部用method
        var inner_method = function () {
            //内部の共通処理の記述
        };

        //要素を一個ずつ処理
        elements.each(function() {
            $(this)
                //イベント等の設定
                .keyup(inner_method)
            ;
        });

        //method chain
        return this;
    };
})(jQuery);

注意点としてはこんな感じです。

  • window.$に依存しない ($.noConflict()時にも動くように)
  • 最後はreturn this; (method chainが切れるので)
  • 複数要素が指定されている場合を考慮する (Plugin内のthisは.eachで処理する)
  • 名前空間を汚染しない (無名関数に閉じているのでPlugin自体の変数も外部から見えない)

(出典: tech.kayac.com)