Prototyyppi (kehys)

Kokeneet kirjoittajat eivät ole vielä tarkistaneet sivun nykyistä versiota, ja se voi poiketa merkittävästi 11. elokuuta 2016 tarkistetusta versiosta . tarkastukset vaativat 11 muokkausta .
Prototyyppi JavaScript Framework
Tyyppi JavaScript - kirjasto
Kehittäjä Prototyypin ydintiimi
Sisään kirjoitettu JavaScript
Käyttöjärjestelmä Monialustainen ohjelmisto
uusin versio 1.7.3 ( 22. syyskuuta 2015 )
Lisenssi MIT-lisenssi
Verkkosivusto prototypejs.org

Prototyyppi  on JavaScript - kehys , jonka avulla on helppo työskennellä Ajaxin ja joidenkin muiden matalan tason ominaisuuksien kanssa. Prototyyppi on saatavana erillisenä kirjastona , ja mukana tulee myös Ruby on Rails , Tapestry , script.aculo.us ja Rico .

Tämän kehyksen väitetään olevan yhteensopiva seuraavien selainten kanssa: Internet Explorer ( Windows ) 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0.4+ ja Opera 9.25+, Google Chrome 1.0+. Näiden selainten tuki tarkoittaa, että kehys on yhteensopiva myös Camino , Konqueror , IceWeasel , Netscape 7+, SeaMonkey , Yandex.Browser ja muiden samoihin perheisiin kuuluvien kanssa.

Ominaisuudet

Prototype tarjoaa useita tapoja yksinkertaistaa JavaScript-sovellusten luomista lyhyistä kutsuista tiettyihin kielitoimintoihin monimutkaisiin menetelmiin pääsyyn XMLHttpRequest . Alla on esimerkkejä.

Toiminto $()

HTML -sivun DOM - elementtiin pääsemiseksi käytetään yleensä seuraavaa toimintoa : document.getElementById

asiakirja . getElementById ( "elementin_tunnus" )

Toiminto $()pienentää koodin seuraavasti:

$ ( "elementin_tunnus" )

Mutta toisin kuin DOM - funktio $(), funktiolle voidaan välittää useampi kuin yksi argumentti, ja funktio palauttaa joukon objekteja , joissa on kaikki vastaavat elementit:

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

Voit esimerkiksi määrittää tekstin värin käyttämällä seuraavaa koodia:

$ ( "elementin_tunnus" ). tyyliin . väri = "#ffffff" ;

Tai käyttämällä Prototypen lisäominaisuuksia:

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

Koodi alle 1.5-versioille:

elementti . setStyle ( "elementin_tunnus" , { väri : "#ffffff" });

Toiminto $$()

Toiminto $$()on hyödyllinen niille, jotka usein erottavat CSS :n sisällöstä. Se jakaa yhden tai useamman CSS -suodattimen, jotka annetaan säännöllisen lausekkeen kaltaisena lausekkeena , ja palauttaa näitä suodattimia vastaavat elementit. Esimerkiksi suoritettaessa tätä komentosarjaa:

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

saamme taulukon, joka sisältää kaikki elementit luokan kanssa .inp, jotka ovat säilössä div tunnuksella id="block".

Huomaa: tällä hetkellä (versiossa 1.5.0) funktion toteutus $$()ei prototype.jsole kovin tehokasta. Jos aiot käyttää tätä toimintoa usein suurissa ja monimutkaisissa HTML - dokumenteissa, voit harkita muita toteutuksia ja yksinkertaisesti korvata itse funktion.

Toiminto $F()

Kuten $(), funktio $F()palauttaa tietyn HTML-lomakeelementin arvon. Tekstikentässä funktio palauttaa elementin sisältämät tiedot. 'select'-elementille funktio palauttaa tällä hetkellä valitun arvon.

$F ( "id_of_input_element" )

