Ajaxフレームワークのプラグインの仕様比較と作成方法について。
個人的によく使うprototype、jQuery、mootoolsのプラグインテンプレートとサンプルソースをそれぞれ載せてます。
短いソースならベタ書きでも悪くはないけど、使いまわしが効いたり、衝突が起きなかったりと
大掛かりなものになればなるほどメリットはあるので、よく使うなら覚えておいて損はないと思う。
でもプラグインを作ること自体はそう難しくなくても、理解するのが大変なんだよな。
どれか１つ把握してたら応用で他のも作れるようになるはず。ソースは私。
なお、適当に書いたサンプルソースは全て
「IDで指定した要素の文字色をオプションで指定した色に変える」という内容です。
また、あえてメソッドを動作させるようにしています。
ソースの説明書き加えた
mootools (ver1.2)
まず個人的に一番気に入ってるmootoolsから。
mootoolsのプラグインは特に決まった書式などは無く、Classで作成されているものが多いです。
Classという名前の通りPHPやJAVA等のクラスとほぼ同じ仕様なのでとっつきやすいと思われる。
var myClassName = new Class({
//渡されたクラスやオブジェクトのプロパティがクラスにコピーされるClass:Options実装
Implements: [Options],
//クラスのオプション（名前:デフォルト値）
options: {
myOption: ''
},
//コンストラクタ（optionsはインスタンス作成時に渡される値）
initialize: function(options) {
//渡されたオプションを追加
this.setOptions(options);
},
//クラスのメソッド
myMethod: function() {
}
});
この記事でPHPのクラスについて触れてますが、実にそっくりです。
Sample
解説の内容は以下prototypeとほぼ同じなので、prototypeでは省略しています。
//addEvent("domready"は)DOMが読み込まれたら実行します
window.addEvent('domready', function(){
//クラスのインスタンス作成。変数sampleに格納していますが、格納しなくても実行されます。
//#testの文字色を青色にする
var sample = new mySampleClass($("test"),{color:"blue"});
});
//mootoolsのClass()で新しいクラスを作成する
var mySampleClass = new Class({
//渡されたクラスやオブジェクトのプロパティがクラスにコピーされる
Implements: [Options],
//クラスのオプション（オプションの名前:デフォルト値）
options: {
color: 'red'
},
//コンストラクタ
//elementは$("test")、optionsは{color:"blue"}が渡されます
initialize: function(element,options) {
//渡されたオプションを追加
this.setOptions(options);
//配列へオプションの値を格納します
this.element = element;
this.color = this.options.color;
//メソッド実行
this.addColor();
},
//クラスのメソッド
addColor: function() {
//elementで渡された要素にスタイル属性でcolorプロパティを追加します。
//セットするのはオプションで渡された色
this.element.setStyle("color",this.color);
}
});
テンプレートと同じにするためメソッドを使って書いていますが
initialize()にaddColor()の内容を書いても同じ結果が得られます。
mootoolsカテゴリーやタグで書き散らしたクラスソースが見れるのでそちらも参考にどうぞ。
jQuery (ver1.3.1)
jQueryはプラグインの多さで有名。プラグインの書式は定型があるのでそれに沿って作れば大概動く。
外部ファイルに保存する場合はファイル名を「jquery.プラグイン名.js」にすること。
以下２つ並べて書いてますが内容は同じ。
(function(jQuery) {
//jQuery名前空間にプラグイン名を登録します
jQuery.fn.mySamplePlugin = function(options){
//オプションとデフォルト値
var options = jQuery.extend({
myOption: "",
}, options);
//要素を変数へ格納
var $this = jQuery(this);
//メソッド
function myMethod(){
alert($this);
}
//実行
myMethod();
};
})(jQuery);
(function($){
$.extend({
mySamplePlugin: new function(){
//オプションとデフォルト値
var options = {
myOption: ""
};
//メソッド
this.myMethod = function(options){
alert($(this));
}
}
});
//jQuery.fnにメソッドを追加
$.fn.extend({
mySamplePlugin:$.mySamplePlugin.myMethod
});
})(jQuery);
前者はjQuery、後者は$を使っていますが、プラグインの中でjQueryの代わりに$を使う場合は
(function($) {省略})(jQuery)として引数で$を渡せばおｋ。
衝突を避けるためにもなるべく$は使わない方が良い。
Sample
$(document).ready(function(){
$("#test").mySamplePlugin({color:"blue"});
});
(function($){
$.extend({
mySamplePlugin: new function(){
this.options = {
color:"red"
};
this.myMethod = function(options){
$(this).css("color",options.color);
}
}
});
$.fn.extend({
mySamplePlugin:$.mySamplePlugin.myMethod
});
})(jQuery);
(function(jQuery) {
jQuery.fn.mySamplePlugin = function(options){
var options = jQuery.extend({
color: "red",
}, options);
var $this = jQuery(this);
var addColor = function(){
$this.css("color",options.color);
}
addColor();
};
})(jQuery);
prototype.js (upper ver 1.6)
prototype.jsのプラグインもClass.create()によるクラスの作成になる様子。
ver1.6から書き方が変わったらしい。
Event.observe(window, 'load', function() {
new myClassName("red","blue");
});
var myClassName = Class.create({
//コンストラクタ
initialize: function(option1,option2) {
//格納
this.myOption1 = option1;
this.myOption2 = option2;
//実行
this.myMethod();
},
//クラスのメソッド
myMethod: function() {
alert(this.myOption1 +" and "+ this.myOption2);
}
});
クラスの継承
Event.observe(window, 'load', function() {
new mySubClass("red");
});
var mySubClass = Class.create(myClassName,{
initialize: function($super, option) {
$super(option,'blue');
}
});
Sample
Event.observe(window, 'load', function() {
new mySampleClass ($("test"),"red");
});
var mySampleClass = Class.create({
initialize: function(element,color) {
this.element = element;
this.color = color;
this.addColor();
},
addColor: function() {
this.element.setStyle({color:this.color});
}
});
他にもフレームワークは色々とあるけど…
AdobeSpry、Dojo、MicrosoftAjax、YUI、Rico、MochiKit、Ext、Alfax、script.aclo.us…
似たようなもんだよな