Avvolgendo un elemento DOM all'interno di un oggetto JavaScript

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

Domanda

ho notato un modello comune in JavaScript che ho scritto e si chiedeva se esiste già un modello là fuori che definisce qualcosa di simile come best practice? In sostanza, è come ottenere un elemento DOM e avvolgerlo dentro / associarlo con un oggetto JavaScript. Prendete questo esempio, in cui è necessario un filtro nella vostra web app. I suoi pagina si presenta in questo modo: 

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

Si sarebbe poi avvolgere l'elemento in questo modo: 

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

E il JavaScript (dove spec è un oggetto passato al costruttore): 

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
};

Che cosa è questo tipo di approccio chiamato, e quali sono le migliori pratiche e gli avvertimenti?

È stato utile?

Soluzione

Si potrebbe essere interessato libreria di widget di Dojo, Dijit -. Se sto capire la sua domanda, che fa in sostanza quello che stai chiedendo, e molto altro ancora

In Dijit, un widget incapsula essenzialmente un nodo DOM, i suoi contenuti, qualsiasi JavaScript che definisce il suo comportamento, e (importati separatamente) CSS per lo stile il suo aspetto.

Widget hanno i loro ciclo di vita, registro, e gli eventi (tra cui molti che si limita a mappare gli eventi DOM su un nodo all'interno del widget, ad esempio myWidget.onClick potrebbe effettivamente chiamare myWidget.domNode.onclick).

I widget possono (ma non devono) avere il loro contenuto iniziale definiti in un file di template HTML separato, attraverso il quale è anche possibile per gli eventi si legano sui nodi all'interno del modello di widget di metodi, così come proprietà impostate sul widget di che fanno riferimento a particolari nodi nel modello.

sto a malapena graffiare la superficie qui. Se volete saperne di più su questo, si può iniziare con queste pagine di riferimento:

Tutto detto, non so quello che stai in ultima analisi, puntando, e forse questo è tutto un po 'troppo per i vostri scopi (considerando sto buttando un'intera altra libreria a voi), ma pensato che potrebbe stimolare la vostra interesse almeno.

Altri suggerimenti

Continuando dal mio commento sulla questione, jQuery è un potenziale strumento per il lavoro, in quanto fornisce già alcune delle basi per quello che stai dopo. Tuttavia, detto questo, lo fa introdurre complessità della sua propria, e, inoltre, non tutti i "modi" di jQuery sono uguali. Io suggerisco un modo di usare jQuery come "modello a oggetti", ma può o non può soddisfare le vostre esigenze.

Per prima cosa. La filosofia di jQuery è che si avvia tutto selezionando il primo elemento, utilizzando $(), o equivalentemente jQuery(). Tutte le operazioni concettualmente iniziano con questo. Questo è un modo leggermente diverso di pensare rispetto alla creazione di un oggetto che avvolge un elemento e mantenere un riferimento a tale involucro, ma essenzialmente questo è ciò che fa per voi jQuery. Una chiamata al $('#some-id') afferra l'elemento con id di "qualche-id" e lo avvolge in un oggetto jQuery.

Un modo:. Scrivi "filtro" plugins

Sostituisci il tuo costruttore con un metodo initFilter() jQuery. È possibile farlo modificando il prototipo jQuery e jQuery utilizzando l'oggetto come involucro. Il prototipo di jQuery fa riferimento jQuery.fn, così: 

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();
    });
};

Poi fare una cosa simile per updateFeed(): 

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

E usare in questo modo: 

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

Si noti che updateFeed può essere semplicemente in-foderato nel gestore click per prevenire l'inquinamento non necessaria dello spazio dei nomi jQuery. Tuttavia, uno dei vantaggi di utilizzare jQuery come questo è che non è necessario mantenere un riferimento all'oggetto se è necessario richiamare qualche funzione in un secondo momento, dal momento che jQuery lega tutti i riferimenti a elementi reali. Se vuoi chiamare updateFeed di programmazione, quindi: 

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

verrà poi richiamato sull'oggetto corretto.

Alcune cose da considerare

Ci sono certamente aspetti negativi di questo metodo. Uno è che tutte le proprietà, che abbiamo salvato contro l'elemento utilizzando .data(), sono condivisi tra tutte le funzioni jQuery che agiscono su questo elemento. Ho cercato di alleviare questo anteponendo i nomi delle proprietà con "filtro-", ma a seconda della complessità del vostro oggetto (s), questo potrebbe non essere adatto.

Inoltre, questo metodo esatto può non essere così adatto per gli oggetti che richiedono un sacco di manipolazione (cioè oggetti con molte funzioni) poiché tutte queste funzioni diventa comune a tutti gli oggetti jQuery. Ci sono modi per incapsulare tutto questo, che non voglio in questa sede, ma jQuery-ui fa con i loro widget, e sto sperimentando con ancora un'altra alternativa in una libreria che sto creando.

Tuttavia, tirando un po 'indietro, l'unica ragione per cui ha suggerito di utilizzare jQuery, in primo luogo è che il vostro oggetto filtro sembra essere fortemente legato al DOM. Si lega gli eventi al DOM, esso modifica il DOM sulla base di interazione con l'utente, in pratica sembra di vivere nel DOM, in modo da utilizzare qualcosa DOM-based, cioè jQuery.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top