月別アーカイブ: 2014年6月

jQueryを使うときはプラグインっぽく書くメモ

投稿日時: 投稿者:
返信

サイト操作用JavaScriptをjQueryを使って書く時、何も考えず「example.js」の様にしてしまうとパッと見てjQeuryとの依存性があるのかわからないので、最近はjQueryが必要なコードは全て「jquery.example.jp」の様に命名して保存するようにしてます。

ただ、プラグインっぽいファイル名なのに中身が普通にJSだとカッコ悪いので中身をプラグインぽく書いているのですが、毎回使いまわす基本の形を忘れてしまうのでメモしておきます。

(function($) {
    $.fn.bodyfadeout = function(){ //method定義
        $("body").fadeOut();  //<body>～</body>をフェードアウト
    }
})(jQuery);

$(function(){
    $().bodyfadeout(); //実行
});

スコープなんか気にしなくてもDOMは $(セレクタ) で引っ張ってこれるので、$(“body”).fadeOut() の部分に書きたいJSを書けばＯＫ！

…と言いたい所ですが、これだとあまりにも芸がないのでもうちょっと。

thisの扱い方

jQueryは $(“セレクタ”).hide(); の使い方が一般的なのでそれに倣った形で書く。

(function($) {
    $.fn.bodyfadeout = function(){
    	this.fadeOut(); //$(this)ではないので注意
    }
})(jQuery);

$(function(){
	$("body").bodyfadeout(); //実行	
});

やっていることは1つめのコードと同じで、セレクタをどこで指定しているかの違いだけですがjQueryっぽいのでこの書き方が良いかと思います。

thisについてはこちらで勉強しました。
https://gist.github.com/maepon/4754210

引数を渡す

(function($) {
    $.fn.bodyfadeout = function(param){
    	this.fadeOut(param);
    }
})(jQuery);

$(function(){
	$("body").bodyfadeout(2000);
});

メソッドに引数を渡して内部のfaeOutで利用しています。

ついでに初期値を設定したい場合は $.extend() でマージをすると便利だそうです。

(function($) {
    $.fn.bodyfadeout = function(param){
    	var defaultparam = {  
    		"speed" : 500  //デフォルト値
    	}
    	var initparam = $.extend(defaultparam,param); //デフォルト値と引数をマージ
    	this.fadeOut(initparam.speed);
    }
})(jQuery);

$(function(){
	$("body").bodyfadeout( {"speed":2000} );
});

引数はこちらを参考にしました
http://webdrawer.net/javascript/jqplugin.html

これで「プラグインっぽく」コードを書けるようになりました。
何故「っぽく」かと言うと、通常プラグインはメソッドチェーンを考慮して作られているのですが、ここまでの知識で書いたコードはその点を考慮していないので、「プラグイン書いたった。皆使ってー」などとやってしまうと生暖かい目で見られることがある（かもしれない）ので注意しましょう。

メソッドチェーンについてはまた後日(´ ω `)