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

blogpartsでjQueryを使うときの読み込み方

ブログパーツ javascript jquery

最近blogpartsでもjQueryを使うようになったので、blogpartsでjQueryを使うときのコードをまとめてみました。


(function () {
    //script tagのsrcの先頭部分を記述(自分のscript tagを取得するのに使用)
    var domain = 'http://example.com/bp/';

    //asから呼び出されるときの名前を指定(外部からはこの名前のみ見える)
    var name_space = 'blogparts_name_spase';

    //各ライブラリをfunction scopeへ展開
    var lib = loadLib(), $ = lib.$, jQuery = lib.jQuery, swfobject = lib.swfobject;

    //読み込まれた時点での最後のscript tagを取得
    var $script = $('script[src^="'+domain+'"]:last');

    $(function () {
        var options = (function (s) {
            var param = {};
            var dec = decodeURIComponent;
            //自身のscript tagに書かれた引数を取得
            //(srcの「#」以降にquery string形式で記述されていることを想定)
            $.each(s.attr('src').split('#').pop().split('&'), function () {
                var kv = (this + '').split('=');
                param[dec(kv[0])] = dec(kv[1]);
            } );
            return $.extend({
                //引数の初期値を設定
                'key' : 'value'
            }, param);
        })($script);

        //内部methodを記述。swfを出力する場合$scriptを基点に出力

        window[name_spase] = {
            //外部に公開する(asから呼ばれる)methodを記述
            'call_method' : function () {
            }
        };
    });

    function loadLib() {

        //各種必要なライブラリのsourceを記述(swfobject等)

        //jQuery本体のsourceを記述

        //noConflictでjQueryの衝突を回避。ここで代入されているjQueryや$は、先頭部分でvar libと一緒に宣言されているもの(function scope)
        jQuery = window.jQuery.noConflict( true );
        $ = jQuery;

        //使用するjQuery Pluginがあればここに記述

        //読み込んだライブラリを返す。これ以外にも読み込んだものがあれば追記する
        return {'$' : $, 'jQuery' : jQuery, 'swfobject' : swfobject};
    };

})();

上記のコードは以下の点に気をつけています。

  • 名前空間を汚さない (上記コードは「name_space」に指定した名前と、一時的にwindow.jQueryを使用)
  • 複数のversionのjQueryが読み込まれていても衝突しない (jQuery.noConflict( true )で先に読み込まれたjQuery objectを戻す)
  • ライブラリを全体のソースの最後に読み込む (ファイルの先頭にライブラリのコードがあると読みにくい)
  • jQuery Pluginの使用も想定 (window.jQueryを参照するようなPluginは使用できませんが、一般的なつくりのものなら使用可能)

blogpartsでは性質上環境を想定できない場合が多く、場合によってはprototype.jsと同時に読み込まれることもあるため依存性の低いjQueryは非常におすすめです。