jQuery.dominator – Criação de elementos usando seletores

Sempre achei um pouco chato criar elementos no DOM usando Javascript, não gosto da idéia de escrever HTML no meio de script e o uso de templates também não me agrada muito.

Então tive a idéia de criar elementos usando seletores CSS e assim nasceu o jquery.dominator, um plugin para jQuery. O código com testes usando QUnit está disponível no meu Github.

Foi um projeto legal de se desenvolver, tive alguns problemas para implementar recursos mais complexos mas tomei por base (copiei) o funcionamento do Sizzle e do jQuery e adaptei (roubei) alguns trechos, isso garantiu a compatibilidade entre os browsers.

Segue alguns exemplos de uso:

// Tags simples
$.dominator('p'); // <p></p> $.dominator('div'); // <div></div> $.dominator('div p'); // <div><p></p></div> $.dominator('div p span a'); // <div><p><span><a></a></span></p></div>
// IDs, Classes
$.dominator('div#myid'); // <div id="myid"></div> $.dominator('div p#myid'); // <div><p id="myid"></p></div> $.dominator('div#myid p'); // <div id="myid"><p></p></div> $.dominator('#myid'); // <div id="myid"></div> $.dominator('div.myclass'); // <div class="myclass"></div> $.dominator('div.my-class'); // <div class="my-class"></div> $.dominator('div.my_class'); // <div class="my_class"></div> $.dominator('.myclass'); // <div class="myclass"></div> $.dominator('div.first.second'); // <div class="first second"></div>
// Múltiplos seletores (paralelos)
$.dominator('div, p'); // <div></div><p></p> $.dominator('div#id, p.class a'); // <div id="id"></div><p class="class"><a></a></p>
// Atributos $.dominator('a[title=simpletitle]'); // <a title="simpletitle"></a> $.dominator('a[title=With Space]'); // <a title="With Space"></a> $.dominator('a[title=With,Comma]'); // <a title="With,Comma"></a> $.dominator('a[title=With#Hash]'); // <a title="With#Hash"></a> $.dominator('a[title=With.Dot]'); // <a title="With.Dot"></a>
// Variáveis
$.dominator('a[rel=${myvar}]', {myvar: 'myvariable'}); // '<a rel="myvariable"></a>' $.dominator('a[rel=${myvar}]', {myvar: 'My Variable'}); // '<a rel="My Variable"></a>' $.dominator('a[name=${myvar}]', {myvar: 'myvar'}); // '<a name="myvar"></a>' $.dominator('a[name=${myvar}]', {myvar: 'My Variable'}); // '<a name="My Variable"></a>'

Se for útil pra você deixe um recado. Também gostaria de idéias para melhorar o plugin!

Anúncios