nocblog

jQueryプラグイン作成テンプレートがものすごく便利

jQueryプラグイン

有名どころで[coliss.com/:title=コリス]とかあるけども、jQueryプラグインを紹介しているブロガーの方が最近すごく増えてきているとおもいます。いろんなプラグインがあるんだなぁと見て回っていたりしていたのですが、ふと、functionなんかで関数定義せずに全部jQueryプラグインにしてしまったほうが早いんじゃ・・と気づきjQueryプラグインを効率よく作る方法はないかと探したらありました。

jQuery Boilerplate

jQuery Boilerplate
http://jqueryboilerplate.com/

このテンプレートはMITライセンスで配布されているもので、MITなので著作権表示さえすれば自己責任で自由に使えるというものです。なので再頒布も可能です。

というわけでjQuery Boilerplateにコメントを割り振ったものをここに載せちゃいます。

ライセンス MIT License

;(<span class="synIdentifier">function</span> ($, <span class="synStatement">window</span>, <span class="synStatement">undefined</span>) <span class="synIdentifier">{</span>
    <span class="synComment">//プラグインネームの定義</span>
    <span class="synIdentifier">var</span> pluginName = <span class="synConstant">'defaultPluginName'</span>,

        <span class="synComment">//ドキュメント</span>
        <span class="synStatement">document</span> = <span class="synStatement">window</span>.<span class="synStatement">document</span>,

        <span class="synComment">//デフォルト値</span>
        defaults = <span class="synIdentifier">{</span>
            propertyName: <span class="synConstant">"value"</span>
        <span class="synIdentifier">}</span>;
    <span class="synComment">//プラグインの初期化</span>
    <span class="synIdentifier">function</span> Plugin(element, options) <span class="synIdentifier">{</span>

        <span class="synComment">//要素</span>
        <span class="synIdentifier">this</span>.element = element;

        <span class="synComment">//オプション</span>
        <span class="synIdentifier">this</span>.options = $.extend(<span class="synIdentifier">{}</span>, defaults, options);

        <span class="synComment">//デフォルト値設定</span>
        <span class="synIdentifier">this</span>._defaults = defaults;

        <span class="synComment">//プラグインネーム設定</span>
        <span class="synIdentifier">this</span>._name = pluginName;

        <span class="synComment">//初期化</span>
        <span class="synIdentifier">this</span>.init();
    <span class="synIdentifier">}</span>
    Plugin.prototype.init = <span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>
        <span class="synComment">//プラグインの初期化</span>
        console.log(<span class="synConstant">"プラグインの初期化を行っています"</span>, <span class="synIdentifier">this</span>.element, <span class="synIdentifier">this</span>.options);
    <span class="synIdentifier">}</span>;
    $.fn<span class="synIdentifier">[</span>pluginName<span class="synIdentifier">]</span> = <span class="synIdentifier">function</span> (options) <span class="synIdentifier">{</span>
        <span class="synStatement">return</span> <span class="synIdentifier">this</span>.each(<span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>

            <span class="synComment">//初期化</span>
            <span class="synStatement">if</span> (!$.data(<span class="synIdentifier">this</span>, <span class="synConstant">'plugin_'</span> + pluginName)) <span class="synIdentifier">{</span>
                console.log(<span class="synConstant">"初めてプラグインが実行されたのでプラグインの初期化を行います"</span>);
                $.data(<span class="synIdentifier">this</span>, <span class="synConstant">'plugin_'</span> + pluginName, <span class="synStatement">new</span> Plugin(<span class="synIdentifier">this</span>, options));
            <span class="synIdentifier">}</span>

            <span class="synComment">//実装</span>
            console.log(<span class="synConstant">"実装部分をここに書きます"</span>, <span class="synIdentifier">this</span>, options);
        <span class="synIdentifier">}</span>);
    <span class="synIdentifier">}</span>;
<span class="synIdentifier">}</span>(<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>, <span class="synStatement">window</span>));
$(<span class="synStatement">document</span>.body).defaultPluginName(<span class="synIdentifier">{</span>
    propertyName: <span class="synConstant">'a custom value'</span>
<span class="synIdentifier">}</span>);
Code language: JavaScript (javascript)

初期化関数

このプラグインが使用されたHTML要素が初めての使用だった場合必ず初期化関数が呼び出されます。同じ要素に対して二回目の実行を行なっても「プラグインの初期化を行っています」と書かれている場所は呼ばれません。

「実装部分をここに書きます」と書いてあるところは毎回呼ばれるので、初期化関数には要素のスタイルを適用したりして、毎回実行されるところにはデータの更新などの記述をすると便利になると思います。

2012年7月26日