Prototype Javascript Framework

	Prototype Javascript Framework
Utvecklare	Prototype Core Team
Senaste utgåva	1.6.1; (1 september 2009)
Senaste betautgåva	1.7.0 RC2;
Typ	Javascript Ramverk
Licens	MIT License
Webbplats	http://prototypejs.org

Prototype Javascript Framework är ett Javascript-ramverk som skapats av Sam Stephenson som ger ett Ajax-ramverk och andra verktyg. Det är implementerat som en enda fil av Javascript-kod, som vanligtvis kallas för Prototype.js. Prototype distribueras fristående, men också som en del av större projekt, såsom Ruby on Rails, script.aculo.us och Rico.

Funktioner redigera

Prototype tillhandahåller olika funktioner för att utveckla Javascriptapplikationer. Funktionerna sträcker sig allt från programmersgenvägar till avancerade funktioner för hantering av XMLHttpRequest.

Prototype tillhandahåller även biblioteksfunktioner för att stödja klasser och klassbaserade objekt^[1], något Javascript-språket inte har inbyggdt^[2]^[3]. I Javascript, är skapelsen av objekt prototyp-baserat istället; en objektskapande funktion kan ha en prototyp-egenskap, och varje objekt som tilldelas denna egenskap kommer att användas som en prototyp för de objekt som skapats med denna funktion. Prototype-ramverket ska inte att förväxlas med denna språkfunktion.

Exempel på nyttiga funktioner redigera

$()-funktionen redigera

Den så kallade dollarfunktionen , $(), kan användas som en kortform för getElementById -funktionen. För att hänvisa till ett element i DOM:en av ett HTML-dokument, den vanliga funktionen för att identifiera ett element är:

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

$()-funktionen reducerar koden till:

	$("Id_of_element").SetStyle({color:"#ffffff'});

$()-funktionen kan även anropas med ett element som parameter och kommer att returnera, som i föregående exempel, ett prototype-uppgraderat objekt.

	var element_js = document.getElementById("id_of_element"); // vanlig objektreferens returnerad
	var element_pt = $(element_js); // prototype-uppgraderad objektreferens

Obs: Liksom understreck (_), är $-tecknet ett tillåtet "ordtecken" i Javascript-identifierare, och har ingen annan betydelse i språket. Det lades till språket samtidigt som stöd för reguljära uttryck. så att Perl-liknande matchningsvariabler kunde emuleras, till exempel $` och $'.

$F()-funktionen redigera

Den bygger på $()-funktionen: $F()-funktionen returnerar värdet för det begärda formulärelementet. För ett "text"-fält kommer funktionen returnera den data som finns i elementet. För ett "select"-fält kommer funktionen returnera det valda värdet.

	$F("id_of_input_element")

$$()-funktionen redigera

Dollar dollar-funktionen är prototypes "CSS-Selector Engine ". Den returnerar alla matchande element, efter samma regler som en "selector" i en CSS-stilmall. Till exempel, om du vill få alla <a>-taggar med klassen "pulsera", skulle du använda följande:

	$$("A.pulsera")

Detta returnerar en samling av element. Om du använder Script.aculo.us, en påbyggnation av Prototypes grundbibliotek, kan du använda en "pulsera"-effekt (blinka) enligt följande:

	$$("A.pulsera").each(Effect.Pulsate);

Ajax-objektet redigera

I ett försök att minska den mängd kod som behövs för att köra en XMLHttpRequest-funktion som fungerar i olika webbläsare, innehåller Prototype Ajax-objektet som ska släta ut olikheterna mellan olika webbläsare. Det har två huvudsakliga metoder: Ajax.Request() och Ajax.Updater(). Det finns två former av Ajax-objekt. Ajax.Request returnerar den råa XML-utdatan från ett AJAX-anrop, medan Ajax.Updater kommer att injicera returvärdet inuti ett angivet DOM-objekt. I Ajax.Request nedan finner värdena av två HTML formulärfält, begär en sida från servern med hjälp av värdena som POST-värden, sedan körs en anpassad funktion som kallas för showResponse() när det är färdigt:

var url = "http://www.example.com/path/server_script";

var myAjax = new Ajax.Request(url, {
	parameters: {
		value1: $F("name_of_id_1"),
		value2: $F("name_of_id_2")
	},
	onSuccess: showResponse,
	onFailure: showError
});

Objektorienterad programmering redigera

Prototype lägger även till stöd för mer traditionell objektorienterad programmering. Class.create()-metoden används för att skapa en ny klass. En klass tilldelas sedan en prototype som fungerar som en modell för instanser av klassen.

	var FirstClass = Class.create({
		// Initierngsmetoden fungerar som en konstruktör
		initialize: function (){
			this.data = "Hello World";
		}
	});

Uppgradering av en annan klass:

	Ajax.Request= Class.create( Ajax.Base, { 
		// Skriv över initierngsmetoden
		initialize: function( url, options ){ 
			this.transport = Ajax.getTransport(); 
			this.setOptions(options); 
			this.request(url); 
		}, 
		// ... Tillägg fler metoder ... 
	});

Ramverks-funktionen Object.extend(dest, src) tar två objekt som parametrar och kopierar egenskaperna hos det andra objektet till den första och simulerar arv. Den kombinerade objektet är också returnerat som ett resultat av funktionen. Som i exemplet ovan, den första parametern skapar vanligtvis basobjektet, medan den andra är ett anonymt objekt som endast används för att definiera ytterligare egenskaper. Hela underklassdeklarationen sker inom parenteserna i funktionsanropet.

Problem redigera

I motsats till andra Javascript-bibliotek så som jQuery, gjorde Prototype beslutet att bygga ut DOM, men det finns planer på att åtgärda det i nästa stora version av biblioteket^[4].

I april 2010, bloggaren "kangax" (tillhörande Prototype Core) beskriver utförligt de problem som kan följa av att lägga till nya metoder och egenskaper till objekten definieras av W3C DOM^[4]. Dessa idéer avbildar tankar publicerade i mars 2010 med Yahoo!-utvecklaren Nicholas C. Zakas^[5], De har sammanfattas på följande sätt^[6]:

Cross-browser problem: objekt värden har inga regler, Internet Explorers DOM är en enda röra, etc
Risk för namnkollisioner
Prestandakostnader

Vid 2008, vissa specifika problem med hjälp av DOM-uppgraderade metoder i äldre versioner av Prototype, i kombination med nyare versioner av dagens webbläsare fanns redan dokumenterade^[7]. Snarare än att lägga till nya metoder och egenskaper till redan existerande "värd" DOM-objekt som Element, så som element.hide(), lösningen på dessa problem är att ge wrapper-objektet runt dessa värd-objekt och tillägga nya metoder till dessa. jQuery är ett sådant wrapper-objekt i biblioteket med samma namn^[4].

Det är nu allmänt förväntat att flertalet av dessa idéer och frågor kommer att behandlas i samband med frisläppandet av Prototype 2.0, men Prototype utvecklare måste lära sig att arbeta med en annorlunda syntax och mycket befintlig Prototype-kod kommer att bli föråldrad^[6].