Prototípus (keret)

Az oldal jelenlegi verzióját még nem ellenőrizték tapasztalt közreműködők, és jelentősen eltérhet a 2016. augusztus 11-én felülvizsgált verziótól ; az ellenőrzések 11 szerkesztést igényelnek .
JavaScript-keretrendszer prototípusa
Típusú JavaScript - könyvtár
Fejlesztő Prototípus törzscsapat
Beírva JavaScript
Operációs rendszer Többplatformos szoftver
legújabb verzió 1.7.3 ( 2015 . szeptember 22. )
Engedély MIT licenc
Weboldal prototypejs.org

A prototípus  egy JavaScript - keretrendszer , amely megkönnyíti az Ajax és néhány más alacsony szintű szolgáltatás használatát. A prototípus önálló könyvtárként érhető el , és a Ruby on Rails , a Tapestry , a script.aculo.us és a Rico csomaggal is elérhető .

Állítások szerint ez a keretrendszer a következő böngészőkkel kompatibilis: Internet Explorer ( Windows ) 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0.4+ és Opera 9.25+, Google Chrome 1.0+. Ezeknek a böngészőknek a támogatása azt jelenti, hogy a keretrendszer kompatibilis a Camino , Konqueror , IceWeasel , Netscape 7+, SeaMonkey , Yandex.Browser és más, ugyanazon családokhoz tartozó szoftverekkel is.

Jellemzők

A Prototype számos módot kínál a JavaScript-alkalmazások létrehozásának egyszerűsítésére, a gyorsírástól kezdve bizonyos nyelvi függvényekig az XMLHttpRequest eléréséhez szükséges összetett módszerekig . Az alábbiakban néhány példa látható.

Funkció $()

Egy HTML -oldal DOM -elemének eléréséhez általában a következő függvényt használják : document.getElementById

dokumentumot . getElementById ( "elem_azonosítója" )

A függvény $()a kódot a következőre redukálja:

$ ( "elem_azonosítója" )

A DOM - függvénnyel ellentétben azonban $()egynél több argumentum is átadható egy függvénynek, és a függvény egy objektumtömböt ad vissza minden egyező elemmel:

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

Például a szöveg színének megadásához használhatja a következő kódot:

$ ( "elem_azonosítója" ). stílus . color = "#ffffff" ;

Vagy használja a Prototype speciális funkcióit:

$ ( "elem_azonosítója" ). setStyle ({ color : '#ffffff' });

Kód az 1.5 alatti verziókhoz:

elem . setStyle ( "elem_azonosítója" , { szín : "#ffffff" });

Funkció $$()

A funkció $$()hasznos lesz azok számára, akik gyakran választják el a CSS -t a tartalomtól. Feloszt egy vagy több CSS - szűrőt, amelyek reguláris kifejezés -szerű kifejezésként vannak megadva, és visszaadja a szűrőknek megfelelő elemeket. Például a szkript futtatásakor:

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

kapunk egy tömböt, amely tartalmazza az összes osztályú elemet .inp, amely a div tárolóban van id-vel id="block".

Megjegyzés: jelenleg (az 1.5.0-s verzióban) a függvény megvalósítása $$()nem prototype.jstúl hatékony. Ha azt tervezi, hogy ezt a funkciót gyakran használja nagy és összetett HTML dokumentumokon, fontolóra veheti más megvalósításokat, és egyszerűen cserélje ki magát a függvényt.

Funkció $F()

A függvényhez hasonlóan $()a függvény $F()egy adott HTML űrlapelem értékét adja vissza. Szövegmező esetén a függvény az elemben lévő adatokat adja vissza. A „select” elemnél a függvény az aktuálisan kiválasztott értéket adja vissza.

$F ( "id_of_input_element" )

Megjegyzés: A dollárjel $ a JavaScript-azonosítók szokásos jogi karaktere; szándékosan adták hozzá a nyelvhez a reguláris kifejezések támogatásával egy időben, hogy lehetővé tegye a Perl - kompatibilis metakaraktereket, mint pl.$` и $'.

Funkció $A()

A függvény $A()a kapott egyetlen argumentumot egy Array objektummá alakítja. Ez a szolgáltatás az Array osztály kiterjesztésével kombinálva megkönnyíti a felsorolható listák tömbobjektummá való konvertálását vagy másolását. Az egyik felhasználási eset a DOM NodeLists rendszeres tömbökké alakítása, amelyek hatékonyabban használhatók.

Funkció $H()

A függvény $H()az objektumokat felsorolható hash objektumokká alakítja, amelyek hasonlóak egy asszociatív tömbhöz.

//Tegyük fel, hogy van egy objektumunk: var hash = { method : post , type : 2 , flag : t }; //A függvény használatakor: var h = $H ( hash ); //Get: alert ( h . toQueryString ()); //method=post&type=2&flag=t

Ajax objektum

Az Ajax objektum egyszerű módszereket kínál az XMLHttpRequest függvény inicializálására és az azzal való együttműködésre , anélkül, hogy a kódot a kívánt böngészőhöz kellene szabni. Kétféleképpen hívhatunk meg egy objektumot: Ajax.Requestvisszaadjuk az AJAX-kérés XML-kimenetét, miközben Ajax.Updatera kiszolgáló válaszát a kiválasztott DOM-ágba helyezzük.

Ajax.Requestaz alábbi példában megkeresi két beviteli mező értékét, lekéri az oldalt a szervertől az értékeket használva POST kérésként, majd a befejezés után végrehajtja az egyéni funkciót showResponse():

var érték1 = escape ( $F ( "azonosító_1_neve" )); var val2 = escape ( $F ( "azonosító_2 neve" )); var url = "http://yourserver/path/server_script" ; var pars = { érték1 : érték1 , érték2 : érték2 }; var myAjax = new Ajax . Request ( url , { method : "post" , paraméterek : pars , onComplete : showResponse });

Elem osztály

Az osztálymetódusokat HTML elemekkel való együttműködésre tervezték. Az osztálykonstruktort egy HTML elem létrehozására használják.

új elem ( tagName [,{ attribútumok }])

A HTML-címke karakterláncként és szükség esetén a címkeattribútumok formájában kerül átadásra a konstruktornak.

Példa új elem létrehozására:

// Hozzon létre egy <div> elemet a memóriában, és adja meg az id, osztály attribútumait. var newElement = new Element ( 'div' ,{ id : 'childDiv' , class : 'divStyle' }); // Szerelje be a létrehozott elemet a böngésző DOM-jába, mégpedig a meglévő <div>-t, // az Element.insert Element metódus használatával . insert ( $ ( 'parrentDiv' ), newElement );

Objektumorientált programozás

A prototípus a hagyományosabb objektumorientált programozást is támogatja .

A metódus egy új osztály létrehozására szolgál Class.create(). Az osztályhoz hozzárendelnek egy prototípust prototype, amely az osztály minden példányának alapjaként szolgál. A régi osztályok bővíthetők újakkal a segítségével Object.extend.

// hozzon létre egy új osztályt az 1.6-os prototípusban style var FirstClass = Class . create ({ // A konstruktor inicializálása inicializálás : function () { this . data = "Hello World" ; } }); // új osztály létrehozása prototípus 1.5 stílusban var DataWriter = Class . létrehozni (); adatíró . prototípus = { printData : function ( ) { document . írás ( ez . adat ); } }; tárgyat . kiterjeszteni ( DataWriter , FirstClass );

Lásd még

Jegyzetek

Linkek