如何使用prototype.js创建一个类 [英] How to create a class using prototype.js

问题描述

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

Could any one shows an example for creating a class using prototype.js and how it works.Can anyone provide good examples and tutorials for prototype.js other than its official site?

推荐答案

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

Creating PrototypeJS Classes is very similar to creating classes in normal OOP languages.

首先从命名类开始

var myClass = Class.create({ });

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

This will create an empty class - now populate it with methods, if you put a method initialize PrototypeJS will fire that as the constructor

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

您可以在 initialize（）类似默认值的方法或只是初始化类的属性。让我们介绍一些其他方法，并展示如何实例化该类。

You can setup anything you want in the initialize() method like default values or just initializing the properties of the class. Lets put in some other methods and show how to instantiate the class.

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

让我们再多花一步，调用方法中的其他方法并将选项传递给构造函数。

Lets take it one more step and call other methods within methods and pass options to the constructor.

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 传递，这将引用同名的父方法 - 类似于范围分辨率

This is cool and all - but what about class inheritance? That is a big thing in OOP - lets say we have a separate class that is a child class of myClass. For any method that you are overriding in the child class you can pass a first variable as $super and that will refer to the parent's method of the same name - similar to a scope resolution

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

我希望这个对你很有帮助。

I hope this is helpful for you.

这里有一些来自我的github的更复杂的现实世界的例子

Here are some more complex real world examples from my github

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

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

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

这篇关于如何使用prototype.js创建一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！