Prototyp (rámec)

Aktuální verze stránky ještě nebyla zkontrolována zkušenými přispěvateli a může se výrazně lišit od verze recenzované 11. srpna 2016; kontroly vyžadují 11 úprav .
Prototyp JavaScript Framework
Typ JavaScript - knihovna
Vývojář Prototyp základního týmu
Zapsáno v JavaScript
Operační systém Multiplatformní software
Nejnovější verze 1.7.3 ( 22. září 2015 )
Licence Licence MIT
webová stránka prototypejs.org

Prototype  je framework JavaScript , který usnadňuje práci s Ajaxem a některými dalšími nízkoúrovňovými funkcemi. Prototype je k dispozici jako samostatná knihovna a také obsahuje Ruby on Rails , Tapestry , script.aculo.us a Rico .

Uvádí se, že tento framework je kompatibilní s následujícími prohlížeči: Internet Explorer ( Windows ) 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0.4+ a Opera 9.25+, Google Chrome 1.0+ . Podpora těchto prohlížečů znamená, že framework je také kompatibilní s Camino , Konqueror , IceWeasel , Netscape 7+, SeaMonkey , Yandex.Browser a dalšími, které patří do stejné rodiny.

Funkce

Prototype poskytuje řadu způsobů, jak zjednodušit vytváření aplikací JavaScript, od zkrácených volání po určité jazykové funkce až po složité metody přístupu k XMLHttpRequest . Níže jsou uvedeny některé příklady.

Funkce $()

Pro přístup k prvku DOM stránky HTML se obvykle používá následující funkce document.getElementById:

dokument . getElementById ( "id_of_element" )

Funkce $()redukuje kód na:

$ ( "id_of_element" )

Ale na rozdíl od funkce DOM lze funkci $()předat více než jeden argument a funkce vrátí pole objektů se všemi odpovídajícími prvky:

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

Chcete-li například určit barvu textu, můžete použít následující kód:

$ ( "id_of_element" ). styl . barva = "#ffffff" ;

Nebo pomocí pokročilých funkcí Prototype:

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

Kód pro verze nižší než 1.5:

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

Funkce $$()

Funkce $$()bude užitečná pro ty, kteří často oddělují CSS od obsahu. Rozdělí jeden nebo více filtrů CSS , které jsou uvedeny jako výraz podobný regulárnímu výrazu , a vrátí prvky, které těmto filtrům odpovídají. Například při provádění tohoto skriptu:

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

dostaneme pole obsahující všechny prvky s class .inp, které jsou v kontejneru div s id id="block".

Poznámka: v tuto chvíli (ve verzi 1.5.0) není implementace funkce $$()v prototype.jspříliš efektivní. Pokud plánujete tuto funkci často používat na velkých a složitých dokumentech HTML , můžete zvážit jiné implementace a jednoduše nahradit samotnou funkci.

Funkce $F()

Podobně jako $()funkce $F()vrací hodnotu určitého prvku formuláře HTML. U textového pole funkce vrátí data obsažená v prvku. U prvku „select“ funkce vrátí aktuálně vybranou hodnotu.

$F ( "id_of_input_element" )

Poznámka: Znak dolaru $ je normální právní znak pro identifikátory JavaScript; byla do jazyka záměrně přidána současně s podporou regulárních výrazů , aby umožnila Perl - kompatibilní metaznaky, jako např.$` и $'.

Funkce $A()

Funkce $A()převede jediný argument, který obdrží, na objekt Array. Tato funkce v kombinaci s rozšířeními třídy Array usnadňuje převod nebo kopírování libovolných seznamů s výčtem do objektu Array. Jedním z případů použití je převod DOM NodeLists na běžná pole, která lze používat efektivněji.

Funkce $H()

Funkce $H()převádí objekty na vyčíslitelné hash objekty, které jsou podobné asociativnímu poli.

//Řekněme, že máme objekt: var hash = { metoda : příspěvek , typ : 2 , příznak : t }; //Při použití funkce: var h = $H ( hash ); //Získat: alert ( h . toQueryString ()); //method=post&type=2&flag=t

Objekt Ajax

Objekt Ajax poskytuje jednoduché metody pro inicializaci a práci s funkcí XMLHttpRequest bez nutnosti přizpůsobovat kód požadovanému prohlížeči. Existují dva způsoby, jak vyvolat objekt: Ajax.Requestvrátit výstup XML požadavku AJAX a zároveň Ajax.Updaterumístit odpověď serveru do vybrané větve DOM.

Ajax.Requestv příkladu níže najde hodnoty dvou vstupních polí, požádá o stránku ze serveru pomocí hodnot jako požadavek POST a po dokončení provede vlastní funkci showResponse():

var val1 = escape ( $F ( "jméno_id_1" )); var val2 = escape ( $F ( "jméno_id_2" )); var url = "http://váš server/cesta/script_serveru" ; var pars = { hodnota1 : hodnota1 , hodnota2 : hodnota2 }; var myAjax = nový Ajax . Požadavek ( url , { metoda : "post" , parametry : pars , onComplete : showResponse });

Třída prvku

Metody třídy jsou navrženy pro práci s prvky HTML. Konstruktor třídy se používá k vytvoření prvku HTML.

nový prvek ( tagName [,{ atributy }])

HTML tag je předán konstruktoru jako řetězec a v případě potřeby atributy tagu.

Příklad vytvoření nového prvku:

// Vytvořte prvek <div> v paměti a zadejte id, atributy třídy. var newElement = new Element ( 'div' ,{ id : 'childDiv' , class : 'divStyle' }); // Zahrňte vytvořený prvek do DOM prohlížeče, konkrétně existující <div>, // pomocí metody Element.insert Element . insert ( $ ( 'parrentDiv' ), newElement );

Objektově orientované programování

Prototype také přidává podporu pro tradičnější objektově orientované programování .

Metoda se používá k vytvoření nové třídy Class.create(). Třídě je přiřazen prototyp prototype, který funguje jako základ pro každou instanci třídy. Staré třídy lze rozšířit o nové pomocí Object.extend.

// vytvoření nové třídy ve stylu prototypu 1.6 var FirstClass = Class . create ({ // Inicializace konstruktoru initialize : function () { this . data = "Ahoj světe" ; } }); // vytvoření nové třídy ve stylu prototypu 1.5 var DataWriter = Class . vytvořit (); datawriter . prototype = { printData : function () { document . zapisovat ( tato . data ); } }; objekt . extend ( DataWriter , FirstClass );

Viz také

Poznámky

Odkazy