Prototype JavaScript-framework - Prototype JavaScript Framework

Voor ander gebruik, zie Prototype-gebaseerde programmering .
Voorlopig ontwerp
Oorspronkelijke auteur(s) Sam Stephenson
Ontwikkelaar(s) Prototype kernteam
Eerste uitgave februari 2005 ; 16 jaar geleden ( 2005-02 )
Stabiele vrijlating
1.7.3 / 22 september 2015 ; 5 jaar geleden ( 2015-09-22 )
Opslagplaats Bewerk dit op Wikidata
Geschreven in JavaScript
Type JavaScript-bibliotheek
Licentie MIT-licentie
Website prototypejs .org Bewerk dit op Wikidata

Het Prototype JavaScript Framework is een JavaScript- framework dat in februari 2005 door Sam Stephenson is gemaakt als onderdeel van de basis voor Ajax- ondersteuning in Ruby on Rails . Het is geïmplementeerd als een enkel bestand met JavaScript-code, meestal met de naam prototype.js . Prototype wordt standalone gedistribueerd, maar ook als onderdeel van grotere projecten, zoals Ruby on Rails, script.aculo.us en Rico. Volgens w3techs wordt Prototype vanaf maart 2021 door 0,6% van alle websites gebruikt.

Kenmerken

Prototype biedt verschillende functies voor het ontwikkelen van JavaScript-toepassingen. De functies variëren van programmeersnelkoppelingen tot belangrijke functies voor het omgaan met XMLHttpRequest .

Prototype biedt ook bibliotheekfuncties om klassen en op klassen gebaseerde objecten te ondersteunen. In JavaScript is het maken van objecten in plaats daarvan gebaseerd op prototypen : een functie voor het maken van objecten kan een prototype- eigenschap hebben en elk object dat aan die eigenschap is toegewezen, wordt gebruikt als een prototype voor de objecten die met die functie zijn gemaakt. Het Prototype-framework moet niet worden verward met deze taalfunctie.

Voorbeelden van hulpprogramma's

De $() functie

De dollar-functie , $ (), kan worden gebruikt als afkorting voor de getElementById functie. Om te verwijzen naar een element in het Document Object Model (DOM) van een HTML- pagina, is de gebruikelijke functie die een element identificeert: 

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

De functie $() reduceert de code tot: 

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

De functie $() kan ook een element als parameter ontvangen en zal, zoals in het vorige voorbeeld, een prototype uitgebreid object retourneren. 

var domElement = document.getElementById("id_of_element");  // Usual object reference returned
var prototypeEnhancedDomElement = $(domElement);            // Prototype extended object reference
Opmerking : Net als het onderstrepingsteken ( _), is het $teken een wettelijk "woordteken" in JavaScript-ID's en heeft het geen andere betekenis in de taal. Het werd tegelijkertijd aan de taal toegevoegd als ondersteuning voor reguliere expressies , zodat de Perl- achtige overeenkomende variabelen konden worden geëmuleerd, zoals $`en $'.

De $F() functie

Voortbouwen op de $()functie: de $F()functie retourneert de waarde van het gevraagde formulierelement. Voor een 'tekst'-invoer retourneert de functie de gegevens in het element. Voor een 'select' invoerelement zal de functie de momenteel geselecteerde waarde teruggeven. 

$F("id_of_input_element")

De $$() functie

De dollar-dollarfunctie is de CSS Selector Engine van Prototype . Het retourneert alle overeenkomende elementen, volgens dezelfde regels als een selector in een CSS-stylesheet. Als u bijvoorbeeld alle <a>elementen met de klasse "pulsate" wilt krijgen , gebruikt u het volgende: 

$$("a.pulsate")

Dit retourneert een verzameling elementen. Als u de script.aculo.us-extensie van de kern Prototype-bibliotheek gebruikt, kunt u het "pulsatie" (knipper) effect als volgt toepassen: 

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

Het Ajax-object

In een poging om de hoeveelheid code die nodig is om een ​​cross-browser- XMLHttpRequestfunctie uit te voeren, te verminderen , biedt Prototype het Ajaxobject om de verschillende browsers te abstraheren. Het heeft twee hoofdmethoden: Ajax.Request()en Ajax.Updater(). Er zijn twee vormen van het Ajaxobject. Ajax.Requestretourneert de onbewerkte XML-uitvoer van een AJAX-aanroep, terwijl het Ajax.Updaterde terugkeer in een opgegeven DOM-object zal injecteren. Het Ajax.Requestonderstaande vindt de huidige waarden van twee HTML-formulierinvoerelementen, stuurt een HTTP POST-verzoek naar de server met die elementnaam/waarde-paren en voert een aangepaste functie uit ( showResponsehieronder genoemd) wanneer het HTTP-antwoord van de server wordt ontvangen: 

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

Object georiënteerd programmeren

Prototype voegt ook ondersteuning toe voor meer traditionele objectgeoriënteerde programmering. De Class.create()methode wordt gebruikt om een ​​nieuwe klasse aan te maken. Een klasse wordt vervolgens toegewezen aan een prototypedie fungeert als een blauwdruk voor instanties van de klasse. 

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

Een andere klas verlengen: 

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 ...
});

De framework-functie Object.extend(dest, src)neemt twee objecten als parameters en kopieert de eigenschappen van het tweede object naar het eerste om overerving te simuleren. Het gecombineerde object wordt ook geretourneerd als resultaat van de functie. Zoals in het bovenstaande voorbeeld, maakt de eerste parameter gewoonlijk het basisobject, terwijl de tweede een anoniem object is dat uitsluitend wordt gebruikt voor het definiëren van aanvullende eigenschappen. De volledige declaratie van de subklasse gebeurt tussen de haakjes van de functieaanroep.

Problemen

In tegenstelling tot andere JavaScript-bibliotheken zoals jQuery , breidt Prototype de DOM uit. Er zijn plannen om dit in de volgende grote versie van de bibliotheek te veranderen.

In april 2010 beschreef blogger Juriy 'kangax' Zaytsev (van Prototype Core) uitvoerig de problemen die kunnen voortvloeien uit het patchen van nieuwe methoden en eigenschappen in de objecten gedefinieerd door de W3C DOM. Deze ideeën weerspiegelen gedachten die in maart 2010 door Yahoo! ontwikkelaar Nicholas C. Zakas Ze zijn als volgt samengevat:

  • Cross-browserproblemen: hostobjecten zijn niet onderworpen aan regels, niet-compatibel IE DOM-gedrag, enz.
  • Kans op naambotsingen
  • Prestatieoverhead

Tegen 2008 waren er al specifieke problemen met het gebruik van DOM-extensiemethoden in oudere versies van Prototype, in combinatie met nieuwere versies van huidige browsers. In plaats van nieuwe methoden en eigenschappen toe te voegen aan reeds bestaande 'host' DOM-objecten zoals Element, zoals element.hide(), is de oplossing voor deze problemen om wrapper-objecten rond deze host-objecten te voorzien en de nieuwe methoden hierop te implementeren. jQueryis zo'n wrapper-object in de bibliotheek met die naam.

Algemeen wordt nu verwacht dat de meeste van deze ideeën en problemen zullen worden aangepakt in de release van Prototype 2.0, maar Prototype-ontwikkelaars zullen moeten leren werken met een gewijzigde syntaxis en veel bestaande Prototype-code zal verouderd raken.

Zie ook

Referenties

Bibliografie

Externe links