Prototip (cadru)

Versiunea actuală a paginii nu a fost încă revizuită de colaboratori experimentați și poate diferi semnificativ de versiunea revizuită la 11 august 2016; verificările necesită 11 modificări .
Cadru JavaScript prototip
Tip de JavaScript - bibliotecă
Dezvoltator Echipa de bază prototip
Scris in JavaScript
Sistem de operare Software multiplatformă
ultima versiune 1.7.3 ( 22 septembrie 2015 )
Licență Licență MIT
Site-ul web prototipjs.org

Prototype  este un cadru JavaScript care facilitează lucrul cu Ajax și cu alte funcții de nivel scăzut. Prototype este disponibil ca o bibliotecă autonomă și vine, de asemenea, cu Ruby on Rails , Tapestry , script.aculo.us și Rico .

Se precizează că acest cadru este compatibil cu următoarele browsere: Internet Explorer ( Windows ) 6.0+, Mozilla Firefox 1.5+ , Apple Safari 2.0.4+ și Opera 9.25+, Google Chrome 1.0+. Suportul pentru aceste browsere înseamnă că cadrul este compatibil și cu Camino , Konqueror , IceWeasel , Netscape 7+, SeaMonkey , Yandex.Browser și altele care aparțin aceleiași familii.

Caracteristici

Prototype oferă o varietate de moduri de a simplifica crearea de aplicații JavaScript, de la apeluri scurte la anumite funcții ale limbajului până la metode complexe de accesare a XMLHttpRequest . Mai jos sunt câteva exemple.

Funcția $()

Pentru a accesa elementul DOM al unei pagini HTML , se folosește de obicei următoarea funcție document.getElementById:

document . getElementById ( "id_of_element" )

Funcția $()reduce codul la:

$ ( "id_of_element" )

Dar, spre deosebire de o funcție DOM$() , mai mult de un argument poate fi transmis unei funcții, iar funcția va returna un Array de obiecte cu toate elementele care se potrivesc:

var ar = $ ( 'id_1' , 'id_2' , 'id_3' ); pentru ( i = 0 ; i < ar . lungime ; i ++ ) { alert ( ar [ i ]. innerHTML ); }

De exemplu, pentru a specifica culoarea textului, puteți utiliza următorul cod:

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

Sau, folosind funcțiile avansate ale Prototype:

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

Cod pentru versiunile sub 1.5:

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

Funcția $$()

Funcția $$()va fi utilă celor care separă adesea CSS de conținut. Împarte unul sau mai multe filtre CSS care sunt date ca o expresie obișnuită și returnează elementele care se potrivesc cu acele filtre. De exemplu, când executați acest script:

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

obținem o matrice care conține toate elementele cu class .inp, care sunt în containerul div cu id id="block".

Notă: momentan (în versiunea 1.5.0) implementarea funcției $$()în prototype.jsnu este foarte eficientă. Dacă intenționați să utilizați frecvent această funcție pe documente HTML mari și complexe , puteți lua în considerare alte implementări și pur și simplu înlocuiți funcția în sine.

Funcția $F()

Similar cu $(), funcția $F()returnează valoarea unui anumit element de formular HTML. Pentru un câmp text, funcția va returna datele conținute în element. Pentru un element „select”, funcția va returna valoarea selectată în prezent.

$F ( "id_of_input_element" )

Notă: semnul dolar $ este caracterul legal normal pentru identificatorii JavaScript; a fost adăugat în mod deliberat la limbaj în același timp cu suportul pentru expresii regulate pentru a permite metacaractere compatibile cu Perl , cum ar fi$` и $'.

Funcția $A()

Funcția $A()convertește singurul argument pe care îl primește într-un obiect Array. Această caracteristică, combinată cu extensii la clasa Array, face ușoară convertirea sau copierea oricăror liste enumerabile într-un obiect Array. Un caz de utilizare este convertirea listelor de noduri DOM în matrice obișnuite care pot fi utilizate mai eficient.

Funcția $H()

Funcția $H()convertește obiectele în obiecte hash enumerabile, care sunt similare cu o matrice asociativă.

//Să presupunem că avem un obiect: var hash = { method : post , type : 2 , flag : t }; //Când folosiți funcția: var h = $H ( hash ); //Obține: alertă ( h . toQueryString ()); //method=post&type=2&flag=t

obiect Ajax

Obiectul Ajax oferă metode simple pentru a inițializa și a lucra cu funcția XMLHttpRequest , fără a fi nevoie de a adapta codul la browserul dorit. Există două modalități de a invoca un obiect: Ajax.Requestreturnați ieșirea XML a cererii AJAX, în timp ce Ajax.Updaterplasați răspunsul serverului în ramura DOM selectată.

Ajax.Requestîn exemplul de mai jos, găsește valorile a două câmpuri de intrare, solicită pagina de la server folosind valorile ca cerere POST și, la finalizare, execută funcția personalizată showResponse():

var val1 = escape ( $F ( "numele_id_1" )); var val2 = escape ( $F ( "numele_id_2" )); var url = "http://server-ul/calea/scriptul_server" ; var pars = { valoare1 : val1 , valoare2 : val2 }; var myAjax = Ajax nou . Solicitare ( url , { metoda : "post" , parametri : pars , onComplete : showResponse });

Clasa de elemente

Metodele de clasă sunt concepute pentru a funcționa cu elemente HTML. Constructorul clasei este folosit pentru a crea un element HTML.

element nou ( tagName [,{ atribute }])

Eticheta HTML este transmisă constructorului ca șir și, dacă este necesar, atributele etichetei.

Un exemplu de creare a unui element nou:

// Creați un element <div> în memorie și specificați id, atributele clasei. var newElement = element nou ( 'div' ,{ id : 'childDiv' , class : 'divStyle' }); // Includeți elementul creat în DOM-ul browserului, și anume <div> existent, // folosind metoda Element.insert Element . insert ( $ ( 'parrentDiv' ), newElement );

Programare orientată pe obiecte

Prototype adaugă, de asemenea, suport pentru programarea mai tradițională orientată pe obiecte .

Metoda este folosită pentru a crea o nouă clasă Class.create(). Clasei i se atribuie un prototip prototypecare acționează ca bază pentru fiecare instanță a clasei. Clasele vechi pot fi extinse cu altele noi folosind Object.extend.

// creează o nouă clasă în stilul prototip 1.6 var FirstClass = Class . create ({ // Initializeaza constructorul initialize : function () { this . data = "Hello World" ; } }); // creează o nouă clasă în stilul prototip 1.5 var DataWriter = Class . creați (); datawriter . prototip = { printData : function () { document . scrie ( aceasta . date ); } }; obiect . extinde ( DataWriter , FirstClass );

Vezi și

Note

Link -uri