Prototyp (ramverk)

Den aktuella versionen av sidan har ännu inte granskats av erfarna bidragsgivare och kan skilja sig väsentligt från versionen som granskades den 11 augusti 2016; kontroller kräver 11 redigeringar .
Prototyp JavaScript-ramverk
Sorts JavaScript - bibliotek
Utvecklaren Prototyp Core Team
Skrivet i JavaScript
Operativ system Programvara för flera plattformar
senaste versionen 1.7.3 ( 22 september 2015 )
Licens MIT-licens
Hemsida prototypejs.org

Prototyp  är ett JavaScript - ramverk som gör det enkelt att arbeta med Ajax och några andra lågnivåfunktioner. Prototypen är tillgänglig som ett fristående bibliotek och kommer även med Ruby on Rails , Tapestry , script.aculo.us och Rico .

Det anges att detta ramverk är kompatibelt med följande webbläsare: Internet Explorer ( Windows ) 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0.4+ och Opera 9.25+, Google Chrome 1.0+. Stöd för dessa webbläsare gör att ramverket även är kompatibelt med Camino , Konqueror , IceWeasel , Netscape 7+, SeaMonkey , Yandex.Browser och andra som tillhör samma familjer.

Funktioner

Prototyp tillhandahåller en mängd olika sätt att förenkla skapandet av JavaScript-applikationer, från stenografiska anrop till vissa språkfunktioner till komplexa metoder för åtkomst till XMLHttpRequest . Nedan följer några exempel.

Funktion $()

För att komma åt DOM- elementet på en HTML- sida, används vanligtvis följande funktion document.getElementById:

dokument . getElementById ( "id_of_element" )

Funktionen $()reducerar koden till:

$ ( "id_of_element" )

Men till skillnad från en DOM- funktion $()kan mer än ett argument skickas till en funktion, och funktionen returnerar en Array av objekt med alla matchande element:

var ar = $ ( 'id_1' , 'id_2' , 'id_3' ); for ( i = 0 ; i < ar . längd ; i ++ ) { alert ( ar [ i ]. innerHTML ); }

Till exempel, för att ange textfärgen kan du använda följande kod:

$ ( "id_of_element" ). stil . color = "#ffffff" ;

Eller, med hjälp av de avancerade funktionerna i Prototype:

$ ( "id_of_element" ). setStyle ({ färg : '#ffffff' });

Kod för versioner under 1.5:

element . setStyle ( "id_of_element" , { color : "#ffffff" });

Funktion $$()

Funktionen $$()kommer att vara användbar för dem som ofta separerar CSS från innehåll. Den delar upp ett eller flera CSS- filter som ges som ett reguljärt uttrycksliknande uttryck och returnerar de element som matchar dessa filter. Till exempel, när du kör det här skriptet:

var f = $$ ( 'div#block .inp' );

vi får en array som innehåller alla element med klass .inp, som finns i container div med id id="block".

Notera: för närvarande (i version 1.5.0) är implementeringen av funktionen $$()i prototype.jsinte särskilt effektiv. Om du planerar att använda den här funktionen ofta på stora och komplexa HTML- dokument kan du överväga andra implementeringar och helt enkelt byta ut själva funktionen.

Funktion $F()

På samma sätt som returnerar $()funktionen $F()värdet för ett specifikt HTML-formulärelement. För ett textfält returnerar funktionen data som finns i elementet. För ett "select"-element returnerar funktionen det för närvarande valda värdet.

$F ( "id_of_input_element" )

Obs: Dollartecknet $ är det normala juridiska tecknet för JavaScript-identifierare; det lades medvetet till språket samtidigt som stöd för reguljära uttryck för att tillåta Perl - kompatibla metakaraktärer som t.ex.$` и $'.

Funktion $A()

Funktionen $A()konverterar det enda argumentet den tar emot till ett Array-objekt. Den här funktionen, i kombination med tillägg till Array-klassen, gör det enkelt att konvertera eller kopiera alla uppräknade listor till ett Array-objekt. Ett användningsfall är att konvertera DOM NodeLists till vanliga arrayer som kan användas mer effektivt.

Funktion $H()

Funktionen $H()konverterar objekt till numerable hash-objekt, som liknar en associativ array.

//Låt oss säga att vi har ett objekt: var hash = { method : post , type : 2 , flag : t }; //När du använder funktionen: var h = $H ( hash ); //Get: alert ( h . toQueryString ()); //method=post&type=2&flag=t

Ajax-objekt

Ajax-objektet tillhandahåller enkla metoder för att initiera och arbeta med XMLHttpRequest- funktionen , utan att behöva skräddarsy koden till önskad webbläsare. Det finns två sätt att anropa ett objekt: Ajax.Requestreturnera XML-utdata från AJAX-begäran, samtidigt Ajax.Updatersom serverns svar placeras i den valda DOM-grenen.

Ajax.Requesti exemplet nedan hittar den värdena för två inmatningsfält, begär sidan från servern med värdena som en POST-begäran, och efter slutförandet utförs den anpassade funktionen showResponse():

var val1 = escape ( $F ( "namn_på_id_1" )); var val2 = escape ( $F ( "namn_på_id_2" )); var url = "http://dinserver/sökväg/server_skript" ; var pars = { värde1 : val1 , värde2 : val2 }; var myAjax = nya Ajax . Request ( url , { method : "post" , parametrar : pars , onComplete : showResponse });

Elementklass

Klassmetoder är designade för att fungera med HTML-element. Klasskonstruktorn används för att skapa ett HTML-element.

nytt element ( tagnamn [,{ attribut }])

HTML-taggen skickas till konstruktorn som en sträng och, om nödvändigt, taggattributen.

Ett exempel på att skapa ett nytt element:

// Skapa ett <div>-element i minnet och ange id, class-attribut. var newElement = nytt element ( 'div' , { id : 'childDiv' , class : 'divStyle' }); // Inkludera det skapade elementet i webbläsarens DOM, nämligen det befintliga <div>, // med hjälp av Element.insert Element -metoden . infoga ( $ ( 'parrentDiv' ), newElement );

Objektorienterad programmering

Prototype lägger också till stöd för mer traditionell objektorienterad programmering .

Metoden används för att skapa en ny klass Class.create(). Klassen tilldelas en prototyp prototypesom fungerar som grund för varje instans av klassen. Gamla klasser kan utökas med nya med Object.extend.

// skapa en ny klass i prototyp 1.6 style var FirstClass = Class . skapa ({ // Initiera konstruktorn initiera : function () { this . data = "Hello World" ; } }); // skapa en ny klass i prototyp 1.5 style var DataWriter = Class . skapa (); dataskrivare . prototyp = { printData : function () { document . skriv ( detta .data ) ; } }; objekt . extend ( DataWriter , FirstClass );

Se även

Anteckningar

Länkar