javascript - protocol.jsを使用してクラスを作成する方法

Question

誰かがprototype.jsを使用してクラスを作成する例とその仕組みを示すことができますか？公式サイト以外にprototype.jsの良い例とチュートリアルを提供できる人はいますか？

Answer 1

PrototypeJSクラスの作成は、通常のOOP言語でのクラスの作成と非常によく似ています。

まず、クラスに名前を付けることから始めます

var myClass = Class.create({ });

これにより、空のクラスが作成されます。メソッドを入力すると、initializePrototypeJSがコンストラクターとしてそれを起動します。

var myClass = Class.create(
{
    initialize : function()
    {
        this.options = 0;
    }
});

initialize()デフォルト値やクラスのプロパティの初期化など、メソッドで必要なものを設定できます。他のいくつかのメソッドを入れて、クラスをインスタンス化する方法を示しましょう。

var myClass = Class.create(
{
    initialize : function()
    {
        this.options = 0;
    },

    testme : function()
    {
        this.options++;
    },

    showme : function()
    {
        alert(this.options);
        return this.options;
    }
});

var theClass = new myClass();

もう1つの手順を実行して、メソッド内の他のメソッドを呼び出し、コンストラクターにオプションを渡します。

var myClass = Class.create(
{
    initialize : function(option)
    {
        this.options = (option ? option : 0);

        this.testme();
    },

    testme : function()
    {
        this.options++;
    },

    showme : function()
    {
        alert(this.options);
        return this.options;
    }
});

var theClass = new myClass(200);
theClass.showme();

//will alert 201 and return 201

これはすばらしいことですが、クラスの継承についてはどうでしょうか。これはOOPでは重要なことです。たとえば、の子クラスである別のクラスがあるとしmyClassます。子クラスでオーバーライドしているメソッドの場合、最初の変数をとして渡すことができます。$superこれは、スコープの解決と同様に、同じ名前の親のメソッドを参照します。

var myChildClass = Class.create(myClass,
{
    initialize : function($super,option)
    {
        $super(option);

        // the child class needs option's default value at 150 or whatever is 
        // passed so run the parent initialize first and then redefine the 
        // option property
        this.option = (option ? option : 150);

        // you can still run methods in the parent that are not overridden in 
        // the child
        this.testme();
    }
});

var child = new myChildClass();
child.showme();

//will alert() 151 and return 151

これがお役に立てば幸いです。

これが私のgithubからのより複雑な実世界の例です

https://github.com/jwestbrook/Prototype.Growler

https://github.com/jwestbrook/Prototype.Watermark

https://github.com/jwestbrook/bootstrap-prototype