| Autor | Zpráva | ||
|---|---|---|---|
| maks Profil |
#1 · Zasláno: 16. 10. 2013, 10:47:09
Ahoj, snažím se co nejvíce optimalizovat zápis jednotlivých JS na stránce. Záleží, z jaké strany se ono optimalizování vezme, spíše mi jde o následující. Vysvětlím na příkladu.
Mám stránku, která v hojné míře využívá JavaScript, pomáhám si knihovnou jQuery. V současné chvíli to vypadá tak, že mám na konci stránky přilinkovaný jeden velký JS soubor, který obsahuje vše (včetně jQuery, mých funkcí a také události navěšené na jednotlivé elementy v $(document).ready() (to jsou typicky akce reagující na klik, apod., čili el.click(...)).
Nyní mě něco osvítilo a napadlo mě následující: 1. nechat jeden velký soubor, nebo jich mít více menších? 2. jak řešit jednoduché akce na stránce? Například "po kliknutí na element změň třídu". 2a) mám vše naprat do toho externího CSS? 2b) mám si přímo v místě, kde chci akci udělat, vytvořit jednořádkový interní script (podle ID, tedy přiřadit všem inkriminovaným elementům ID a akci cílit podle getElementById)? 2c) mám to navěsit přímo jako událost na daný element (čisté JS)? Možná řeším zbytečnosti a dalo by se to zjednodušit na následující: Pokud mám přilinkované jQuery (nebo obecně jinou knihovnu), mám psát vše s jeho pomocí, nebo jen to nutné a zbytek čistý JS? Děkuji za názory. |
||
| Chamurappi Profil |
#2 · Zasláno: 16. 10. 2013, 11:25:44
Reaguji na makse:
„1. nechat jeden velký soubor, nebo jich mít více menších?“ Pokud má být na všech stránkách stejná sestava, tak jeden velký. A samozřejmě umístěný v kódu co nejníž. Na druhou otázku asi není obecně jednoznačná odpověď. Někdy se hodí to, jindy ono, záleží na struktuře webu a na rozsahu těch jednoduchých akcí. Kloním se spíš k tomu neprat do společných JS to, co v nich být nemusí, pokud není předpoklad, že stejná či obdobná funkce bude v budoucnu potřeba i jinde a že ji bude nutné organizovaně upravovat. „Pokud mám přilinkované jQuery (nebo obecně jinou knihovnu), mám psát vše s jeho pomocí, nebo jen to nutné a zbytek čistý JS?“ Já bych na tvém místě asi nepoužíval jQuery vůbec na nic :-) |
||
| Amunak Profil |
#3 · Zasláno: 16. 10. 2013, 11:25:57
Pro rychlost načítání je spíš lepší mít vše v jednom souboru. Pokud ho přilinkuješ až na samotný konec sránky, snad ani není potřeba používat $(document).ready() - DOM už bude z velké části načtený.
Když používáš jQuery, hlavně zkus co nejvíc omezit volání jQuery objektu. Tedy piš čistým JS co jen jde. jQuery je časově/výpočetně velmi náročné (v porovnání s čistým JS). (2c) je samozřejmě nejrychlejší varianta. Inline skripty jsou taky fajn, ale dělají kód špatně čitelným. |
||
| maks Profil |
#4 · Zasláno: 16. 10. 2013, 11:39:20
Amunak:
„Inline skripty jsou taky fajn, ale dělají kód špatně čitelným.“ jsou to šablony o pár řádkách, takže mi ta nepřhlednost až tolik nevadí. Chamurappi: „Já bych na tvém místě asi nepoužíval jQuery vůbec na nic :-)“ já vím, já vím. Ale jsou věci, které jsem líný si psát sám. Nejsem v tom natolik dobrý, aby se mi časová investice v odpovídající hodnotě vrátila. „Pokud má být na všech stránkách stejná sestava, tak jeden velký“ ... a pokud má být sestava na každé stránce jiná? Nebudu přeci udržovat X různých souborů. Nyní v tom jednom JS souboru je např. kód pro implementaci google mapy (ale volání v onloadu na body pouze na jedné stránce, takže na ostatních je považován tento x-řádkový kód za balast), volání nějakého galerického pluginu, který se používá také na dvou, třech stránkách (volám ho jako $('#gal').plugin({options}).
Považoval jsem to vždy za ne nutné se tím více zabývat, je to pár kB kódu, který je kešovaný a měl jsem za to, že tam ničemu nevadí. Ale teď jsem jiného názoru, proto tohle vlákno, jak pracovat "lépe". |
||
| Amunak Profil |
#5 · Zasláno: 16. 10. 2013, 11:58:05
maks:
„... a pokud má být sestava na každé stránce jiná“ Pak budeš muset buď udržovat více souborů, ale pokud skutečně máš kód, který se někde použije jen jednou, tak ho umísti přímo do té šablony. |
||
| maks Profil |
#6 · Zasláno: 16. 10. 2013, 12:02:16
Amunak:
„Pak budeš muset buď udržovat více souborů“ ...což je při řádově stovkách stran nesmysl, že? Vezměme pak ještě v úvahu ty části nyní obludně velkého souboru, které se volají třeba na 10 stránkách z celkového počtu stovek stran (řádově téměř 10%). Pokud vezmu v úvahu rozsekání současného na elementární soubory a linkování na příslušná místa, vznikne pak zase zmatek v momentě, kdy budu chtít zavolat galerii na dalších stránkách. Ano, kód si můžu rozkopírovat (zatímco při současném řešení stačí použít stejné ID), ale při změně nastavení už bude vše náročné, měnit nastavení všude (pokud ho budu chtít mít napříč webem stejné). -- Zkrátka, současný nabobtnalý soubor se mi nelíbí, ale přijde mi vcelku praktický. Hledám lepší řešení, ale ne takové, které mi bude práci pouze přidělávat. |
||
| Kcko Profil |
#7 · Zasláno: 16. 10. 2013, 12:16:43
maks:
1. mít vícero souborů (obecné funkce, pluginy, rozhod si strukturu dle logiky a na výstupu 1 zminifikovaný (jsou na to nástroje). 2. jak řešit jednoduché akce na stránce? Například "po kliknutí na element změň třídu". 2a) ano, je jen velmi málo případů, kdy se hodí inline styly na stránce. 2b) eh? prostě to piš jak se to v jQuery má psát. Zacil hlavní element a naveš eventy na jeho děti tak jak potřebuješ. 2c) Co Ti vadí na jQuery? Odprosti se od zdejších antijQuery názorů a napiš několik racionálních důvodů proč jQuery nepoužívat? |
||
| Amunak Profil |
#8 · Zasláno: 16. 10. 2013, 12:22:50
maks:
A není pak chyba v tom, že je to všude rozdílné? Jak velké jsou ty rozdíly? Musel bys dát konkrétnější příklad. Bavit se takhle obecně o mikrooptimalizacích nemá smysl, záleží na konkrétní situaci. |
||
| maks Profil |
#9 · Zasláno: 16. 10. 2013, 12:30:01
Kcko:
„2b) eh? prostě to piš jak se to v jQuery má psát“ to tak dělám teď a řeším, jestli to je optimální cesta nebo ne. „2c) Co Ti vadí na jQuery? Odprosti se od zdejších antijQuery názorů a napiš několik racionálních důvodů proč jQuery nepoužívat?“ myslíš Chamurappiho, že? O tobě zase vím, že jseš extrém na druhé straně. Nevadí mi nic konkrétního, hledám lepší způsob, pokud existuje. Amunak: „A není pak chyba v tom, že je to všude rozdílné?“ těžko říct :-) „Musel bys dát konkrétnější příklad.“ ten jsem víceméně dal. Galerie se volá jen na konkrétní/ch podstránce/kách. Google mapy se volají v kontaktech. Slidery se volají na stránkách x, y, z, ale ne jinde. Zároveň ale pokud budu chtít slider na stránku xy, potřebuju ho tam přidat nějak efektivně, ne Ctrl+C, Ctrl+V. Když budu potřebovat změnit nastavení slideru, pak na jednom místě pro všechny slidery. Dále, na jedné stránce mám 5 tlačítek, kterými potřebuji na té samé stránce měnit nějakou třídu rodiče. To byl ten spouštěcí moment a zamyšlení se, jestli to dát přímo tam, nebo do externího souboru, který nafouknu jen kvůli, že tu část kódu některý návštěvník možná využije. Většina třeba ani ne. |
||
| Kcko Profil |
maks:
Lepší způsob existuje v konkreténí situaci. Pokud nevyvíjíš nějakou speciální aplikaci, ve které záleží na každé ms tak nevidím důvod nepoužívat jQuery. (Samozřejmě s rozvahou, pokud budes psát věci typu $("a.test").funkce() ale budeš psát věci rozumně tak rozdíl nepoznáš.
JS šetří čas procesoru jQuery šetří čas programátora a to v dnešní době jde. Flejmu jQuery vs pureJS bych se chtěl vyhnout, už to tady bylo mnohokrát. |
||
| maks Profil |
Kcko:
„Flejmu jQuery vs pureJS bych se chtěl vyhnout, už to tady bylo mnohokrát.“ tomu jsem se chtěl vyhnout taky, nevidím důvod pro tvé "útočení" v [#7]. Jsou dva typy lidí, JS vs. jQuery (přestože tam žádné "vs" ve skutečnosti není), ale o to v této diskusi nejde. Když už jsme u toho, zeptám se na tvůj názor zarputilého bojovníka za jQuery: Když potřebuju na několika elementech s třídou zavolat nějakou funkci, jak bys to "správně" řešil? Přidat onclick tomu elementu s danou třídou (resp. všem), nebo ho pak zaměřit přes nějakého rodiče (čili $('#id .trida').funkce())? Samotné $('.trida').funkce() se ti (ani mě), nelíbí.
Původní otázka ale trvá, tímto příspěvkem jsem udělal jen malou odbočku pro Kcka. |
||
| Amunak Profil |
#12 · Zasláno: 16. 10. 2013, 12:44:53 · Upravil/a: Amunak
maks:
Já bych to asi udělal tak,že všechny (datově) menší konstrukce, které se používají na více stránkách (tedy nějaké to přehazování tříd, slidery) bych dal do jednoho. Galerii do souboru zvlášť - jde o odlišnou část webu, kam se dost možná velká část návštěvníků ani nepodívá, a předpokládám, že její kód bude složitější. Google mapy můžou být jen v kontaktech, přímo v šabloně. Prostě postupuj podle rozumu. (ne)rozdělování na soubory a vkládání přímo do šablon má vliv jenom v požadavku na nový soubor, a obecně na rychlost stažení stránky. Když je něco většího, co má cenu rozdělovat, a tahá se to jen někde, tak to přilinkuju jen někam. Když jde o jeden řádek kódu, dám si to do souboru, který linkuju všude, protože se mi kvůli tomu nevyplatí spravovat sto souborů, každý s jednou funkcí. maks: „Když potřebuju na několika elementech s třídou zavolat nějakou funkci, jak bys to "správně" řešil? Přidat onclick tomu elementu s danou třídou (resp. všem), nebo ho pak zaměřit přes nějakého rodiče (čili $('#id .trida').funkce())? Samotné $('.trida').funkce() se ti (ani mě), nelíbí.“ Obecně platí, že je dobré snažit se pomocí běžných selektorů co nejvíc vyselektovat cílový element, a až pak používat ty čistě "js" elementy, které si jQuery implementuje. Tedy najdeš nejmenší množinu prvků, která obsahuje to co potřebuješ (bude to třeba div#obalovy) a v nem pak uz hledas .vnitrni-baleni. Nebo tak něco. |
||
| Kcko Profil |
maks:
Já na nikoho neutočím, stojím prostě na opačné straně barikády. Pokud Ti někdo zarputile tvrdí, že používat jQuery je cesta do pekel tak já si to prostě nemyslím. Tím, že zacílíš na konkrétnější skupinu prvků, např. přes ID bude výběr rychlejší. $(".trida").funkce(); nemusí být ani pomalé, otázkou je jak s tím naloží konkrétní prohlížeč. Novější budou podporovat querySelector. Koneckonců se můžeš podívat na hiearchii vyhodnocování selektorů přímo v jQuery ... Pokud si budeš jistý, že se identifikátor nezmění můžeš to použít tak, případně selektor upravíš. To je tak vždy. Amunak: Obecně platí, že je dobré snažit se pomocí běžných selektorů co nejvíc vyselektovat cílový element, a až pak používat ty čistě "js" elementy, které si jQuery implementuje. Tedy najdeš nejmenší množinu prvků, která obsahuje to co potřebuješ (bude to třeba div#obalovy) a v nem pak uz hledas .vnitrni-baleni. Nebo tak něco. Ano tak to myslím. |
||
| maks Profil |
#14 · Zasláno: 16. 10. 2013, 12:54:40
Kcko:
„Pokud Ti někdo zarputile tvrdí, že používat jQuery je cesta do pekel tak já si to prostě nemyslím.“ to já si také nemyslím, ale zároveň si nemyslím, že co se dělá čistým JS, je blbost (zbytečnost, nazvi to, jak uznáš za vhodné). Takový budiž tvůj postoj shrnutý do pár slov. Amunak: jo, tak nějak jsem to taky myslel. |
||
| Kcko Profil |
maks:
Uved příklad čistého JS (konkrétní kus kódu) když vezmeme v potaz fakt, že používáš na webu knihovnu jQuery. |
||
| maks Profil |
Kcko:
třeba konkrétně tohle (spouštěč k mému zamyšlení a této diskusi): <span id="rating">
<input type="hidden" id="hidden_rating" name="rating" value="0">
<span onclick="document.getElementById('hidden_rating').value = '1'; this.parentNode.className = 's1'"></span>
<span onclick="document.getElementById('hidden_rating').value = '2'; this.parentNode.className = 's2'"></span>
<span onclick="document.getElementById('hidden_rating').value = '3'; this.parentNode.className = 's3'"></span>
<span onclick="document.getElementById('hidden_rating').value = '4'; this.parentNode.className = 's4'"></span>
<span onclick="document.getElementById('hidden_rating').value = '5'; this.parentNode.className = 's5'"></span>
</span>Po kliknutí na hvězdičku se počet předá do hidden inputu a parentu se nastaví třídu, abych věděl, kolik hvězdiček zobrazit barevných (CSS). Možnosti jsem měl asi tři, následující: 1) takto, jak jsem to poslal sem 2) do společného souboru v jQuery asi takto var rating_el = $('#rating');
$('#rating span').click(function() {
var index = $(this).index() + 1; // mozna parseInt? Nevim, nezkousel jsem
rating.val(index); // prip. nejakym atributem, ktery bych do HTML pridal, misto .index(), cili .attr('atribut')
rating_el.attr('class', 's' + index);
});<span id="rating">
<input type="hidden" id="hidden_rating" name="rating" value="0">
<span onclick="change(1);"></span>
<span onclick="change(2)"></span>
<span onclick="change(3)"></span>
<span onclick="change(4)"></span>
<span onclick="change(5)"></span>
</span>
<script>
function change(id) {
document.getElementById('rating').className('s' + id);
document.getElementById('hidden_rating').value = id;
}
// toto do sablony, nebo do externiho souboru?
</script> |
||
| Kcko Profil |
#17 · Zasláno: 16. 10. 2013, 13:25:26
2) je dle mého v pořádku. Napsal bych to skoro stejně, akorát místo
$('#rating span').click(function() napsal rating_el.on("click", "span", function(){});
3) psát eventy přímo do HTML je prostě ugly. |
||
| maks Profil |
Kcko:
případně ještě možnost: <span id="rating">
<input type="hidden" id="hidden_rating" name="rating" value="0">
<span onclick="change(1);"></span>
<span onclick="change(2)"></span>
<span onclick="change(3)"></span>
<span onclick="change(4)"></span>
<span onclick="change(5)"></span>
</span>a JS do externího souboru, ať už tak, jak jsem to napsal já, nebo ten dvojřádek přepsat do syntaxe jQuery. Ale tady už se mi trochu příčí (jestli se to tak dá nazvat) to "přepsání" v čisté JS podoby do něčeho jiného jen kvůli tomu, že to tam mám někde přilinkované kvůli něčemu úplně jinému. Chamurappi, mohl bys, prosím, tuhle diskusi nějak shrnout? Přidat ještě nějaký názor na to či ono? |
||
| Str4wberry Profil |
#19 · Zasláno: 16. 10. 2013, 13:28:52
Asi nejlepší mi přijde možnost 3. Jinak dávat funkci, která se zřejmě nebude používat jinde, do společného souboru, mi přijde zbytečné.
|
||
| Kcko Profil |
maks:
Svůj názor jsem Ti napsal. Jestli se Ti příčí to dávat do nějakého obecného souboru a tím ho zbytečně "nabalovat" tak si do dej do zvláštního souboru a přilinkuj ho jen tam kde tuto funkcionalitu máš. I když každý soubor = 1 HTTP požadavek navíc a to taky není nic moc. Já svoje CSS a JS píšu do připravených krabiček dle logiky a poté se to celé zmerguje do 1 souboru, zminifikuje a zagzipuje. A jestli řešíš že výsledný soubor bude mít místo 12,5kB 13kB tak mi to přijde jako zbytečná mikrooptimalizace. Poté můžeš projít i všechny obrázky a stáhnout jejich kompresi k pokud možno co nejlepšímu výsledku v poměru kvalita zobrazení X velikost. Pak můžeš vyházet i bílá místa v HTML a PHP kódu ..a pokračovat vesele do doby, než se z toho zblázníš ;] |
||
| Amunak Profil |
maks:
Možnost tři je asi nejlepší - při (1) se zbytečně opakuje kód, řešit něco tak primitivního pomocí jQuery je asi zbytečné, ale přemýšlels nad případem, kdy uživatel nemůže vyvolat událost click? Co když používá klávesnici? Co když je na dotykovém zařízení? Co když má vypnutý Javascript? Místo spanů bych používal odkazy a zaměřil se spíš na přístupnost, než mikrooptimalizace. |
||
| Chamurappi Profil |
#22 · Zasláno: 16. 10. 2013, 14:40:23
Reaguji na makse:
„... a pokud má být sestava na každé stránce jiná? Nebudu přeci udržovat X různých souborů.“ Je jejich udržování náročné? Pokud mají vymezený účel, můžou běžet dlouhodobě bez úprav. Když chceš někam vložit mapu, musíš tam jednak mít nějaké související HTML, jednak (třeba externí) skript pro ni. Proč ten externí skript nezačleníš do toho souvisejícího HTML? Totéž u galerie — proč skript pro galerii jednoduše nešoupneš za <div>, se kterým by měl pracovat? Při sestavování HTML stejně musíš s tím skriptem počítat, tak proč ho odkládat kamsi do kouta?
Nebál bych se ani stejným způsobem přilinkovat specifické CSS. Dávat vždy za všech okolností skripty ke skriptům a styly ke stylům mi připadá zbytečně pracné a neefektivní, web si raději představuji dělený na kousky podle účelu, nikoliv podle formátu. (Podobné stanovisko zastávám i při návrhu adresářové struktury.) Mám zkušenosti z jednoho velkého webu s dosti rozmanitými požadavky na skripty pro obsahovou část, kde programátor všechny své jQuery špagety ládoval do jednoho externího JS. Během šesti let přestalo být zřejmé, co se vlastně kde používá, co ještě žije a co už ne. Nikdo si netroufá potenciálně mrtvé kusy skriptů smazat, zrovna tak se všichni bojí vyměnit (velmi obstarožní) verzi jQuery, takže ta zpočátku lákavá studnice hotových skriptů (aka jQuery pluginů) postupně vysychá a na dřívější rozpustilost se už jen nadává, nadává a nadává. Udělat tlustou čáru za minulostí nejde. Kdyby každá vylomenina byla ve svém externím JS, mohla by ležet na serveru navěky (případně s nějakou konzervační úpravou), aniž by ovlivňovala uživatelský prožitek tam, kde se nepoužívá. Ohledně $('#id .trida') vs. $('.trida') — druhá možnost bude nejspíš ve většině prohlížečů rychlejší, protože jQuery nepoužije querySelectorAll, ale getElementsByClassName. Z hlediska praktičnosti a prozíravosti toho či onoho zápisu bych asi přemýšlel podobně jako u selektorů v CSS.
„třeba konkrétně tohle“ Jestli to má být hodnocení hvězdičkami, tak to bych asi udělal úplně bez JavaScriptu. Myslím, že by stačilo pár <label>ů, overflow, <input type="radio"> a špetka pozicování a mělo by to frčet všude. Spíchne někdo živou ukázku?
Reaguji na Kcka: „psát eventy přímo do HTML je prostě ugly“ Celé HTML je ugly. Sžít se s nepořádkem je lepší, než vymýšlet umělý sterilní pořádek :-) S tématem docela souvisí starší vlákno Definování volání JavaScriptu v HTML atributech. „A jestli řešíš že výsledný soubor bude mít místo 12,5kB 13kB tak mi to přijde jako zbytečná mikrooptimalizace.“ On se z takových drobečků může postupným nabalováním vyklubat megadrobeček. Je lepší řešit podobné otázky dřív, než později (protože pak už tuplem nemá cenu dílčí úprava, která z 673 kB udělá 672,5 kB). Ostatní optimalizace, které zmiňuješ, může dělat automat. „a pokračovat vesele do doby, než se z toho zblázníš ;]“ Někdo má radost z pocitu extrémně rychlého načítání a někdo z toho, že nemá ugly atributy. Já patřím spíš do té první skupiny bláznů :-) Reaguji na Amunaka: „přemýšlels nad případem, kdy uživatel nemůže vyvolat událost click? Co když používá klávesnici? Co když je na dotykovém zařízení?“ Událost onclick jde vyvolat i klávesnicí (je-li objekt tabovatelný), i dotykem.
|
||
| Kcko Profil |
Chamurappi:
:] nezklamalas, ale napsal jsi to v přátelském duchu, že mne to pobavilo - v dobrém. Mám zkušenosti z jednoho velkého webu s dosti rozmanitými požadavky na skripty pro obsahovou část, kde programátor všechny své jQuery špagety ládoval do jednoho externího JS. Během šesti let přestalo být zřejmé, co se vlastně kde používá, co ještě žije a co už ne. Nikdo si netroufá potenciálně mrtvé kusy skriptů smazat, zrovna tak se všichni bojí vyměnit (velmi obstarožní) verzi jQuery, takže ta zpočátku lákavá studnice hotových skriptů (aka jQuery pluginů) postupně vysychá a na dřívější rozpustilost se už jen nadává, nadává a nadává. Udělat tlustou čáru za minulostí nejde. Kdyby každá vylomenina byla ve svém externím JS, mohla by ležet na serveru navěky (případně s nějakou konzervační úpravou), aniž by ovlivňovala uživatelský prožitek tam, kde se nepoužívá. Ano, sdílím stejný názor. V případě "nepřemýšleče" je jedno jestli to bude jQuery či jiný FW nebo pureJS, dopadne to pravděpodobně špatně. On se z takových drobečků může postupným nabalováním vyklubat megadrobeček. Je lepší řešit podobné otázky dřív, než později (protože pak už tuplem nemá cenu dílčí úprava, která z 673 kB udělá 672,5 kB). Ostatní optimalizace, které zmiňuješ, může dělat automat. U mně je dělá automat, konkrétně js minify (ručně YUI compressor přes makro v ST2), u CSS používám Sass & Ruby. Nicméně bych to neviděl tak tragicky, půl megovou knihovnu jsem ručně psanou ještě neviděl (míním ty kusy kódu, kterými oživuji web, ne hotové obrovské pluginy ... největší knihovnou kterou používám je samotné jQuery a důsledně si vybírám, které z hotových pluginů použiji. Někdo má radost z pocitu extrémně rychlého načítání a někdo z toho, že nemá ugly atributy. Já patřím spíš do té první skupiny bláznů :-) A já jsem někde mezi, protože kdybych patřil do vyloženě do první, tak by se klient nedoplatil. Viz zbytečná mikrooptimalizace X časová úspora X finanční náklad pro klienta. Jedna technická: v případě třetího řešení, dokážete si představit, že by se něco podobného aplikovalo na nějaký delší databázový výpis? Tuna opakujícího se kódu, kde se mění pouze nějaké ID? Zbytečné zaplevelení HTML (nárůst kódu = velikosti). To je v pořádku? |
||
| Amunak Profil |
#24 · Zasláno: 16. 10. 2013, 15:59:40
Chamurappi:
„Událost onclick jde vyvolat i klávesnicí (je-li objekt tabovatelný), i dotykem.“ Právě. A ten jeho span moc klikatelný není. Stejně tak myslím, že telefony by s dotykem na neklikatelný element asi měly poblém posílat onclick, ale nevím, netestoval jsem to. „Kdyby každá vylomenina byla ve svém externím JS, mohla by ležet na serveru navěky (případně s nějakou konzervační úpravou), aniž by ovlivňovala uživatelský prožitek tam, kde se nepoužívá.“ Bonusem je taky to, že požadavky se dají logovat, takže se snadno dá zjistit, které soubory se používají a které (už) ne. |
||
| maks Profil |
#25 · Zasláno: 16. 10. 2013, 19:12:39
Amunak:
„Co když je na dotykovém zařízení?“ hm... ontouchstart místo onclick? Z iPhonu mám vyzkoušeno, že na onclick reaguje dobře, na touchstart všelijak (resp. touchstart odchytí i v momentě, kdy něco chytneš a chtěl bys skrolovat. Nemůžeš, platí touchstat na elementu). Proto používám jen onclick, nikdo si na mobilních verzích dosud nestěžoval a návštěvy mám napříč OS i prohlížeči (myšleno i mobilními samozřejmě). „Co když má vypnutý Javascript?“ Díky za postřeh, toto jsem nedodal a je určitě na místě. Nejavascriptová verze je hotová, s přístupností problém nemám (co se JS týče), uvedl jsem zde příklad. Chamurappi „Spíchne někdo živou ukázku?“ asi netřeba. Když se zamyslím, spíchnu si ji sám. Jestli se mi bude chtít. Kcko: „v případě třetího řešení, dokážete si představit, že by se něco podobného aplikovalo na nějaký delší databázový výpis?“ technická mimo konkrétní problém. Řešíme situaci s pěti (řádově jednotkami) HTML elementů, už nejsme v ryze teoretické rovině, abychom museli vymýšlet podobné extrémní situace. |
||
| Kcko Profil |
#26 · Zasláno: 16. 10. 2013, 19:51:00
maks:
technická mimo konkrétní problém. Řešíme situaci s pěti (řádově jednotkami) HTML elementů, už nejsme v ryze teoretické rovině, abychom museli vymýšlet podobné extrémní situace. Tohle žádná extrémní situace není. Pokud si navykneš užívat způsob 3, tak to jistě nastane. Pokud ne a začínám fantazírovat a výmýšlim si velmi hypotetické situace tak nechápu kvůli čemu to vlákno vzniklo a nenacpal si ty 3 řádky jQuery do obecného souboru. |
||
| Amunak Profil |
#27 · Zasláno: 16. 10. 2013, 20:16:09
maks:
Nejavascriptová verze by měla fungovat i pro touch a klávesnicové uživatele. |
||
| tiso Profil |
#28 · Zasláno: 16. 10. 2013, 22:48:42
1. oddelil by som jquery knižnicu od tvojho custom JS. Takže 2 súbory, z toho ten custom môže vzniknúť minifikáciou z viacerých súborov.
|
||
| joe Profil |
maks:
Když jsem se rozhodoval jakým způsobem psát JavaScript (viz téma Definování volání JavaScriptu v HTML atributech, na které odkazuje Chamurappi), měl jsem podobné myšlenky. V onu chvíli jsem přemýšlel nad napsáním jednoduchého frameworku, který by mi všechno zjednodušil, zpřehlednil a díky němu bych se vyhnul jedné dlouhé funkci, kterou se později málokdo odváží na neznámém webu jakkoli upravovat :-) Cílem bylo nemít hromady načítaných souborů v HTML, zaobalit je všechny do nějaké aplikace, nerozhazovat proměnné do globálního kontextu a mít v tom všem trochu smysl. A tak vzniknul Joy framework, který chce ještě trošičku dopilovat a vítám jakékoli připomínky :-) |
||
| Chamurappi Profil |
#30 · Zasláno: 17. 10. 2013, 19:00:29
Reaguji na makse:
„asi netřeba. Když se zamyslím, spíchnu si ji sám.“ Stejně jsem si to zkusil. Ale koukám, že to asi nešlape ve Webkitech. A kdo ví, kde ještě… Ovšem ve všech Explorerech to jede (dokonce i v mobilním). Kompromis by šel zkonstruovat: <input>y dát mimo <label>y a použít selektory s :checked.
Reaguji na Kcka: „V případě "nepřemýšleče" je jedno jestli to bude jQuery či jiný FW nebo pureJS“ S frameworky jsou ovšem důsledky nepříjemnější, kód mnohem víc kyne (o všechny ty pluginy), víc věcí se může pokazit (kolize verzí, kolize pluginů). Krom zmíněného webu se starou verzí jQuery znám ještě jeden větší web bez frameworku, který také trpí udržováním mnohaleté zpětné kompatibility s dávnými hloupými rozhodnutími, a míra zaplevelení je u něj zřetelně nižší. Samozřejmě, že asi sehrálo roli víc faktorů… „půl megovou knihovnu jsem ručně psanou ještě neviděl (míním ty kusy kódu, kterými oživuji web, ne hotové obrovské pluginy)“ Nevnímám to odděleně. Ohromná spousta webů linkuje všechno všude, občas dokonce vídám ve zdrojácích webů i TinyMCE editor, aniž by ho veřejně přístupné stránky k něčemu využívaly. „v případě třetího řešení, dokážete si představit, že by se něco podobného aplikovalo na nějaký delší databázový výpis?“ Dal bych onclick na společného rodiče. Nebo by mi nevadilo, že stránka trošku vyroste — rostla by jen ona sama a jen lineárně.
„Pokud si navykneš užívat způsob 3, tak to jistě nastane.“ Nebo si navykne posuzovat situace individuálně. V tomhle není žádná velká věda. Reaguji na Amunaka: „telefony by s dotykem na neklikatelný element asi měly poblém posílat onclick, ale nevím“ Telefony si většinou všimnou, že tam je ten onclick a nemají s tím problém. Problematické bývá probublávání onclicku, protože telefon chce dávat uživateli zpětnou vazbu, ukázat, na který klikatelný element se přesně trefil.
Dotykové události nefungují všude, takže onclick je vlastně jediná spolehlivá možnost (má-li se používat JS).
Reaguji na joa: „A tak vzniknul Joy framework, který chce ještě trošičku dopilovat a vítám jakékoli připomínky :-)“ Jaké má výhody proti triviálnímu napojení externího JS? Pořád mi to připadá takové… zbytečně komplikované. |
||
|
Téma pokračuje na další straně.
|
|||
0