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

Lançamento do django-importer

Read this post in English / Leia este post em Inglês

Eu tenho criado alguns importadores para models do Django e me vi repetindo um padrão, mesmo com origens de dados bem diferentes, pude encontrar um certo nível de abstração.

O resultado foi um novo projeto chamado django-importer, com a intenção de servir como base para qualquer importação no Django.

Está distribuído sob a licença BSD e hospedado no Google Code: http://code.google.com/p/django-importer/.

Estou escrevendo um projeto de exemplo para ajudar no uso. É um projeto novo, mas bastante funcional (pelo menos para mim), e há bastante a ser melhorado.

Colaboradores, comentários e sugestões são bem-vindos, é só entrar em contato aqui pelo blog ou pela página do projeto.

django-importer released!

Read this post in Portuguese / Leia este post em Português

I’ve been writing some importers for Django models and caught myself repeating a pattern, even though the data sources were very different, I could find some room for abstraction.

The result was a new project called django-importer, to be used as a base for any data importer on Django.

It’s released under BSD License and hosted on Google Code: http://code.google.com/p/django-importer/.

I’m writing a sample project to help in the usage. It’s a work in progress but already very useful (at least for me) and there’s plenty room for improvement.

Contributors, comments and suggestions are welcome, just leave a message here in the blog or in the project page.