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 関連記事を追加しました）