Komentáře k článku
JavaScript Restart – QuerySelector

Setkávám se často s vývojáři jejichž první úvaha nad implementací začíná napsáním “$”. jQuery je všudypřítomné, a pro tyto vývojáře je překvapení, že se dá psát bez něj.
Setkávám se často s vývojáři jejichž první úvaha nad implementací začíná napsáním “$”. jQuery je všudypřítomné, a pro tyto vývojáře je překvapení, že se dá psát bez něj.
Po 3⁄4 roce práce v Golangu jsem se vrátil na chvíli k Javě. Doufám, že jen dočasně. Protože, když člověk na dostatečně dlouhý čas vypadne z prostředí, kde dlouhodobě pobýval, a vrátí se zpět, najednou mu dojde, jak jsou některé věci obskurní. A jak některé věci, které byly vymyšleny s nejlepšími úmysly pomáhat, ve skutečnosti práci zatemňují a ztěžují. Je to, jako když žijete v prasečáku a už si pak neuvědomujete, že prasata smrdí.
Funkce jQuery nevrací pole
V článku je jedna nepřesnost: funkce jQuery (nebo častěji $) nevrací pole, nýbrž objekt jQuery.
Dojem, že $ vrací pole, může podpořil Chrome Developer Tools, který (nepochopitelně) v konzoli objekty jQuery vypisuje úplně stejně, jako by šlo o pole. Proto třeba na školeních jQuery jsem vždycky trval raději na používání Firebugu, který to vypisuje správně.
Objekt jQuery ukládá podobně jako pole prvky pod číselné klíče a má proměnnou length, tudíž se s ním dá trošku jako s polem pracovat (říká se tomu array-like object), ale další metody, jako například v článku zmíněnou forEach, nemá ani jQuery. Pro převod jQuery na pole slouží metoda
toArray()
.Ale jinak fajn článek. jQuery splnilo svou důležitou historickou úlohu a většinu jeho někdejších úloh dnes zvládá nativní DOM. jQuery je dnes knihovna pro AJAXové requesty a promise pattern ;-)
Re: Funkce jQuery nevrací pole
Ajéje, to jsem si nikdy neuvědomil a Chrome Console mne nachytala. Inu člověk se učí pořád.
Pod větu
bych se i podepsal.
O XHR a promisích třeba někdy příště.
Re: Funkce jQuery nevrací pole
Dev tools to loguje ako array preto, lebo ma v prototype ulozenu array.prototype.splice.
https://gist.github.com/danielhusar/6030dcf3e615e7f482f1
Další nepřesnosti
Pár dalších nepřesností:
element.className.replace('active', '').trim();
odstraní nejen tříduactive
, ale iactive
ze všeho, co to obsahuje jako podřetězec. Obvykle se používalo něco jako.replace(/(^| )active( |$)/g, ' ')
.document.all
není funkce, ale vlastnost.item
, ale tím, že mají vlastnostlength
.Re: Funkce jQuery nevrací pole
Ani pro ten promise pattern není, protože jQuery ho zkurvila a nikdy neopraví. tl;dr Nepracuje vůbec s chybama.
Rozdíl mezi objektem jQuery, NodeList (statický) a HTMLCollection
Funkce document.getElementsBy* nevrací pole, ale
HTMLCollection
. Tato kolekce má sice propertu length a k prvkům je možné přistupovat přes index (podpbně jako v případě objektu jQuery), ale oproti nim jeHTMLCollection
„živá“. Kolekce je automaticky aktualizována pokud dojde ke změně v dokumentu.Funkce
document.querySelectorAll
vrací statickýNodeList
. V tomto případě nedochází k automatické aktualizaci. Zde je nutné upozornit také na existenci „živého“ NodeList. V tomto typu jsou uloženy napříkladchildNodes
.Neviem, neviem
Chapem motivaciu zanechat jQuery a vratit sa k nativnym funkciam Javascriptu, ale prave jedna z vlastnosti, pre ktore je jQuery tak oblubene je moznost venovat sa inym veciam, nez mysliet na to, ci ta a ta implementacia bude podporovana v tom a tom prehliadaci.
A ked som si pocas citania clanku uvedomil, ze asi polovica textu je venovana tomu ako treba to a to volanie upravit aby bolo podporovane v tom a tom prehliadaci, tak som si povedal, ze toto nebude pre mna.
Re: Neviem, neviem
Všechno v článku funguje od IE 10, tady na cca 90-95 % prohlížečů. Tedy pro tyto nejčastější úkoly už pomalu přestává být jQuery potřeba. Na některých webech už dnes, na jiných brzy.
Re: Neviem, neviem
No právě, IE10 je už hodně velký luxus. Běžně se setkávám spíše s požadavky na IE9, občas i IE8. Často i na WinXP. Situace ve velkých korporátech je smutná. A může jít klidně i o veřejný web, ale když si ho ředitěl se svou IE8 neprohlídne, tak je úplně jedno, že 95% zbytku světa ano :)
I když není vše tak špatné, třeba jeden zákazník teď od nového roku IE8 upustil a začal používat rovnou IE11.
Re: Neviem, neviem
Souhlas. Děláme veřejný web, ředitel IE 8 nemá, ale zato business má statistiku prohlížečů uživatelů. Teprve asi před rokem jsem prosadil, že kulaté rohy se už konečně mohou dělat přes border-radius a ne obrázky, ale pořád platí, že uživatel s IE 8 musí mít plnohodnotný přístup k aplikaci, byť s povolenými grafickými odlišnostmi, jako třeba ty nekulaté rohy.
Na podzim jsme dělali jedno zobrazení, na které by bylo super inline SVG. Bohužel, to by nefungovalo v IE 8, takže to neprošlo a musím to kreslit Javascriptem v Raphael… :(
Tak holt vypadá komerční realita mimo technologická dema a startupy :) Když mám na webu pár návštěvníků, tak se s IE 9 / IE 8 patlat nevyplatí, ale pro navštěvovanější weby dávají v absolutních číslech pořád dost lidí, aby se vyplatilo kvůli tomu vývojáře prudit.
Re: Neviem, neviem
Ve finale stejne clovek potrebuje nejaky obal na tu nativni API, protoze ta API je skvela v tom, ze dava nekonecne moznosti pouziti, ale chtel bych si implementovat chainovani, atd… Kazdopadne v IE10+ je to otazka cca jednoho dne napsat si knihovnicku na selector a manipulaci s nody. Stejne tak ajaxy nejsou zadna veda s XHR a FormData.
Jen bych jeste dodal k clanku, ze jak insertAdjacentHTML tak innerHTML je akorat tak cesta pro XSS a navic budu mit nekde v stringu seredny HTML. Takze pokud to delam u klienta, tak si to muzu krasne sestavit z document.createElement, document.createTextNode a pokud si posilam HTML, ze serveru tak bych si mel byt sakra jisty co tam mam, nez to takhle vlozim do stranky.
You might not need jQuery…
Docela šikovný web pro rychlé oživení „čistého“ javascriptu po letech používání jQuery – http://youmightnotneedjquery.com/
Re: You might not need jQuery…
Ten clanok prave krasne ukazuje ze JQuery ma zmysel. Kazdy zapis v JQuery je kratsi ako v nativnom HTML a tym padom aj prehladnejsi… Od toho su kniznice, aby sme zbytocne nepisali kod, ktory uz napisal niekto iny, ale venovali sa podstate problemu, ktory riesime.
Sizzle
Faktická: není to náhodou tak, že knihovna Sizzle (se kterou pracuje jQuery) používá querySelectorAll pokud je dostupné? řádek na Gitu jako důkaz…
Tím se ale nesnažim tvrdit, že by práce s nativním JS nebyla rychlejší. I kdyby byly ve výsledku použity stejné metody, knihovny budou mít vždy režii navíc. Na druhou stranu knihovny se těší podobnějšímu chování napříč prohlížečovým spektrem, člověk se pak nemusí starat o vyjímky a fallbacky.
Pokud jde ale v prvé řadě o výkon, není těžké si jednoduchý fallback napsat:
if(!document.querySelectorAll) document.querySelectorAll = Sizzle;
jQuery 2
Vzhledem k tomu, že jQuery 2 většinu z těchto novinek používá, tak nevidím důvod jej nepoužít. Minimálně kvůli větší přehlednosti a úspornosti kódu.