JavaScript prototipos tutorial [cerrada]

Question

Tengo un script JS con toneladas de funciones, en grande en es la siguiente:

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

Simplemente me ahorra muchos bytes de escribir a máquina document.getElementById () cada vez. Mi problema es que con frecuencia añadir y eliminar las clases y otros atributos de los elementos. Quiero ser capaz de hacer esto:

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

¿Alguien sabe alguna buena tutoriales Javascript de prototipos que pueden explicar esto? Gracias.

Answer 1

la técnica que estás buscando es método de encadenamiento. básicamente, la función de "id" debe devolver una instancia de objeto que tiene el método "addClass" en él. y que el método podría "devolver este".

Aquí hay un tutorial que explica este concepto:
http://javascriptant.com/articles/32/chaining-your-javascript- métodos

Yo también lo recomendaría altamente este libro para aprender más técnicas tales como esto (sí encadenamiento está cubierto) :-)
http://jsdesignpatterns.com/

Answer 2

Tengo que preguntar: ¿ha considerado simplemente usando algo como jQuery? Si ha realizado el problema simplemente se convierte en:

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

y ya está. Si el objetivo es implementar esto por sí mismo (si es así, ¿por qué?), Entonces sólo tiene que saber que si un elemento tiene 3 clases, el atributo real es simplemente:

"one two three"

El otro aspecto, por supuesto, está escribiendo un método de extensión.

Answer 3

No se puede lograr que para todos los navegadores, en particular, no es posible extender los métodos disponibles en un elemento en IE6 o 7.

Para ser honesto que le ahorrará bolsas de tiempo si sólo incluye jQuery en su desarrollo.

Answer 4

Es mejor ir con un marco si se puede, como dice Cletus.

Sin embargo, AnthonyWJones no está bien -. No es posible ampliar los métodos disponibles en el objeto genérico Elemento, pero puede sigue añadirlo a elementos individuales

Su función Identificación del podría extender elementos devueltos con un 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;
}

Incluso podría añadir al objeto Element (que agrega automáticamente a todos los elementos de la página) para los navegadores que soportan esta función y sólo Agregar método en su función de identificación para IE - esto ahorrará sobre la memoria y la velocidad la aplicación de un poco, sobre todo cuando se inicia la adición de una gran cantidad de métodos de elementos.

Este comportamiento es exactamente cómo resuelve este problema MooTools - vale la pena repetir que es mejor utilizar un marco que sea posible