jQuery pluginの書き方
なんでいまさら？
いまさらですが、初めて書いたので備忘録的な感じです。
いままでは普通に素のJavaScriptを書いていましたが、汎用性とか使い回しを考えるとjQuery pluginになっていたほうが何かといいかなーと思ったのでした。
pluginにすると何がいいの？
HTML側の記述を下記のようにできます。
よく見かけるjQuery pluginと同じような記述方法で、なんか良いですよね。
<script type="text/javascript">
$('.class-name').your_plugin_name();
</script>
で、js側の記述は下記のような感じです。
(function($){
$.fn.your_plugin_name = function(){
var $self = $.fn.your_plugin_name; //自分自身を保持しておくと、後の記述がすっきりするし何かといいみたい
var $this = this; //.class-nameのオブジェクトをこれで保持できるみたい
//ここにやりたいことを書けばいいみたい
};
})(jQuery);
引数で設定値を渡したい場合
HTML側で下記のような書き方をすることも割とよくやりますよね。
<script type="text/javascript">
$('.class-name').your_plugin_name({ hoge: 'fuga' });
</script>
その場合、js側は下記のように受け取ってあげれば大丈夫っぽいです。
(function($){
$.fn.your_plugin_name = function(config){
var $self = $.fn.your_plugin_name;
var $this = this;
//受け取った値を保持しておく場合はこんな感じ
//引数が無い場合は標準値が入るように三項にしておくと何かといいと思った
//ほんとは引数の内容を検査しないといけないような気もしますが
$self.config = {
hoge: ( config.hoge ) ? config.hoge : 'default',
};
//ここにやりたいことを書けばいいみたい
};
})(jQuery);
メソッドがいろいろあったりする場合
とりあえず、こんな感じにしています。
(function($){
$.fn.your_plugin_name = function(config){
var $self = $.fn.your_plugin_name;
$self.$this = this; //スコープ外から参照したいので、$selfの下に入れておいてみた
$self.config = {
hoge: ( config.hoge ) ? config.hoge : 'default',
};
//ここにやりたいことを書けばいいみたい
};
$.fn.your_plugin_name.function_name = function(){
var $self = $.fn.your_plugin_name; //スコープ外なので、再度$selfに代入しておいてみた
//ここにやりたいことを書こう
};
})(jQuery);
おもったこと。
正しいとか理想的とかいうとまだまだ深みがあると思いますが、ちょっとした処理を書きたい場合は非常に簡単ですね。
素のJavaScriptでjQueryを使って書くより楽なような気がします。
やっぱりjQueryはステキ。