javascriptをmootoolsからjQueryに書き換えるときにちょっと迷ったのでメモ。WordPressだと標準でjQueryが入っているようなので、jQueryに統一しようと思ったのですが、実際、書換の際に非常に困ったのがクラス定義。jQueryではあんまりクラスを使わない?
というか、WordPressに、とあるプラグイン入れたらjQueryが読み込まれて、「似たような機能のmootoolsとjQuery、両方読み込んでるのってなんか気持ち悪くね?」と思ったのがmootoolsからjQueryに書き換えようっと持ったきっかけだったりします。
ただ、prototype.jsやmootoolsでは、クラス定義のためのフレームワークが用意されていますが、jQueryではそれに該当するようなものがありません。「jQuery クラス」というようなキーワードで検索しても、ぴんと来るものは出てこないし、jQuery使ってる人はクラスとか作らないんですか?
…と思い悩みながら調べていったところ、どうやらjQueryでは「クラスを定義して使う」のではなくて、「プラグインを作って使う」という形をとっているようです。
「jQuery プラグイン」で検索したら、いっぱい出てきました。
以下が、基本的なプラグインの形。
(function() { // プラグインを設定 // // 「myplugin」はプラグイン名。 //「jQuery.fn.myplugin」と書いているところと //「$.fn.myplugin」と書いているところがありましたが、 //動作は同じっぽいです。 //ただ、prototype.jsなどをjQueryと使う場合に //$.fnだと不具合が起きるかも? jQuery.fn.myplugin = function(config){ // 引数のデフォルト値を渡してます // //configのデフォルト値を //function(config)で受け取ったconfigの値で //上書きしてるみたいです。 config = jQuery.extend({ value1: "Default value 1", value2: "Default value 2" },config); // プラグイン内のthis は、 //$("div.target") など指定したHTML要素 var target = this; // 関数の定義 // //特になにか特別な書き方はしなくても大丈夫です //プラグイン内で定義した関数は //このプラグイン内でしか使えないようなので、 //他のプラグインで定義されている関数と //関数名が衝突する恐れはなさそう。 function myfunction() { target.append("Hello jQuery Plugin !<br />" + config.value1 + "<br />" + config.value2); } //関数を実行します。 myfunction(); }; })(jQuery);
このプラグインの機能を使用するには、htmlファイルの中やjavascriptファイルの中で、次のように記述すればOK。
// DOMがreadyになったときに実行 // //「$(function() {});」意外に、 //「jQuery(function() {});」という書き方でもOKらしいです。 //「$(document).ready(function() {});」は古い書き方。 $(function(){ //プラグインを使うときは、 //$(divとか).プラグイン名(引数) //というふうにします。 $("div.target").myplugin({value1: "This is value 1"}); });
クラスを定義するというよりは、「プラグイン」でメソッドを追加するという感じなのですね。
「プラグイン」という考え方が分かってしまうと、jQueryのプラグインは作りやすい感じがします。
参考
- jQuery のプラグインを作成する : ブログの新着記事を表示:Goodpic
- jQueryのクラス定義はトリッキーでかっこいいよ at HouseTect, JavaScripter Blog
- Tutorials:Getting Started with jQuery – jQuery JavaScript Library