Question

是否有人展示了使用prototype.js创建类的示例及其工作原理。任何人都可以提供除官方网站以外的prototype.js的优秀示例和教程吗？

Answer 1

创建PrototypeJS Classes与使用普通OOP语言创建类非常相似。

首先开始命名你的班级

var myClass = Class.create({ });

这将创建一个空类 - 现在用方法填充它，如果你放一个方法initialize PrototypeJS将触发它作为构造函数

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的子类。对于您在子类中重写的任何方法，您可以将第一个变量作为$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

如何使用prototype.js创建一个类

1 个答案: