JavaScript tutoriel de prototypage [fermé]

Question

J'ai un script JS avec des tonnes de fonctions, grand sur est la suivante:

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

Il me sauve juste d'octets en tapant document.getElementById () à chaque fois. Mon problème est que j'ajoute fréquemment et supprimer les classes et les autres attributs des éléments. Je veux être en mesure de le faire:

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

Quelqu'un sait-il de bons tutoriels Javascript Prototypage qui peut expliquer cela? Merci.

Answer 1

la technique que vous cherchez est le chainage des méthodes. En fait, la fonction « id » doit renvoyer une instance d'objet qui a la méthode « addClass » sur elle. et cette méthode serait « retourner ce ».

Voici un tutoriel qui explique ce concept:
http://javascriptant.com/articles/32/chaining-your-javascript- méthodes

Je recommande également vivement ce livre pour apprendre plus techniques comme celui (oui Enchaînement est couvert) :-)
http://jsdesignpatterns.com/

Answer 2

Je dois demander: avez-vous pensé juste en utilisant quelque chose comme jQuery? Si vous avez le problème est simplement:

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

et vous avez terminé. Si l'objectif est de mettre en œuvre vous-même (si oui, pourquoi?), Alors vous avez juste besoin de savoir que si un élément a 3 classes, l'attribut réel est juste:

"one two three"

L'autre aspect de la formation est en train d'écrire une méthode d'extension.

Answer 3

Vous ne pouvez pas réaliser que pour tous les navigateurs, en particulier son pas possible d'étendre les méthodes disponibles sur un élément IE6 ou 7.

Pour être honnête, vous vous épargnerez des sacs de temps si vous venez de comprendre JQuery dans votre développement.

Answer 4

Il vaut mieux aller avec un cadre si vous le pouvez, comme le dit Cletus.

Cependant, AnthonyWJones n'est pas tout à fait raison -. Il est impossible d'étendre les méthodes disponibles sur l'objet élément générique, mais vous peut ajouter encore à des éléments individuels

Votre fonction id pourrait se prolonger de retour des éléments avec une méthode 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;
}

Vous pouvez même l'ajouter à l'objet Element (qui ajoute automatiquement à tous les éléments de la page) pour les navigateurs qui prennent en charge cette fonctionnalité, puis ajoutez seule méthode dans votre fonction id pour IE - cela permettra d'économiser de la mémoire et de la vitesse jusqu'à l'application un peu, en particulier lorsque vous commencez à ajouter un grand nombre de méthodes élément.

Ce comportement est exactement comment MooTools résout ce problème - il faut le répéter qu'il est préférable d'utiliser un cadre, si possible,