Prototyp JavaScript Framework

Für andere Verwendungen siehe Prototypbasierte Programmierung.
Prototyp
Originalautor (en) Sam Stephenson
Entwickler (en) Prototyp -Kernteam
Erstveröffentlichung Februar 2005; Vor 17 Jahren
Stabile Version
1.7.3 / 22. September 2015; vor 6 Jahren
Repository
Geschrieben in JavaScript
Typ JavaScript -Bibliothek
Lizenz MIT -Lizenz
Webseite Prototypejs.org Edit this on Wikidata

Das Prototyp JavaScript Framework ist ein JavaScript Rahmen Erstellt von Sam Stephenson im Februar 2005 als Teil von Ajax Unterstützung von Rubin auf Schienen. Es wird als eine einzige Datei des JavaScript -Code implementiert, die normalerweise benannt ist prototype.js. Der Prototyp ist eigenständig verteilt, aber auch als Teil größerer Projekte wie Ruby on Rails, Script.aculo.us und Rico. Ab März 2021 wird laut W3Techs Prototyp von 0,6% aller Websites verwendet.[1]

Merkmale

Der Prototyp bietet verschiedene Funktionen für die Entwicklung von JavaScript -Anwendungen. Die Funktionen reichen von Programmierverknüpfungen bis hin zu wichtigen Funktionen für den Umgang mit Xmlhttprequest.

Der Prototyp bietet auch Bibliotheksfunktionen zur Unterstützung Klassen und klassenbasierte Objekte.[2] In JavaScript ist die Objekterstellung Prototyp-Basierend stattdessen: Eine Funktion für das Objekt erstellte Funktion kann a haben Prototyp Eigenschaft und jedes dieser Eigenschaft zugewiesene Objekt wird als Prototyp für die mit dieser Funktion erstellten Objekte verwendet. Das Prototyp -Framework darf nicht mit dieser Sprachfunktion verwechselt werden.

Beispiele für Versorgungsfunktionen

Die $ () -Funktion

Das Dollarfunktion, $ (), kann als Abkürzung für die verwendet werden GetElementById Funktion. Sich auf ein Element in der beziehen Dokumentobjektmodell (Dom) von einem Html Seite, die übliche Funktion, die ein Element identifiziert, lautet:

dokumentieren.GetElementById("id_of_element").Stil.Farbe = "#ffffff";

Die Funktion $ () reduziert den Code auf:

