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

by

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

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

なお、適当に書いたサンプルソースは全て
「IDで指定した要素の文字色をオプションで指定した色に変える」という内容です。
また、あえてメソッドを動作させるようにしています。

ソースの説明書き加えた

mootools (ver1.2)

まず個人的に一番気に入ってるmootoolsから。
mootoolsのプラグインは特に決まった書式などは無く、Classで作成されているものが多いです。
Classという名前の通りPHPやJAVA等のクラスとほぼ同じ仕様なのでとっつきやすいと思われる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var myClassName = new Class({
     
    //渡されたクラスやオブジェクトのプロパティがクラスにコピーされるClass:Options実装
    Implements: [Options],
 
    //クラスのオプション（名前:デフォルト値）
    options: {
        myOption: ''
    },
     
    //コンストラクタ（optionsはインスタンス作成時に渡される値）
    initialize: function(options) {
        //渡されたオプションを追加
        this.setOptions(options);
    },
     
    //クラスのメソッド
    myMethod: function() {
         
    }
     
});

この記事でPHPのクラスについて触れてますが、実にそっくりです。

Sample
解説の内容は以下prototypeとほぼ同じなので、prototypeでは省略しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//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」にすること。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
(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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$(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から書き方が変わったらしい。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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);
    }
     
});

クラスの継承

1
2
3
4
5
6
7
8
9
10
11
Event.observe(window, 'load', function() {
    new mySubClass("red");
});
 
var mySubClass = Class.create(myClassName,{
     
    initialize: function($super, option) {
        $super(option,'blue');
    }
 
});

Sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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…
似たようなもんだよな

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.