Tutorial de prototipagem JavaScript [fechado

Question

Eu tenho um script JS com toneladas de funções, o Big On é o seguinte:

function id(i) {
    if(document.getElementById)
        return document.getElementById(i);
    return;
}

Isso me salva muitos bytes na digitação do documento.getElementById () cada vez. Meu problema é que eu frequentemente adiciono e removo classes e outros atributos dos elementos. Eu quero poder fazer isso:

id('main').addClass("someClass");

Alguém conhece algum bom tutorial de prototipagem de JavaScript que possa explicar isso? Obrigado.

Answer 1

A técnica que você está procurando é o encadeamento de método. Basicamente, a função "ID" deve retornar uma instância de objeto que possui o método "addclass". E esse método "retornaria isso".

Aqui está um tutorial que explica este conceito:
http://javascriptant.com/articles/32/chening-your-javascript-methods

Eu também recomendo este livro para aprender mais técnicas como essa (sim, o encadeamento é coberto) :-)
http://jsdesignpatterns.com/

Answer 2

Eu tenho que perguntar: você considerou apenas usar algo como jQuery? Se você fez o problema simplesmente se tornar:

$("#main").addClass("someClass");

E você terminou. Se o objetivo é implementar isso você mesmo (se sim, por quê?) Então você só precisa saber que, se um elemento tiver 3 classes, o atributo real é apenas:

"one two three"

O outro aspecto, é claro, é escrever um método de extensão.

Answer 3

Você não pode conseguir isso para todos os navegadores, em particular não é possível estender os métodos disponíveis em um elemento no IE6 ou 7.

Para ser sincero, você salvaria sacos de tempo se incluísse o jQuery em seu desenvolvimento.

Answer 4

É melhor ir com uma estrutura, se você puder, como Cletus diz.

No entanto, Anthonywjones não está certo - não é possível estender os métodos disponíveis no objeto de elementos genéricos, mas você posso ainda adicione -o a elementos individuais.

Sua função de identificação pode estender elementos retornados com um método Addclass:

function get(id){
    el = document.getElementById(id);
    el.addClass = function(cls){
        // your addClass code here
        // (remember IE uses className, others use class)
    };
    return el;
}

Você pode até adicioná -lo ao objeto elemento (que o adiciona automaticamente a todos os elementos da página) para os navegadores que suportam esse recurso e adicionam apenas o método em sua função de identificação para o IE - isso economizará na memória e acelerará o aplicativo Um pouco, principalmente quando você começa a adicionar muitos métodos de elemento.

Esse comportamento é exatamente como o MooTools resolve esse problema - leva a repetir que é melhor usar uma estrutura sempre que possível!