JavaScript Prototyping Tutorial [geschlossen]

Question

Ich habe ein JS-Skript mit jeder Menge Funktionen, auf groß auf, ist dies:

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

Das spart mir nur viele Bytes in der Eingabe aus document.getElementById () jedes Mal. Mein Problem ist, ich häufig hinzufügen und Klassen und andere Attribute von Elementen entfernen. Ich möchte zu tun, um diese:

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

Hat jemand eine gute Javascript Prototyping-Tutorials kennen, die dies erklären? Danke.

Answer 1

die Technik Sie suchen ist Methode Verkettungs. Grundsätzlich sollte die „ID“ -Funktion eine Objektinstanz zurück, die die „addClass“ -Methode auf sie hat. und diese Methode würde „Rückkehr dieses“.

Hier ist ein Tutorial, das dieses Konzept erklärt:
http://javascriptant.com/articles/32/chaining-your-javascript- Methoden

Ich würde auch dieses Buch sehr empfehlen, um mehr Techniken zu lernen, wie diese (ja Verkettungs abgedeckt) :-)
http://jsdesignpatterns.com/

Answer 2

Ich habe zu fragen: Haben Sie darüber nachgedacht, nur so etwas wie jQuery verwenden? Wenn Sie haben einfach das Problem wird:

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

und du bist fertig. Wenn das Ziel selbst ist dies zu implementieren (? Wenn ja, warum), dann müssen Sie nur wissen, dass, wenn ein Element 3 Klassen hat, ist das tatsächliche Attribut ist nur:

"one two three"

Der andere Aspekt ist natürlich eine Erweiterungsmethode zu schreiben.

Answer 3

Sie können nicht erreichen für alle Browser, insbesondere seine nicht möglich, die Methoden, die auf einem Element in Internet Explorer 6 oder 7 zu verlängern.

Um ehrlich zu sein, das Sie sich Taschen Zeit sparen würden, wenn Sie nur JQuery in Ihrer Entwicklung sind.

Answer 4

Am besten mit einem Rahmen gehen, wenn Sie können, wie cletus sagt.

Allerdings ist AnthonyWJones nicht ganz richtig - es ist nicht möglich, die Methoden, die auf dem allgemeinen Element-Objekt zu erweitern, aber Sie können noch hinzufügen, es auf einzelne Elemente

.

Ihre ID-Funktion Elemente mit einer addClass-Methode zurück verlaufen könnte:

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

Sie können es sogar auf das Objekt Element hinzufügen (das fügt sie automatisch auf alle Elemente auf der Seite) für Browser, die diese Funktion unterstützen, und auch dann nur Methode in Ihrer ID-Funktion für den Internet Explorer hinzufügen - dies wird auf Speicher und Geschwindigkeit speichern bis die Anwendung ein wenig, vor allem, wenn Sie eine Menge von Element-Methoden beginnen hinzugefügt wird.

Dieses Verhalten ist genau, wie MooTools löst dieses Problem - es trägt zu wiederholen, dass es besser ist, einen Rahmen zu verwenden, wenn möglich