JavaScript prototipazione esercitazione [chiusa]

Question

Ho uno script JS con tonnellate di funzioni, sul grande su questo è:

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

E 'appena mi fa risparmiare molti byte digitando document.getElementById () ogni volta. Il mio problema è che ho spesso aggiungere e rimuovere le classi e altri attributi da elementi. Voglio essere in grado di fare questo:

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

Qualcuno sa qualsiasi buoni tutorial Javascript prototipazione che può spiegare questo? Grazie.

Answer 1

la tecnica che stai cercando è il metodo concatenamento. fondamentalmente, la funzione "id" deve restituire un'istanza oggetto che ha il metodo "addClass" su di esso. e che il metodo avrebbe "restituire questo".

Ecco un tutorial che spiega questo concetto:
http://javascriptant.com/articles/32/chaining-your-javascript- metodi

Vorrei anche consigliare vivamente questo libro per imparare di più tecniche come questa (sì concatenamento è coperto) :-)
http://jsdesignpatterns.com/

Answer 2

devo chiedere: avete considerato solo usando qualcosa come jQuery? Se avete il problema diventa semplicemente:

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

e il gioco è fatto. Se l'obiettivo è quello di implementare da soli (se sì, perché?), Allora è sufficiente sapere che se un elemento ha 3 classi, l'attributo reale è semplicemente:

"one two three"

L'altro aspetto naturalmente sta scrivendo un metodo di estensione.

Answer 3

Non si può raggiungere questo per tutti i browser, in particolare la sua non è possibile estendere i metodi disponibili su un elemento in IE6 o 7.

Per essere onesti si sarebbe risparmiare sacchi di tempo se si includono JQuery nel vostro sviluppo.

Answer 4

meglio andare con un quadro, se è possibile, come dice Cletus.

Tuttavia, AnthonyWJones non è giusto -. Non è possibile estendere i metodi disponibili per l'oggetto Element generica, ma è possono ancora aggiungerlo ai singoli elementi

La vostra funzione id potrebbe estendere elementi restituiti con un metodo 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;
}

È anche possibile aggiungere all'oggetto Element (che aggiunge automaticamente a tutti gli elementi della pagina) per i browser che supportano questa funzione e quindi aggiungere solo metodo nella funzione ID per IE - questo farà risparmiare sulla memoria e la velocità l'applicazione un po ', in particolare quando si inizia ad aggiungere un sacco di metodi Element.

Questo comportamento è esattamente come MooTools risolve questo problema - vale la pena ripeterlo, che è meglio utilizzare un quadro per quanto possibile