読者です 読者をやめる 読者になる 読者になる

jQuery Pluginの書き方

javascript jquery plugin

最近いくつかjQueryPluginを書く機会があったのでちょっとまとめてみようと思います。


(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自体の変数も外部から見えない)
関連記事

jQueryを使うときに気をつけるべき8のポイント

jQuery Plugin作成時の3つの注意点

(2009/1/8 関連記事を追加しました)