Atribút data-dojo-id (Dojo)

So zmenou názvov atribútov určených pre framework Dojo za účelom podpory jazyka HTML5 vznikli nové atribúty, medzi ktoré patri aj atribút data-dojo-id. Úlohou nového atribútu je zjednodušenie prístupu k widgetom a validný zápis v rámci pravidiel jazyka HTML5, pričom prináša aj nástrahy, s ktorými je potrebné počítať.

Nový atribút data-dojo-id pri parsovaní automaticky vytvára globálny objekt, ktorý nahrádza prístup cez registry.byId(). Odpadá tak definovanie modulu dijit/registry čo opäť zjednodušuje programový kód. Aplikovanie atribútu data-dojo-id je demonštrované na nasledujúcom príklade.

Príklad: Zápis do elementu <body>.

1
<div data-dojo-type="dijit/form/Button" data-dojo-id="button"></div>
<div data-dojo-type="dijit/form/Button" data-dojo-id="button"></div>

Príklad: Zápis do elementu <script>.

1
2
3
4
5
6
require(["dojo/ready", "dojo/parser"],
        function(ready) {
          ready(function() {
            button.set("label", "My button");
          });
        });
require(["dojo/ready", "dojo/parser"],
        function(ready) {
          ready(function() {
            button.set("label", "My button");
          });
        });

Atribút data-dojo-id vytvoril globálnu premennú s názvom button, ktorá reprezentuje vytvorený widget. Vďaka premennej button je možné okamžite pristupovať k vlastnostiam a metódam daného widgetu. V tomto prípade je prostredníctvom metódy set() vytvorený nápis pre tlačidlo. Rovnaký výsledok, ale so zdĺhavejším postupom, je možné vytvoriť aj bez atribútu data-dojo-id.

Nasledujúci príklad demonštruje prístup k widgetu prostredníctvom modulu dijit/registry a zápisu registry.byId().

Príklad: Zápis do elementu <body>.

1
<div id="button" data-dojo-type="dijit/form/Button"></div>
<div id="button" data-dojo-type="dijit/form/Button"></div>

Príklad: Zápis do elementu <script>.

1
2
3
4
5
6
7
require(["dojo/ready",  "dijit/registry", "dojo/parser"],
        function(ready, registry) {
          ready(function() {
            var Button = registry.byId("button");
            Button.set("label", "My button");
          });
        });
require(["dojo/ready",  "dijit/registry", "dojo/parser"],
        function(ready, registry) {
          ready(function() {
            var Button = registry.byId("button");
            Button.set("label", "My button");
          });
        });

Pre identifikáciu widgetu je potrebné v elemente <div> definovať atribút id.

Výhody a nevýhody data-dojo-id

Za veľkú nevýhodu prístupu k widgetu cez data-dojo-id patrí skutočnosť, že neskúsený používateľ nevie, kde je premenná zastupujúca widget deklarovaná. Dôvodom je spôsob vytvorenia premennej cez data-dojo-id, teda frameworkom Dojo a nie je programátorom.

Ďalšou nevýhodou je vytvorenie globálnej premennej, ktorá pri zabudnutí, že premenná existuje, môže spôsobiť chyby v programe. Good practices je eliminovať globálne premenné tak, aby ich v programe bolo minimum.

Posledným negatívom je porušenie naming conventions. Ak sa definuje hodnota atribútu data-dojo-id začínajúci veľkým písmenom, môže byť porušená konvencia názvosloví jazyka HTML. Ak sa definuje hodnota atribútu data-dojo-id začínajúci malým písmenom, môže byť porušená konvencia názvosloví jazyka JavaScript.

Okrem uvedených nevýhod je možné poukázať aj na výhody, ktoré nový atribút so sebou prináša. Patrí sem rýchly prístup k widgetu, absencia zápisu modulu a vyhľadávania widgetu cez metódu byId().

Ako eliminovať nevýhody

Pre odstránenie problému s globálnymi premennými je možné využiť konvenciu typu Widgets.Widget. Atribút data-dojo-id podporuje hodnoty so znakom ., ktoré sú transformované na objekt pričom daný objekt nie je potrebné vopred definovať. Vďaka tejto funkcionalite je možné vytvoriť globálny objekt pre všetky takto vytvárané widgety. Podpora zápisu hodnoty so znakom . je demonštrovaná na nasledujúcom príklade.

Príklad: Zápis do elementu <body>.

1
2
<div data-dojo-type="dijit/form/Button" 
data-dojo-id="Widgets.Button"></div>
<div data-dojo-type="dijit/form/Button" 
data-dojo-id="Widgets.Button"></div>

Príklad: Zápis do elementu <script>.

1
2
3
4
5
6
require(["dojo/ready", "dojo/parser"],
        function(ready) {
          ready(function() {
            Widgets.Button.set("label", "My button");
          });
        });
require(["dojo/ready", "dojo/parser"],
        function(ready) {
          ready(function() {
            Widgets.Button.set("label", "My button");
          });
        });

Zápis data-dojo-id="Widgets.Button" vytvoril objekt s názvom Widgets, ktorý obsahuje objekt s názvom Button. Objekt s názvom Button zastupuje vytvorený widget. Objekt s názvom Widgets slúži ako kontajner pre widgety vytvorené prostredníctvom atribútu data-dojo-id. Pri dodržaní uvedenej konvencie bude v programe existovať iba jedna nová globálna premenná.

Aplikovaním bodkového zápisu hodnôt v atribúte data-dojo-id síce odpadá problém s globálnymi premennými, ale stále nie je vyriešená prvá a tretia spomenutá nevýhoda. No aj napriek týmto nevýhodám je určite atribútu data-dojo-id veľkým prínosom.

Záver

Atribút data-dojo-id prináša zaujímavú a rýchlu možnosť prístupu k vytvoreným widgetom aj napriek niektorým nevýhodám, ktoré je možné bez problémov akceptovať.

Atribút data-dojo-id (Dojo)

Výhody a nevýhody data-dojo-id

Ako eliminovať nevýhody

Záver

Komentáre

Pridať komentár