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>