サイト操作用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を書けばOK!
…と言いたい所ですが、これだとあまりにも芸がないのでもうちょっと。
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
これで「プラグインっぽく」コードを書けるようになりました。
何故「っぽく」かと言うと、通常プラグインはメソッドチェーンを考慮して作られているのですが、ここまでの知識で書いたコードはその点を考慮していないので、「プラグイン書いたった。皆使ってー」などとやってしまうと生暖かい目で見られることがある(かもしれない)ので注意しましょう。
メソッドチェーンについてはまた後日(´ ω `)