jQueryプラグイン

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

jQuery Boilerplate

jQuery Boilerplate

http://jqueryboilerplate.com/

このテンプレートはMITライセンスで配布されているもので、MITなので著作権表示さえすれば自己責任で自由に使えるというものです。なので再頒布も可能です。 というわけでjQuery Boilerplateにコメントを割り振ったものをここに載せちゃいます。 ライセンス MIT License

;(function ($, window, undefined) {
    //プラグインネームの定義
    var pluginName = 'defaultPluginName',

        //ドキュメント
        document = window.document,

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

        //要素
        this.element = element;

        //オプション
        this.options = $.extend({}, defaults, options);

        //デフォルト値設定
        this._defaults = defaults;

        //プラグインネーム設定
        this._name = pluginName;

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

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

            //実装
            console.log("実装部分をここに書きます", this, options);
        });
    };
}(jQuery, window));
$(document.body).defaultPluginName({
    propertyName: 'a custom value'
});Code language: JavaScript (javascript)

初期化関数

このプラグインが使用されたHTML要素が初めての使用だった場合必ず初期化関数が呼び出されます。同じ要素に対して二回目の実行を行なっても「プラグインの初期化を行っています」と書かれている場所は呼ばれません。 「実装部分をここに書きます」と書いてあるところは毎回呼ばれるので、初期化関数には要素のスタイルを適用したりして、毎回実行されるところにはデータの更新などの記述をすると便利になると思います。

jQueryが使える？！

あの忌まわしいprototype汚染から逃れることが可能で、しかもクロスブラウザ対応にもできちゃうという魔法のフレームワークjQueryがはてなブログでは使えるの！？はたしてその真相はいかに！？

というわけでためしてみた

<script type="text/javascript">
$(document).ready(function(){
var hoge = $("<button>これはボタンです</button>");
    hoge.click(function(){
        alert("ボタンがあったらクリックしたくなるのが人間というものです。");
    });
    $(".entry-content:first").append(hoge);
});
</script>Code language: HTML, XML (xml)