Whoocus

以前の記事で、jQueryのプラグインを簡単に作成してみたが、まだまだ融通が利かない。

そこで、いろんなライブラリを解読してみて、そこそこ使える形式が見えてきたので記載する。
この記述方法だと、内部からも外部からも関数をコールできるので、後にパラメータを渡すことができる。

jquery.sample.js

 
/*
 * 自作プラグインサンプル
 */
;(function($){
	var sample = function(target, opts){
		//デフォルトパラメータ
		this.defaults = {
	        param : 'hoge',
	        params : [{title : 'DefTitle1', name: 'DefName1', id: '111' },
	                  {title : 'DefTitle2', name: 'DefName2', id: '222' }
	                 ],
	        width :  '1200px'
		}
		//パラメータ上書き
		$.extend(this.defaults, opts || {});
		
		//関数コール
		this.init();
		this.reload(this.defaults.width);
	
	}
	//関数定義
	sample.prototype = {
		init: function() {
			alert("Init:" + this.defaults.param);
		},
		reload: function(str) {
			alert("Reload:" + str);
		}
	};

	//-----------------
	// エントリポイント
	//-----------------
    $.fn.sample = function(options){
	    //オプション取得
	    opts = jQuery.extend({}, $.fn.sample.defaults, options);
	
//	    return this.each(function(){
//			new sample(this, options, temp);
//		});
		
		if ( $(this).length > 1) {
			var _instances = [];
			$(this).each(function(i) {
				_instances[i] = new sample(this, options);
			});
			return _instances;
		} else {
			return new sample(this, options);
		}
    };
    
	//-----------------
    //デフォルト値
	//-----------------
//    $.fn.sample.defaults = {
//        param : 'hoge',
//        params : [{title : 'defTitle1', name: 'defName1', id: '111' },
//                  {title : 'defTitle2', name: 'defName2', id: '222' }
//                 ],
//        width :  '1200px'
//    };
})(jQuery);    

コールする側 [HTML]

<script type="text/javascript">
$("#sample").sample({param:'moge'}).reload('hage!!');
</script>
<div id="sample"></div>

但し、十分な検証はしていないので、自己責任で参考にしてください。

FireFox では動作するが、IEではうまくいかない場合は、カンマの有無を調査するのが良いと思う。

言語仕様的に言うと、ECMAScript第3版ではオブジェクトリテラルの最後のカンマ “,” は違反らしい。最新のECMAScript第5版では最後のカンマ “,” は無視されるとのこと。どの道、最後のカンマ “,” は付けない方が良い。

余談だが、jQuery.append() が動作しなかったこともある。これも単純に</div>タグを付け忘れたという単純ミス。
問題が起きたら、まずは簡単なところから確認するべきである。

JSON.parse() をしようとして、結構エラーになるので覚え書き。
特にオブジェクト型のプロパティと、文字値に、ダブルクォーテーションを指定する事はとても重要。
シングルクウォーテーションだと怒られる。

文字値：”abcd” [ダブルクォーテーションのみ]
数値：123.4 [10進数のみ]
Boolean値：ture or false
null値：null
オブジェクト：{“x” : “abc” ,”y”: 123}
配列： [1,2,”aaa”]

以前も記述したが、jQuery プラグイン形式でスクリプトを記述すると中々良いかもしれない。
今後は勉強がてらに、jQuery プラグインの作成方法を試していこうと思う。
試行錯誤しながらの記述なので、使用方法に間違い等があるかもしれないので参考までにしてください。

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" 
type="text/javascript" ></script>
<script src="jquery.myPlugin.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function(){

    $("#test").myPlugin({
        params : [{title : 'optTitle1', name: 'optName1', id: '011'},
                  {title : 'optTitle2', name: 'optName2', id: '022'}
                 ]
    });

});
</script>

/*
 * jQueryプラグインテンプレート
 */
;(function($){
    var target;
    var opts;
    $.fn.myPlugin = function(options){
        //対象のスコープを設定
        target = $(this);
        //オプション取得
        opts = jQuery.extend({}, $.fn.myPlugin.defaults, options);
        //opts = jQuery.extend(true, $.fn.myPlugin.defaults, options);

 
        return this.each(function(){
            //処理記述
            func1();
            $(this).css({width : opts.width,
                          height : opts.height,
                          background : opts.color});
        });
    };
    //ローカル関数
    function func1(){
        //パラメータも取得可能
        var targetId = target.attr('id');
        var param = opts.param;
        var params = opts.params;

console.log(targetId + "/" + param + "/" 
+ params[0].title + "/" + params[1].title);

    };
    //デフォルト値
    $.fn.myPlugin.defaults = {
        param : 'hoge',
        params : [{title : 'defTitle1', name: 'defName1', id: '111' },
                  {title : 'defTitle2', name: 'defName2', id: '222' }
                 ],
        height : '200px',
        width :  '300px',
        color : 'blue'
    };
})(jQuery);