$("id_of_element").SetStyle({{Farbe: '#ffffff'});

Die Funktion $ () kann auch ein Element als Parameter empfangen und kehrt wie im vorherigen Beispiel ein erweitertes Prototyp -Objekt zurück.

var Domelement = dokumentieren.GetElementById("id_of_element");  // übliche Objektreferenz zurückgegeben var PrototypeenhancedDomelement = $(Domelement);  // Extended -Objektreferenz für Prototypen
Notiz: Wie der Unterstrich (_), das $ Charakter ist ein legaler "Wortcharakter" in JavaScript -Kennungen und hat keine andere Bedeutung in der Sprache. Es wurde der Sprache zur gleichen Zeit wie die Unterstützung für die Unterstützung hinzugefügt Reguläre Ausdrücke, so, dass die Perl-S ähnliche Matching -Variablen könnten emuliert werden, wie z. $ ` und $ '.

Die Funktion $ f ()

Aufbau auf dem $ () Funktion: die $ F () Funktion gibt den Wert des angeforderten Formularelements zurück. Für eine "Text" -Ingabe gibt die Funktion die im Element enthaltenen Daten zurück. Für ein "SELECT' -Eingabelement wählen Sie den aktuell ausgewählten Wert zurück.

$ F("id_of_input_element")

Die Funktion $$ ()

Das Dollar -Dollar -Funktion ist Prototypen CSS Auswahlmotor. Es gibt alle passenden Elemente zurück und folgt den gleichen Regeln wie ein Selektor in einem CSS -Stylesheet. Zum Beispiel, wenn Sie alles bekommen möchten Elemente mit der Klasse "Pulsat" würden Sie Folgendes verwenden:

$$("a.pulsat")

Dies gibt eine Sammlung von Elementen zurück. Wenn Sie die Erweiterung der Kernprototyp -Bibliothek verwenden.

$$("a.pulsat").jeder(Wirkung.Pulsieren);

Das AJAX -Objekt

Um die Menge an Code zu reduzieren, die für den Ausführen eines Kreuzbrowsers erforderlich ist Xmlhttprequest Funktion, Prototyp liefert die Ajax Objekt, die verschiedenen Browser abstrahieren. Es hat zwei Hauptmethoden: Ajax.request () und Ajax.updater (). Es gibt zwei Formen der Ajax Objekt. Ajax.request Gibt die RAW XML -Ausgabe aus einem Ajax -Aufruf zurück, während die Ajax.updater Injiziert die Rückgabe in ein bestimmtes DOM -Objekt. Das Ajax.request Nachfolgend findet die aktuellen Werte von zwei HTML -Formulareingabedelementen, postet eine HTTP -Postanforderung an den Server mit diesen Elementnamen-/Wertpaaren und führt eine benutzerdefinierte Funktion aus (aufgerufen (heißt Showresponse unten) Wenn die HTTP -Antwort vom Server empfangen wird:

Neu Ajax.Anfrage("http: // localhost/server_script", {  Parameter: {  Wert1: $ F("Form_element_id_1"),  Wert2: $ F("Form_Element_id_2")  },  Onsuccess: Showresponse,  Onfailure: Duschror });

Objekt orientierte Programmierung

Der Prototyp fügt auch Unterstützung für traditionellere objektorientierte Programmierung hinzu. Das Class.create () Die Methode wird verwendet, um eine neue Klasse zu erstellen. Eine Klasse wird dann a zugewiesen a Prototyp das fungiert als Blaupause für Fälle der Klasse.

var Erste Klasse = Klasse.schaffen( {  // Die initialisierende Methode dient als Konstruktor  initialisieren: Funktion () {  Dies.Daten = "Hallo Welt";  } });

Eine andere Klasse erweitern:

Ajax.Anfrage = Klasse.schaffen( Ajax.Base, {  // Überschreiben Sie die initialisierende Methode  initialisieren: Funktion(URL, Optionen) {  Dies.Transport = Ajax.GetTransport();  Dies.Setoptionen(Optionen);  Dies.Anfrage(URL);  },  // ... Weitere Methoden fügen hinzu ... });

Die Framework -Funktion Object.extend (dest, src) Nimmt zwei Objekte als Parameter und kopiert die Eigenschaften des zweiten Objekts auf den ersten, der die Vererbung simuliert. Das kombinierte Objekt wird auch als Ergebnis aus der Funktion zurückgegeben. Wie im obigen Beispiel erstellt der erste Parameter normalerweise das Basisobjekt, während das zweite ein anonymer Objekt ist, das ausschließlich zur Definition zusätzlicher Eigenschaften verwendet wird. Die gesamte Unterklassenerklärung erfolgt innerhalb der Klammern des Funktionsaufrufs.

Probleme

Im Gegensatz zu anderen JavaScript -Bibliotheken mögen JQuery, Prototyp erweitert die DOM. Es ist geplant, dies in der nächsten Hauptversion der Bibliothek zu ändern.[3]

Im April 2010 beschrieb der Blogger Juriy 'Kangax' Zaytsev (von Prototypenkern) ausführlich die Probleme, die ausgehen können, aus Affenpatching Neue Methoden und Eigenschaften in die vom W3C DOM definierten Objekte.[3] Diese Ideen spiegeln Gedanken im März 2010 von Yahoo! Entwickler Nicholas C. Zakas[4] Sie wurden wie folgt zusammengefasst[5]

  • Cross-Browser-Probleme: Hostobjekte unterliegen nicht Regeln, nicht konforme IE-DOM-Verhalten usw.
  • Chance auf Namenskollisionen
  • Leistungsaufwand

Bis 2008 wurden bereits spezifische Probleme bei der Verwendung von Dom-Extension-Methoden in älteren Prototypversionen in Kombination mit neueren Versionen aktueller Browser dokumentiert.[6] Anstatt neue Methoden und Eigenschaften hinzuzufügen, um bereits bestehende "Host" DOM-Objekte wie z. Element, wie element.hide ()Die Lösung für diese Probleme besteht darin, Wrapper -Objekte um diese Host -Objekte bereitzustellen und die neuen Methoden dazu zu implementieren. JQuery ist ein solches Wrapper -Objekt in der Bibliothek dieses Namens.[3]

Es ist jetzt allgemein erwartet, dass die Mehrheit dieser Ideen und Probleme in der Veröffentlichung von Prototyp 2.0 behandelt wird, aber Prototypentwickler müssen lernen, mit einer veränderten Syntax zu arbeiten, und es wird viel vorhandener Prototypcode veraltet.[5]

Siehe auch

Verweise

  1. ^ "Nutzungsstatistik und Marktanteil der JavaScript -Bibliotheken für Websites, März 2021". w3techs.com. Abgerufen 27. März 2021.
  2. ^ "Prototyp JavaScript Framework | Klassen und Vererbung definieren". Prototypejs.org. Abgerufen 5. Juni 2020.
  3. ^ a b c Kangax (5. April 2010). "Was ist falsch daran, den Dom zu erweitern". Abgerufen 6. April 2010.
  4. ^ Zakas, Nicholas C. (2. März 2010). "Wartbare JavaScript: Ändern Sie keine Objekte, die Sie nicht besitzen.". Abgerufen 6. April 2010.
  5. ^ a b Almaer, Dion (6. April 2010). "Prototyp 2.0 erweitert das DOM nicht". Abgerufen 6. April 2010.
  6. ^ Ressig, John (26. März 2008). "GetElementsbyClassName Pre -Prototype 1.6". Abgerufen 6. April 2010.

Literaturverzeichnis

Externe Links