Huomautus: Dollarimerkki $ on JavaScript-tunnisteiden normaali merkki; se lisättiin kieleen tarkoituksella samaan aikaan säännöllisen lausekkeen tuen kanssa, jotta Perl - yhteensopivia metamerkkejä, kuten esim.$` и $'.

Toiminto $A()

Funktio $A()muuntaa vastaanottamansa yksittäisen argumentin Array-objektiksi. Tämä ominaisuus yhdistettynä Array-luokan laajennuksiin helpottaa lueteltujen luetteloiden muuntamista tai kopioimista Array-objektiksi. Yksi käyttötapaus on muuntaa DOM NodeLists tavallisiksi taulukoiksi, joita voidaan käyttää tehokkaammin.

Toiminto $H()

Funktio $H()muuntaa objektit numeroitaviksi hajautusobjekteiksi, jotka ovat samanlaisia ​​kuin assosiatiivinen taulukko.

//Oletetaan, että meillä on objekti: var hash = { method : post , type : 2 , flag : t }; //Käytettäessä funktiota: var h = $H ( hash ); //Hanki: hälytys ( h . toQueryString ()); //method=post&type=2&flag=t

Ajax-objekti

Ajax-objekti tarjoaa yksinkertaisia ​​menetelmiä XMLHttpRequest -toiminnon alustamiseen ja käyttämiseen ilman tarvetta räätälöidä koodia halutun selaimen mukaan. Objektia voi kutsua kahdella tavalla: Ajax.Requestpalauttaa AJAX-pyynnön XML-ulostulon ja Ajax.Updatersijoittaa palvelimen vastauksen valittuun DOM-haaraan.

Ajax.Requestalla olevassa esimerkissä se löytää kahden syöttökentän arvot, pyytää sivua palvelimelta käyttämällä arvoja POST-pyyntönä ja suorittaa suoritettuaan mukautetun toiminnon showResponse():

var arvo1 = escape ( $F ( "tunnus_1_nimi" )); var val2 = escape ( $F ( "nimi_id_2" )); var url = "http://palvelimesi/polku/palvelimen_skripti" ; var pars = { arvo1 : arvo1 , arvo2 : arvo2 }; var myAjax = uusi Ajax . Request ( url , { method : "post" , parametrit : pars , onComplete : showResponse });

Element class

Luokkamenetelmät on suunniteltu toimimaan HTML-elementtien kanssa. Luokkakonstruktoria käytetään HTML-elementin luomiseen.

uusi elementti ( tagName [,{ attribuutit }])

HTML-tunniste välitetään rakentajalle merkkijonona ja tarvittaessa tag-attribuutit.

Esimerkki uuden elementin luomisesta:

// Luo muistiin <div>-elementti ja määritä id, luokkaattribuutit. var newElement = new Element ( 'div' ,{ id : 'childDiv' , class : 'divStyle' }); // Sisällytä luotu elementti selaimen DOM:iin, nimittäin olemassa oleva <div>, // käyttämällä Element.insert Element -metodia . insert ( $ ( 'parrentDiv' ), newElement );

Olio-ohjelmointi

Prototyyppi lisää myös tuen perinteisempään olioohjelmointiin .

Menetelmää käytetään uuden luokan luomiseen Class.create(). Luokka saa prototyypin prototype, joka toimii luokan jokaisen esiintymän perustana. Vanhoja luokkia voidaan laajentaa uusilla käyttämällä Object.extend.

// luo uusi luokka prototyypin 1.6 tyyliin var FirstClass = Class . create ({ // Alusta konstruktori alustus : function () { this . data = "Hei maailma" ; } }); // uuden luokan luominen prototyypin 1.5 tyyliin var DataWriter = Class . luo (); datakirjoittaja . prototyyppi = { printData : function ( ) { dokumentti . kirjoittaa ( this . data ); } }; esine . laajentaa ( DataWriter , FirstClass );

Katso myös

Muistiinpanot

Linkit