[prototype]Classe De Utilidades

Fala aee galera beleza ?

Po eu não sou mt a favor de trabalhar com frameworks, mas aqui no trabalho eu tenho que trabalhar usando o prototype, então por isso que estou postando aqui com prototype, mas futuramente "quem sabe" eu recrie essas coisas com javascript puro mesmo e tals.

Bem, só para explicar mais ou menos o q eu vo postar direto aqui. Eu tenho estudado algumas coisinhas de orientação a objetos e resolvi praticar no Javascript, e para treinar isso, resolvi criar uma classe "tools" (ferramentas) para mim no qual uso aqui no trabalho e tudo, e vo posta-la aqui aos poucos.

Vão me perguntar. "pra que essa classse ?" , Simples, com uma classe de ferramentas, você pode escrever métodos que te ajudam e facilitam a sua vida assim como as frameworks fazem, então eu meio que re-escrevi alguns métodos do javascript pra ficarem melhor de trabalhar, portanto vo postando aqui aos pouquinhos para quem achar útil.

O primeiro método que vo postar da classe aqui é um que utilizo para melhorar o método "createElement" do javascript, no javascript esse método ele cria apenas um elemento HTML, puramente isso e toda vez que você quer colocar atributos nele é necessário usar o método "setAttribute", então criei esse método que você pode so criar o elemento ou pode além de criar o elemento , passar os atributos para ele.

Vamos logo ao que interessa.

Dica:

Crie um arquivo separado para essa classe, pode chama-lo de Tools.js, pq essa classe pode ir aumentando de acordo que você tenha idéias, depois pegue e faça um import dele para dentro de um HTML, esse seria o meio mais legal de fazer, mas aqui para meio de teste vo jogar tudo no mesmo lugar e não se esqueça do prototype

Sintaxe do método newElement();

 

newElement('elemento','atributos separados por |');

exemplo

classe.newElement('div','id=idDiv|name=nome|style=boder:1px solid;');

regras de uso:

A única regra de uso é que separe os atributos com o caracter |, para o método conseguir identificar e inserir no seu elemento criado, é possivel passar apenas o elemento sem os atributos que ele cria apenas o elemento desejado.

Código de exemplo:

<script src="js/prototype.js" type="text/javascript"></script>
<script>

//criando a classe Tools com prototype;
var Tools = Class.create();

Tools.prototype = { /** * * Javascript newElement com prototype. * * @author Reinaldo Torres - Carutcho * @carutchows@gmail.com * */

	initialize: function(){},

	/*--------------------------------------documentação do método-----------------------------------
	* métido que cria um elemento HTML e tem a capacidade de criar suas propriedade inclusive "style"
	* todas as propriedades devem estar com todas as propriedades separadas por |
	* ex: id=idDoElemento|alt=Aqui um texto com espaço|style=border:1px solid #000;width=100px
	*
	*/

	newElement: function(element,itens)
	{
 // validando variaveis.
 _itens	= (!itens) ? 0 : itens;

 //tirando espaços vazios
 var element = (element.replace(/^\s+|\s+$/g, "")) ? element : null;
 //se não existir elemento, retornar false para sair do método.
 if (element==null){return false}
 element	= document.createElement(element);

 if (_itens!=0)
 {
 var loop = itens.split('|');
 $A(loop).each( function(e)
 {
 var newE = e.split('=');
 // condição pq no IEcat não le todos os atrbutos do style se tiver em uma string, tenho q adicionar 1 a 1
 if(newE[0]=="style")
 {
 var gerStyle = newE[1].split(';');
 var sStyle = ""
 $A(gerStyle).each(function(style,indice)
 {
 _style = style.split(':');
 sStyle += _style[0]+":"+_style[1]+";";
 }
 );
 element.style.cssText = sStyle; //add no iecat
 element.setAttribute('style',sStyle);// add no ff
 }
 else
 {
 if (newE[0]=="class")
 {
 if(document.all) newE[0] = "className";
 }
 if ((newE[0]=="href")||(newE[0]=="src"))
 {
 //aqui eu pego o valor do nó para que aceite sinais de "=" e geralmente ocorre isso quando esta no href e src
 newE[1] = e.substring(newE[0].length + 1,e.length);
 }

 element.setAttribute(newE[0],newE[1]);
 }
 }
 );
 }
 return element;
	}
}

function criaElementos ()

{

 var Tool = new Tools();
 var div = Tool.newElement ('div','style=display:block;height:50px;border:1px solid #000;');
 var p = Tool.newElement('p','style=display:block;|align=center');
 var a = Tool.newElement('a','href=http://forum.imasters.com.br/index.php?showforum=6|style=font:12px bold; color:red; text-decoration:none;|target=_blank')

 a.appendChild(document.createTextNode('Clique e vá ao forum de Tutoriais - Imasters'));
 p.appendChild(a);
 div.appendChild(p);

 $('container').appendChild(div);
}
</script>
<body>
	<div id="container">
	</div>
	<a href="java script:criaElementos();"> Clique e Veja </a>
</body>

Pode ser q aja alguma outra solução ou alguma framework ou algo q eu não tinha conhecimento, mas atualmente uso assim e gostaria de compartilhar.

Absss