JavaScript plugin Erstellung

So erstellen Sie eine Reine JavaScript (ohne Bibliothek) plugin, welches wie folgt aussieht:

document.getElementById('id').myPlugin();

Wie jQuery?

  • es ist erwähnenswert, dass die syntax die du vorgeschlagen hast ist gar nicht so jquery und das aus sehr guten Gründen, von denen einige fredrik erarbeitet hat, auf
InformationsquelleAutor Aneesh | 2010-04-26
  1. 5

    Können Sie erstellen Sie Ihre eigenen wrapper (ähnlich wie jQuery), und dadurch können Sie umgehen all die hier diskutierten Probleme mit der Ausweitung der DOM direkt.

    myWrapper = (function(){

    function NodeList(elems) {

        this.length = 0;
        this.merge(this, elems.nodeType ? [elems] : elems);

    }

    function myWrapper(elems) {
        return new NodeList(elems);
    }

    myWrapper.NodeList = NodeList;

    NodeList.prototype = {
        merge: function(first, second) {

            var i = first.length, j = 0;

            for (var l = second.length; j < l; ++j) {
                first[i++] = second[j];
            }

            first.length = i;

            return first;

        },
        each: function(fn) {

            for (var i = -1, l = this.length; ++i < l;) {
                fn.call(this[i], this[i], i, l, this);
            }

            return this;

        }
    };

    return myWrapper;

})();

    Und Sie können fügen Sie Ihre eigenen Methoden, etwa so:

    myWrapper.NodeList.prototype.myPlugin = function() {
    return this.each(function(){
        //Do something with 'this' (the element)
    });
};

    Verwendung:

    myWrapper(document.getElementById('id')).myPlugin();
    InformationsquelleAutor James
  2. 4

    Ich zögere zu sagen, Sie können nicht. Nachdem alle, Prototype.js Tat.

    Nennen zu können getElementById('id').someNewMethod() müssten Sie 'verlängern' der Prototyp des Typs des Objekts getElementById gibt, die eine Element. In einigen Browsern können Sie in der Tat tun:

    Element.prototype.someNewMethod= function() {
    alert('hello from a '+this.tagName);
};

document.body.someNewMethod(); //hello from a BODY

    Dies ist jedoch Recht fragwürdig. Prototyping auf die native JavaScript-Objekte wie Object oder String ist potenziell zwielichtigen genug, was mit dem Namen zu Auseinandersetzungen zwischen Browser und Bibliotheken, aber Element und alle anderen DOM-Objekte können 'host' - Objekte, die nicht zulassen prototyping.

    Selbst wenn DOM-Objekte implementiert sind, sind mit einem vollen nativen JavaScript-Schnittstelle, keine Angabe, sagt, dass Element Belichten muss ein Prototyp/Konstruktor-Funktion unter einem window Eigenschaft/Globale variable namens Element.

    In der Realität funktioniert in Firefox, Webkit und Opera, und IE ab version 8. Aber es ist unstandardised nicht alle Browser die gleichen Schnittstellen zur Verfügung, die unter allen den gleichen Namen, und es funktioniert nicht im IE6, IE7 oder vielen kleineren Browsern (zB. mobiler Browser).

    Prototyp hatte ein fallback für diese Browser: es würde versuchen zu ergänzen, die jede Instanz eines Element mit den neuen Mitgliedern, wenn es zum ersten mal sah jedes element. Aber dieser hatte sehr chaotisch Nebenwirkungen und wird durch viele betrachtet, ein Fehler; Prototyp 2.0 nicht versuchen zu erweitern DOM-Schnittstellen mehr.

    Vielleicht in der Zukunft wird jemand Band ab und machen ihn zu einem zuverlässigen Bestandteil der browser-Umgebung. Aber heute ist das nicht der Fall, so sollten Sie weiterhin verwenden, andere, clunkier Methoden, wie die wrapper-Funktionen.

    • Gute Antwort. Aber nur aus Neugier, soll man nicht in der Lage, gefälschte es mit einigen echten zweifelhaften javascript-code. Speichern Sie zuerst die original-getElements und die überschreiben? Echt beängstigend Lösung, aber sollte funktionieren. 🙂
    • Ja, Sie konnten: Sie würden im Grunde werden, das einwickeln der gesamten DOM in Ihrem eigenen nachbauen. Das problem ist, dass (a) es würd langsam, und (b) eine Menge von der DOM setzt der Eigenschaften statt Methoden: zB. document.body.firstChild macht keine Methode ruft bei allen. Sie konnte nicht definieren Sie Ihre eigene Eigenschaft get/Set-Methoden in JavaScript vor ECMAScript Fifth Edition, so können Sie nicht haben dynamische Eigenschaften, die arbeiten, cross-browser und sogar mit "Eigenschaften" können Sie nicht nachahmen, NodeList-array-like sehr gut.
    • Also entweder Sie haben zu füllen, in aller verlinkten firstChilds und nextSiblings und parentNodes und jede andere Eigenschaft für den gesamten DOM zu start-up-Zeit und auf jedem Dokument änderung (eek!), oder ändern Sie die Schnittstelle, wie zB. indem die Benutzer zu schreiben document.getBody().getFirstChild(). Aber wenn Sie die änderung der Schnittstelle, die Sie verlieren den Vorteil der nativen DOM sowieso, so dass Sie könnte genauso gut kommen mit Ihrer eigenen Oberfläche (wie jQuery et al.).
    • Nun, ich glaube nicht, dass es eine großartige Idee, um mit zu beginnen. 🙂 aber tolle Antwort. Der schwierige Teil ist nun, wie schreibt man einen DOM nachbauen, die ist schneller als die einheimischen !
    InformationsquelleAutor bobince
  3. 1

    Ich Stimme mit spender. Sollten Sie wirklich nicht wollen, um Chaos mit standard-JavaScript-Elementen. Es ist besser zu tun, ein wrapper für ihn (das ist, $ wie jQuery verwendet). Wenn Sie möchten, eine Kurzform für " erste Elemente einer wrapper-Methode und erweitern, dass man statt. Dies macht den code leichter zu pflegen. Da, wenn Sie ändern die standard-Funktionalität in JavaScript kann es zu Störungen mit dem standard-Verhalten. Dies könnte dazu führen, dass einige wirklich schwer zu Debuggen. Es ist besser, um eine wrapper-Funktion, tun, was Sie möchten.

    Aber trotz dieser, wenn Sie wollen, mess around mit dem standard-Verhalten können Sie binden immer neue Methoden, um die standard-Objekte mithilfe von prototyping. Zum Beispiel:

    Object.prototype.myMethod = function () {}
    InformationsquelleAutor fredrik
  4. 0

    Warum dieses format? Ich denke,

    myPlugin(document.getElementById('id'))

    wäre wahrscheinlich übersichtlicher für jedermann, den code zu verwalten. Ich bin kein großer fan von monkey-patching.

    InformationsquelleAutor spender
Schreibe einen Kommentar