Prototype egyszerűsítése ajax

Miért használja Prototype?

A végén, prototípus is végez XMLHttpRequest funkciót. miután a Ajax.Request és kapcsolódó tárgyakat. Többé nem kell kódot írni, hogy ezt a tárgyat a különböző böngészőkben.

A könyvtár, mely tartalmazza az alkalmazás HTML-fájlt is tartalmaz nevű könyvtárba js. Ez a könyvtár tartalmazza prototype.js. objektum kódja ezt a cikket co2.js. fájl valamint és a többi alkalmazás kódot eevapp.js fájlt.

az éghajlatváltozás

Ahogy Prototype segíthet minket alkalmazások? Mik a követelmények ezek az alkalmazások?

CO2 applet

A 1-1 ábra mutatja a képernyőn a böngésző a kérelmet. A bal felső sarokban a kérelmet - egy kisalkalmazás, amely azt mutatja, a CO2 szint a légkörben a kiválasztott évben a felhasználó által.


Ábra 1-1. select elem mutatja CO2 szint

Ezeket az adatokat kaptunk a Mauna Loa vizsgálatok által kijelölt amerikai kormány, hogy végezzen Hawaii. Mérések nagy magasságban a tartalékok. A tudósok világszerte használni ezt az információt a tanulmányait az éghajlatváltozás.

Amikor elindul Prototype

A eevapp.js fájl kódot tartalmaz, mely lefut, amikor a felhasználó kiválasztja a listából az év.

Jelentése „co2_select” - áll az id a kiválasztáslistán, amelyben a felhasználó rákattint választásával egy évben.

visszatér egy hivatkozás a DOM-elem. Ez ekvivaletnno végrehajtás document.getElementById ( "co2_select"); .

Egyszerűbben fogalmazva, ha a felhasználó kiválasztja az év az éves menüben, a böngésző ezt a feladatot. Hogy ezt a feladatot? A függvény megkapja utalás a HTML div azonosítójú elem „co2ppm”, ismét a rövidítés Prototype'a. Div innerHTML tulajdonság az objektum. jelezve, hogy a felhasználó látja a böngésző - a visszaadott érték a hívást a módszer

Object nevű co2lev leírt felső része eevapp.js fájlt.

tömör szintaxis

A dollár szimbólum megjelenik az szintaxis: $ F ( „co2_select”). Függvény prototípus $ F () értékét adja meg a elemet a HTML formátumban. Az alkalmazás ezt a funkciót változtatni a CO2 szint azt mutatja, minden alkalommal, amikor a felhasználó kiválaszt egy másik évben.

Van egy darab tanácsot a $ F (): válassza ki a listából az érték csak ki, ha az opció elem tartalmazza az attribútum értékét: . Különben is, Prototype'a verziót használni (1.4.0) nem ad értéket a $ F (). ha kihagytam része value = „”.

áttekintése

Meghatározása CO2Levels objektum megjelenik a fájl co2.js. 1-2 a képen képviselt UML-osztály diagram tárgy leírását.

Prototype egyszerűsítése ajax

Ábra 1-2. osztálydiagram

Itt van a teljes kód a CO2Levels tárgyakat. Az első sor létrehoz egy új objektumot az alapvető szintaxis Prototype, egy helyi változó szinten - egy objektum hasonlít egy asszociatív tömb, amely összeköti, a CO2 szint. Nem én írtam az évek többségében annak érdekében, hogy az egészet olvasható.

Objektumok létrehozásához Prototype

Prototype-Hash objektum

Például, Hash.keys () módszer adja vissza egy tömbben minden Hash gombos (mint például egész évben). értékeket () módszer adja vissza egy tömbben értékek (CO2 szint). merge () metódus hozzáadja az új kulcsokat és értékeket a Hash.

A létesítmény CO2Levels használja a szubszidiaritás elvét, amely szerint arra utal, hogy a saját kulcsok () metódust. értékeket (). és add (). Ezek a módszerek munkát átruházhatja egy beágyazott objektumot Hash. amely tárolja a helyi változót: levelsHash.

Nézzük getYear ().

Hozzátéve, hogy a létező hash

Egy tárgy tartalmaz egy módszert CO2Levels hozzá (). amely új kulcsok és értékek (további évben, és a szintek CO2) a meglévő adatokat.

A kód ezután átadja az objektum feldolgozásra összeolvadásával () Prototype-Object Hash. Ez a módszer ötvözi az új, a meglévő adatokat a hash, amely egyesíti őket egyetlen adathalmazt, vagy egy asszociatív tömbben.

merge () metódus visszaadja a meglévő adatokat az új ingatlan-érték párt, hozzátéve, hogy a végén.

Egy kis refactoring kódot használja XMLHttpRequest a mintavétel minden új információt a CO2 szintet Mauna Loa Obszervatórium, majd adja hozzá a meglévő adatokat a kliens oldalon.

A végén, a prototípus Hash objektum is vizsgáljuk () módszer. Hála neki, van egy olvasható kijelző tartalmának hash, mint a kép 1-3.

Prototype egyszerűsítése ajax

Ábra 1-3. Hash. Úgy néz ki.

Object CO2Levels átruházott feladatok vizsgáljuk () metódus a belső objektum Prototype Hash.

Kapcsolódó cikkek