Umwickeln eines DOM-Element in einem JavaScript-Objekt

StackOverflow https://stackoverflow.com/questions/4743666

Frage

Ich habe ein gemeinsames Muster in JavaScript Ich habe bemerkt, Schreiben und hat mich gefragt, ob es bereits ein Muster gibt, die definiert etwas ähnliches als Best Practice? Im Grunde ist es wie ein DOM-Element zu erhalten und wickeln Sie es innen / assoziiert es mit einem JavaScript-Objekt. Nehmen Sie dieses Beispiel, wo Sie einen Filter in Ihrem Web-App benötigen. Ihre Seite sieht wie folgt aus: 

<html>
<head></head>
<body>
    <div id="filter"></div>
</body>
</html>

Sie würden dann wickeln Sie das Element wie folgt: 

var myFilter = new Filter({
    elem: document.getElementById('filter'),
    prop: 'stacks-test',
    someCallback: function() {
        // specify a callback
    }
});

Und das JavaScript (wo spec ein Objekt an den Konstruktor übergeben ist): 

var Filter = function(spec) {
    this.elem = spec.elem;
    this.prop = spec.prop;
    this.callback = spec.someCallback;
    this.bindEvents();
};

Filter.prototype.bindEvents = function() {
    var self = this;
    $(this.elem).click(function(e) {
        self.updateFeed();
    };
};

Filter.prototype.updateFeed = function() {
    this.prop; // 'stacks-test'
    this.callback();
    // ...
    // code to interact with other JavaScript objects
    // who in turn, update the document
};

Was ist diese Art von Ansatz genannt, und was sind die besten Praktiken und Einschränkungen?

War es hilfreich?

Lösung

Sie können in Dojo Widget-Bibliothek, Dijit interessiert sein -. Wenn ich Ihre Frage richtig zu verstehen, ist es im Wesentlichen tut, was Sie fragen, und eine ganze Menge mehr

In Dijit ist ein Widget kapselt im Wesentlichen einen DOM-Knoten, dessen Inhalt jedes JavaScript, die sein Verhalten definiert, und (importierten separat) CSS-Stil sein Aussehen.

Widgets hat ihre eigenen Lebenszyklus, die Registrierung und Veranstaltungen (viele darunter, die einfach auf einem Knoten innerhalb des Widgets auf DOM-Ereignisse abbilden, beispielsweise myWidget.onClick effektiv myWidget.domNode.onclick nennen könnte).

Widgets kann (muß aber nicht) ihren ursprünglichen Inhalt in einer separaten HTML-Template-Datei definiert hat, durch denen es auch möglich, zu binden Ereignisse auf Knoten in der Vorlage Methoden Widget sowie Set-Eigenschaften auf dem Widget dass Bezug bestimmter Knoten in der Vorlage.

Ich bin Kratzen kaum die Oberfläche hier. Wenn Sie mehr zu diesem Thema lesen möchten, können Sie mit diesen Referenzseiten starten:

sagte, Ich weiß nicht, was Sie für letztlich das Ziel, und vielleicht ist das alles ein bisschen viel für Ihre Zwecke (unter Berücksichtigung Ich werfe dich eine ganze andere Bibliothek), aber dachte, es könnte wecken Ihre Interesse zumindest.

Andere Tipps

Fortsetzung von meinem Kommentar auf die Frage, ist jQuery ein Potential Werkzeug für den Job, da es bereits einige der Grundlagen sieht, was Sie wollen. Doch das gesagt zu haben, tut es Komplexität ihrer eigenen einzuführen und weiter, dass nicht alle „jQuery Wege“ sind gleich. Ich werde einen Weg vorschlagen, von jQuery als „Objektmodell“ verwendet, aber es kann oder auch Ihre Bedürfnissen nicht gerecht wird.

Das Wichtigste zuerst. Die Philosophie von jQuery ist, dass man alles, indem Sie das Element zum ersten Mal starten, mit $() oder äquivalent jQuery(). Alle Operationen beginnen konzeptionell mit diesem. Dies ist eine etwas andere Art und Weise im Vergleich zu denken, um ein Objekt zu schaffen, die ein Element umschließt und hielt eine Referenz auf diese Wrapper, aber im Wesentlichen das ist, was jQuery für Sie tut. Ein Aufruf von $('#some-id') schnappt sich das Element mit der ID von "some-id" und wickelt es in ein jQuery-Objekt.

Eine Möglichkeit:. Write "Filter" Plugins

Ersetzen Sie Ihren Konstruktor mit einer initFilter() jQuery-Methode. Sie können dies tun, indem Sie den jQuery-Prototyp zu modifizieren und das jQuery-Objekt als Wrapper. jQuery-Prototyp wird von jQuery.fn Bezug genommen wird, so: 

jQuery.fn.initFilter = function (prop, callback) {
    // Save prop and callback
    this.data('filter-prop', prop);
    this.data('filter-callback', callback);

    // Bind events (makes sense to do this during init)
    this.click(function () {
        $(this).updateFeed();
    });
};

Dann macht eine ähnliche Sache für updateFeed(): 

jQuery.fn.updateFeed = function () {
    this.data('filter-prop');
    this.data('filter-callback')();
});

Und es wie folgt verwendet werden: 

$('#filter').initFilter(prop, callback);

Beachten Sie, dass updateFeed kann einfach in ausgekleideten in die Click-Handler unnötige Verschmutzung des jQuery-Namensraum zu verhindern. ein Vorteil der Verwendung von jQuery wie diese ist jedoch, dass Sie nicht einen Verweis auf das Objekt zu halten brauchen, wenn Sie auf es eine Funktion aufzurufen, müssen später, da jQuery alle Verweise auf tatsächlichen Elemente bindet. Wenn Sie möchten, dass updateFeed programmatisch nennen, dann: 

$('#filter').updateFeed();

wird dann auf das richtige Objekt aufgerufen werden.

Einige Dinge beachten

Es gibt sicherlich Nachteile dieser Methode. Eine davon ist, dass alle Eigenschaften, die wir gegen das Element mit .data() gespeichert haben, zwischen allen jQuery-Funktionen gemeinsam genutzt werden, dass wirken auf dieses Element. Ich versuche, habe dies zu lindern, indem die Eigenschaftsnamen mit „Filter-“ voranstellen, aber abhängig von der Komplexität des Objekts (n), kann dies nicht geeignet sein.

Ferner genau dieses Verfahren kann nicht so geeignet für Objekte, die eine Menge von Manipulation erfordern (das heißt Objekte mit vielen Funktionen), da alle diese Funktionen werden gemeinsam alle jQuery-Objekte. Es gibt Möglichkeiten, dies alles zu kapseln, die ich hier nicht näher eingehen, aber jQuery-ui tut dies mit ihren Widgets, und ich bin das Experimentieren mit einer weiteren Alternative in einer Bibliothek Ich schaffe.

Allerdings zog ein wenig zurück, der einzige Grund schlug ich jQuery in erster Linie ist, dass Ihr Filter-Objekt erscheint den DOM stark gebunden zu werden. Es bindet Ereignisse an den DOM, den DOM basierend auf Benutzer-Interaktion modifiziert, im Grunde erscheint es in dem DOM zu leben, so Verwendung etwas DOM-basierte, das heißt jQuery.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top