| Autor | Zpráva | ||
|---|---|---|---|
| weroro Profil |
#1 · Zasláno: 26. 8. 2014, 18:50:14
Zdravím, mám trochu času na nič nerobenie a tak som chcel niečo vyskúšať. Snažím sa vytvoriť funkciu podobnú
$('#nejakeID') v jQuery.
Napísal som toto: function el(key, obj) {
var type = key.substring(0, 1);
var name = (type != '.' && type != '#') ? key : key.substring(1);
var doc = obj || document;
if (type == '#') return doc.getElementById(name);
else if (type == '.') return doc.getElementsByClassName(name);
return doc.getElementsByTagName(name);
}el('#mojeID').el('.trieda')[1]
Teraz to mám urobené ako druhý argument v tej funkcii, lenže vo výsledku je to viac ako hrozne neprehľadné. Poradíte prosím akým spôsobom by sa to dalo vyriešiť? Ďakujem za nápady, rád sa niečo priučím. |
||
| Radek9 Profil |
#2 · Zasláno: 26. 8. 2014, 19:06:42
weroro:
Opravdu máš potřebu znovu vynalézat kolo? Já si tím taky prošel a můžu tě ujistit, že tě to stejně přestane bavit. A i kdyby ne, tak ti bude trvat celkem dlouho, než tvoje řešení dosáhne dokonalosti a rychlosti již existujících. Pokud se ti (např. kvůli těžkotonážnosti) nelíbí jQuery, existuje hromada lehčíh řešení. Podívej se třeba na Ender. Je to jakýsi builder, který ti z vybraných knihoven splácá něco jako jQuery. „Poradíte prosím akým spôsobom by sa to dalo vyriešiť?“ Musíš výsledky volání DOM metod obalit do nějakého vlastního objektu, který bude mít metodu el. Ta metoda bude vypadat prakticky stejně, až na to, že za obj se rovnou dosadí this. Taktéž budeš to řešení asi muset přepsat, aby jako rodiče dokázalo brát pole elementů. Navíc ber na vědomí, že jedině document má metodu getElementById, což znamená, že případ el("#id1").el("#id2") bys musel řešit jinak.
|
||
| Joker Profil |
#3 · Zasláno: 26. 8. 2014, 19:29:13
weroro:
„neviem ako docieliť aby som mohol volať viac týchto funkcií jednu ako objekt ďalšej“ No prostě to nevrátí element, ale objekt, který má zase nějaké metody. Ale viz [#2] Radek9, snažit se imitovat jQuery mi připadá jako ztráta času. Jinak to řetězení metod se dá použít i normálně, třeba: document.getElementById("prvek").querySelector("p.odstavec").parentElement.style.color
Akorát podle mě to ve většině případů vede k nečitelnému a špatně pochopitelnému kódu (ostatně příkladem toho „špatně pochopitelného“ je i dotaz [#1]). |
||
| 1Pupik1989 Profil |
#4 · Zasláno: 26. 8. 2014, 22:24:52
Mě to nepřipadá jako ztráta času. Taky jsem před lety napsal selekci elementů dle CSS zápisu a do teď ho používám místo Sizzlu. Ve starších prohlížečích bez podpory document.querySelector dosahuji poloviny času zpracování.
Klidně vymýšlej znovu kolo, pokud to předchozí je hranaté. |
||
| weroro Profil |
#5 · Zasláno: 26. 8. 2014, 22:34:10
Radek9:
Vôbec nejde o vymýšľanie vymysleného. Slúži to iba pre moje lepšie pochopenie problematiky. Rovnako ako som pred časom napísal svoju vlastnú knižnicu v ActionScripte pre spracovanie MP3 a vďaka tomu som sa naučil oveľa viac ako keby som si tú dokumentáciu k MP3 iba bezhlavo prečítal. Joker: „Jinak to řetězení metod se dá použít i normálně, třeba: document.getElementById("prvek").querySelector("p.odstavec").parentElement.style.color“ Na tvar "p.odstavec" som zabudol. Ak sa mi podarí vyriešiť stávajúci problém, ošetrím aj toto. Ďakujem.
1Pupik1989: Ako som už písal vyššie, nechcem to používať, iba sa na tom učím. V ďaka Radek9kovi už aspoň viem po čom sa mám poobzerať. „Musíš výsledky volání DOM metod obalit do nějakého vlastního objektu, který bude mít metodu el. Ta metoda bude vypadat prakticky stejně, až na to, že za obj se rovnou dosadí this.“ |
||
| 1Pupik1989 Profil |
#6 · Zasláno: 26. 8. 2014, 23:09:15
Pokud chceš laškovat s výběrem podle selektorů, tak spíš zkus regulární výrazy. "div.trida" už by skončil chybou.
Hlavně pak to budeš moci rozvinout dál, třeba pokud budeš chtít hledat i potomky. Na vyblbnutí ideální. Pak to můžeš vypustit do světa a někdo to třeba i využije. |
||
| Joker Profil |
#7 · Zasláno: 26. 8. 2014, 23:23:23
1Pupik1989:
„Taky jsem před lety napsal selekci elementů dle CSS zápisu a do teď ho používám místo Sizzlu. Ve starších prohlížečích bez podpory document.querySelector dosahuji poloviny času zpracování.“ No, já už v dobách, kdy bylo jQuery horká novinka, moc nechápal, proč vlastně vybírat elementy podle CSS zápisu. Pak jsem u několika projektů zažil takovou vlnu, kdy se začalo masivně používat jQuery na všechno, pak se zjistilo, že je to pomalé a zase se od jQuery upouštělo. Pri té příležitosti jsem zjistil, že drtivou většinu výskytů jQuery nahradí funkčnost dostupná prakticky všude, konkrétně: getElementById, getElementsByTagName a parentElement, přinejhorším ještě getElementsByClassName která se do starších prohlížečů sice musí doplnit, ale zkopírovat si někde getElementsByClassName a psát si vlastní jQuery je přece jen rozdíl. Snad jen dva jQuery selektory jsem nedokázal nahradit ničím jednodušším než querySelector, že to na IE7 a starších nebude fungovat bylo v obou případech přijatelné (v jednom je to irelevantní, protože je pro tu aplikaci nikdo nepoužívá, ve druhém takový prohlížeč degradoval na variantu bez JS). weroro: „Ako som už písal vyššie, nechcem to používať, iba sa na tom učím.“ V tom případě mi přijde lepší si stáhnout třeba kód jQuery, zkoumat a hrát si. Je lepší se vrtat v něčem už hotovém a zkoumat jak to funguje, než to celé vymýšlet od základu. |
||
| Jan Tvrdík Profil |
#8 · Zasláno: 26. 8. 2014, 23:49:28
Takové jednoduché JQuery na 300 řádků kdysi bylo součástí Nette – github.com/nette/nette/blob/v2.0.6/client-side/NetteQ/netteQ.js
|
||
| 1Pupik1989 Profil |
Tak používám to pro sebe. Samozřejmě pokud ten web nebude pro mě, tak jsem mnohem radši, když není závislý na nějaké knihovně.
Napsal jsem si to spíš ze zvědavosti. Samozřejmě to bylo založené na "document.getElement*" a "Node.childNodes". Pojal jsem to spíš jako knihovnu pro kompatibilitu ve starších prohlížečích. Takže jsem k tomu později i připsal metody a události jako třeba nextElementSibling a DOMSubtreeModified, které jsou taktéž pro mě zbytečné. Nakonec se to celé obalilo do jedné větší knihovny. Jediné co z toho používám je asi Ajax, BinaryStream, protože čtu 3ds soubory. Nicméně ta emulace querySelectorAll upadla do zapomnění, protože normální web už jsem nenapsal ani nepamatuji. |
||
|
Časová prodleva: 10 let
|
|||
0