Účelem tohoto příspěvku na blogu je objasnit některé nejasnosti při používání atributu data v Javascriptu. Jako studentovi softwarového inženýrství se někdy zdá, že svět bootcampu a reálný svět spolu úzce souvisí, a přesto jsou si vzdáleny jako galaxie. Během jedné z přednášek jsme upravovali třídy a přidávali id přímo do html a jeden student se zmínil, že není zrovna moudré tyto věci upravovat, protože návrhový tým by mohl mít problémy.
To dávalo naprostý smysl. Zadejte HTMLElement.dataset. Vlastnost dataset poskytuje programátorům JS možnost číst/zapisovat vlastní atributy elementu. Výhodou je, že je přístupná jak v DOM, tak v HTML.
Matoucí na tom je, že datový atribut HTML a jemu odpovídající dataset.property DOM nemají stejný název. Tohle jsem našel při čtení na webu MDN.
Tady vzniká většina problémů. Jako začínajícímu programátorovi JS mi to přišlo užitečné zejména při nastavování atributů elementům při přidávání posluchačů událostí. Upozornění: Jsem stále ještě student a možná to není nejlepší praxe, ale alespoň jsem nešel do toho a neupravoval stávající HTML.
Po přečtení pravidel pro pojmenování tohoto předmětu se tedy můžeme posunout k užitečným věcem, přístupu k hodnotám a jejich nastavování, po kterém následuje několik příkladů.
Přístup k hodnotám nám podle mého názoru dává více možností manipulace, na rozdíl od pouhého volání na className nebo id. To je mocné, protože se nemusíme starat o to, zda jednoho dne přijde návrhový tým a řekne: hádejte co, přejmenovali jsme všechny naše třídy. Zde je několik příkladů syntaxe:
Tady je příklad, který uvádí Mozilla:
A pro mé kolegy z kohorty tzv.“ Tenhle by měl opravdu zasáhnout do života. S naším párovým programováním Toyland jsme to s Alexem použili takto:
Po rozhovoru s kamarádem, který se nyní učí React, přijdeme na to, že pokud si čtete tento kód, je .innerText je metoda IE a my bychom měli používat .textContent, ale to je na jiný příspěvek.
Při množství času, který trávíme učením nové látky, nám někdy důležité aspekty uniknou. Jakmile přijde projektový týden, věřím, že se všichni mnohem lépe naučíme využívat tyto vlastní nástroje pro manipulaci s DOM a psát čistý kód. Doufám, že se vám čtení líbilo!