Poznámky (de)kodéra

V jednom větším projektu používám z historických důvodů jQuery. Při menší refaktorizaci jsem si chtěl ulehčit život a vytvořil jsem jednoduchý, několikařádkový parser.
Parser najde všechny prvky s atributem „data-widget-type“ a pokusí se zavolat oblužnou funkci. Argumenty předávané oblužné funkci lze definovat v atributu „data-widget-attr„. Celé se to hodí např. pro automatické vytváření ui widgetů.

Jedná se opravdu o jednoduchý kód pro ulehčení práce. Cílem nebylo vytvořit rozsáhlý parser s automatickým načítáním AMD modulů apod.

/**
* Tato funkce prohledá DOM model a získá elementy s atributem "data-widget-type".
* Pro každný nalezený element poté zavolá obsluhu pojmenovanou 'parsed_'+ typ_widgetu
*/
$.fn.parse = function(){

   /**
    * Parsuje hodnotu atrubutu 'data-widget-attr' ze které
    * se pokusí získat parametry pro oblužnou funkci
    * Příklad syntaxe: data-widget-attr="prop1:'value',prop2:'value'"
    * @param {String} strAttr
    */
   var _parseAttributes = function(strAttr){
      if(strAttr && strAttr.length){
         try{
            // return $.parseJSON("{" + strAttr + "}"); //toto je hezké ale nefunkční pokud se použijí apostrofy
            strAttr = strAttr.replace('"','"');
            return eval("(" + "{" + strAttr + "}" + ")");
         }catch(e){
            throw new Error(e.toString() + " in data-widget-attr='" + strAttr + "'");
         }
      }
   };

   $('[data-widget-type]',$(this)).each(function(){
      var _type = $(this).attr('data-widget-type');
      var _attr = $(this).attr('data-widget-attr');
      var _func = 'parsed_'+_type;

      // pro zjednodušení jsou obslužné funkce v globálním kontextu
      if(window[_func]){
         window[_func]($(this), _parseAttributes(_attr) || {});
      }
   });
   return this;
};

Příklad použití mluví sám za sebe:

/**
 * Definice obslužné funkce pro data-widdget-type="mujWidget"
 * @param {Object} prvek nad kterým se fce volá
 * @param {Object} argumenty definované v 'data-widget-attr'
 */
var parsed_mujWidget = function(node, attributes){
   //definice výchozích hodnot
   var _mixin = {klic: 'hodnota'};
   //mix s dodanými argumenty
   var attrs = $.extend(_mixin, attributes);

   //vysledne argumenty: attrs = {klic:'hodnota', klic2:'moje-custom-hodnota'}

   //nakonec si zavolám požadovanou funkci
   mojeFunkce(attrs);
};

//zapojení parseru po načtení stránky
$(document).ready(function(){
   $(document).parse();
});

Ve stránce pak stačí zápis:

<!-- nad timto prkem se automaticky zavola "mojeFunkce" -->
<div data-widget-type="mujWidget" data-widget-attr="klic2:'moje-custom-hodnota'"></div>