Prototyp-JavaScript-Framework - Prototype JavaScript Framework

Weitere Verwendungszwecke finden Sie unter Prototypbasierte Programmierung .
Prototyp
Originalautor(en) Sam Stephenson
Entwickler Prototyp Kernteam
Erstveröffentlichung Februar 2005 ; Vor 16 Jahren ( 2005-02 )
Stabile Version
1.7.3 / 22. September 2015 ; vor 5 Jahren ( 2015-09-22 )
Repository Bearbeite dies bei Wikidata
Geschrieben in JavaScript
Art JavaScript-Bibliothek
Lizenz MIT-Lizenz
Webseite PrototypeJS .org Bearbeiten Sie dies auf Wikidata

Das Prototype JavaScript Framework ist ein JavaScript- Framework, das von Sam Stephenson im Februar 2005 als Teil der Grundlage für die Ajax- Unterstützung in Ruby on Rails erstellt wurde . Es wird als einzelne Datei mit JavaScript-Code implementiert, die normalerweise als Prototyp.js bezeichnet wird . Prototype wird eigenständig, aber auch als Teil größerer Projekte wie Ruby on Rails, script.aculo.us und Rico vertrieben. Laut w3techs wird Prototype ab März 2021 von 0,6% aller Websites verwendet.

Eigenschaften

Prototype bietet verschiedene Funktionen für die Entwicklung von JavaScript-Anwendungen. Die Features reichen von Programmier-Shortcuts bis hin zu wichtigen Funktionen für den Umgang mit XMLHttpRequest .

Prototype bietet auch Bibliotheksfunktionen zur Unterstützung von Klassen und klassenbasierten Objekten. In JavaScript ist die Objekterstellung stattdessen prototypbasiert : Eine Objekterstellungsfunktion kann eine Prototypeigenschaft haben , und jedes dieser Eigenschaft zugewiesene Objekt wird als Prototyp für die mit dieser Funktion erstellten Objekte verwendet. Das Prototype-Framework ist nicht mit dieser Sprachfunktion zu verwechseln.

Beispiel-Dienstprogrammfunktionen

Die $()-Funktion

Die Dollar - Funktion , $ () kann als Abkürzung für die verwendet werden getElementByld Funktion. Um auf ein Element im Document Object Model (DOM) einer HTML- Seite zu verweisen , ist die übliche Funktion zur Identifizierung eines Elements: 

document.getElementById("id_of_element").style.color = "#ffffff";

Die Funktion $() reduziert den Code auf: 

$("id_of_element").setStyle({color: '#ffffff'});

Die Funktion $() kann auch ein Element als Parameter erhalten und gibt, wie im vorherigen Beispiel, ein prototypisches erweitertes Objekt zurück. 

