[Ajax]prototype、jQuery、mootoolsのプラグイン仕様比較

Ajaxフレームワークのプラグインの仕様比較と作成方法について。
個人的によく使うprototype、jQuery、mootoolsのプラグインテンプレートとサンプルソースをそれぞれ載せてます。

短いソースならベタ書きでも悪くはないけど、使いまわしが効いたり、衝突が起きなかったりと
大掛かりなものになればなるほどメリットはあるので、よく使うなら覚えておいて損はないと思う。
でもプラグインを作ること自体はそう難しくなくても、理解するのが大変なんだよな。
どれか1つ把握してたら応用で他のも作れるようになるはず。ソースは私。

なお、適当に書いたサンプルソースは全て
「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」にすること。

以下2つ並べて書いてますが内容は同じ。

(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)として引数で$を渡せばおk。
衝突を避けるためにもなるべく$は使わない方が良い。

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});
	}
	
});

1.6より前の書き方はRubyに似てるらしい。

他にもフレームワークは色々とあるけど…
AdobeSpry、Dojo、MicrosoftAjax、YUI、Rico、MochiKit、Ext、Alfax、script.aclo.us…
似たようなもんだよな

Leave a Comment.