4

任何人都可以展示一个使用prototype.js创建类的示例以及它是如何工作的。除了官方网站之外，任何人都可以为prototype.js提供好的示例和教程吗？

4

1 回答 1

4

创建 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();

让我们更进一步，在方法中调用其他方法并将选项传递给构造函数。

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. 对于您在子类中覆盖的任何方法，您可以传递第一个变量 as$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

于 2013-03-20T15:02:06.650 回答