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