var domElement = document.getElementById("id_of_element");  // Usual object reference returned
var prototypeEnhancedDomElement = $(domElement);            // Prototype extended object reference
Hinweis : Wie der Unterstrich ( _) ist das $Zeichen ein zulässiges "Wortzeichen" in JavaScript-Bezeichnern und hat in der Sprache keine andere Bedeutung. Es wurde der Sprache gleichzeitig mit der Unterstützung für reguläre Ausdrücke hinzugefügt , sodass die Perl- ähnlichen passenden Variablen wie $`und emuliert werden konnten $'.

Die Funktion $F()

Aufbauend auf der $()Funktion: Die $F()Funktion gibt den Wert des angeforderten Formularelements zurück. Bei einer 'Text'-Eingabe gibt die Funktion die im Element enthaltenen Daten zurück. Bei einem 'select'-Eingabeelement gibt die Funktion den aktuell ausgewählten Wert zurück. 

$F("id_of_input_element")

Die Funktion $$()

Die Dollar-Dollar-Funktion ist die CSS Selector Engine von Prototype . Es gibt alle übereinstimmenden Elemente zurück und folgt denselben Regeln wie ein Selektor in einem CSS-Stylesheet. Wenn Sie beispielsweise alle <a>Elemente mit der Klasse "pulsate" erhalten möchten, verwenden Sie Folgendes: 

$$("a.pulsate")

Dies gibt eine Sammlung von Elementen zurück. Wenn Sie die Erweiterung script.aculo.us der Prototyp-Kernbibliothek verwenden, können Sie den "pulsieren" (blinken) Effekt wie folgt anwenden: 

$$("a.pulsate").each(Effect.Pulsate);

Das Ajax-Objekt

Um die zum Ausführen einer browserübergreifenden XMLHttpRequestFunktion erforderliche Codemenge zu reduzieren , stellt Prototype das AjaxObjekt bereit, um die verschiedenen Browser zu abstrahieren. Es hat zwei Hauptmethoden: Ajax.Request()und Ajax.Updater(). Es gibt zwei Formen des AjaxObjekts. Ajax.Requestgibt die rohe XML-Ausgabe eines AJAX-Aufrufs zurück, während Ajax.Updaterdie Rückgabe in ein angegebenes DOM-Objekt eingefügt wird. Im Ajax.RequestFolgenden werden die aktuellen Werte von zwei HTML-Formulareingabeelementen ermittelt, eine HTTP-POST-Anfrage mit diesen Elementnamen/Wert-Paaren an den Server ausgegeben und eine benutzerdefinierte Funktion ( showResponseunten genannt) ausgeführt, wenn die HTTP-Antwort vom Server empfangen wird: 

new Ajax.Request("http://localhost/server_script", {
    parameters: {
        value1: $F("form_element_id_1"),
        value2: $F("form_element_id_2")
    },
    onSuccess: showResponse,
    onFailure: showError
});

Objekt orientierte Programmierung

Prototype bietet auch Unterstützung für traditionellere objektorientierte Programmierung. Die Class.create()Methode wird verwendet, um eine neue Klasse zu erstellen. Einer Klasse wird dann ein zugewiesen, prototypedas als Blaupause für Instanzen der Klasse dient. 

var FirstClass = Class.create( {
    // The initialize method serves as a constructor
    initialize: function () {
        this.data = "Hello World";
    }
});

Eine weitere Klasse erweitern: 

Ajax.Request = Class.create( Ajax.Base, {
    // Override the initialize method
    initialize: function(url, options) {
        this.transport = Ajax.getTransport();
        this.setOptions(options);
        this.request(url);
    },
    // ...more methods add ...
});

Die Framework-Funktion Object.extend(dest, src)nimmt zwei Objekte als Parameter und kopiert die Eigenschaften des zweiten Objekts in das erste, um die Vererbung zu simulieren. Als Ergebnis der Funktion wird auch das kombinierte Objekt zurückgegeben. Wie im obigen Beispiel erzeugt der erste Parameter normalerweise das Basisobjekt, während der zweite ein anonymes Objekt ist, das ausschließlich zur Definition zusätzlicher Eigenschaften verwendet wird. Die gesamte Unterklassendeklaration erfolgt innerhalb der Klammern des Funktionsaufrufs.

Probleme

Im Gegensatz zu anderen JavaScript-Bibliotheken wie jQuery erweitert Prototype das DOM. Es ist geplant, dies in der nächsten Hauptversion der Bibliothek zu ändern.

Im April 2010 beschrieb Blogger Juriy 'kangax' Zaytsev (von Prototype Core) ausführlich die Probleme, die sich daraus ergeben können, dass Affen neue Methoden und Eigenschaften in die vom W3C DOM definierten Objekte patchen . Diese Ideen spiegeln Gedanken wider, die im März 2010 von Yahoo! Entwickler Nicholas C. Zakas Sie wurden wie folgt zusammengefasst

  • Browserübergreifende Probleme: Hostobjekte unterliegen keinen Regeln, nicht konformes IE-DOM-Verhalten usw.
  • Möglichkeit von Namenskollisionen
  • Leistungs-Overhead

Bis 2008 wurden bereits spezifische Probleme bei der Verwendung von DOM-Erweiterungsmethoden in älteren Versionen von Prototype in Kombination mit neueren Versionen aktueller Browser dokumentiert. Anstatt neue Methoden und Eigenschaften zu bereits existierenden 'Host'-DOM-Objekten wie Element, wie hinzuzufügen element.hide(), besteht die Lösung für diese Probleme darin, Wrapper-Objekte um diese Host-Objekte bereitzustellen und die neuen Methoden auf diesen zu implementieren. jQueryist ein solches Wrapper-Objekt in der Bibliothek mit diesem Namen.

Es wird nun allgemein erwartet, dass die meisten dieser Ideen und Probleme in der Veröffentlichung von Prototype 2.0 angegangen werden, aber Prototyp-Entwickler müssen lernen, mit einer geänderten Syntax zu arbeiten, und ein Großteil des vorhandenen Prototyp-Codes wird veraltet sein.

Siehe auch

Verweise

Literaturverzeichnis

Externe Links