Enrouler un élément de DOM à l'intérieur d'un objet JavaScript

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

Question

Je l'ai remarqué un modèle commun dans le code JavaScript que j'ai écrit et je me demandais s'il y a déjà un modèle là-bas qui définit quelque chose de similaire comme la meilleure pratique? Pour l'essentiel, il est comment obtenir un élément DOM et envelopper l'intérieur / l'associer à un objet JavaScript. Prenez cet exemple, où vous avez besoin d'un filtre dans votre application web. Votre page ressemble à ceci: 

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

Vous seriez alors envelopper l'élément comme ceci: 

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

Et le JavaScript (où spec est un objet passé au constructeur): 

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

Quel est ce genre d'approche appelée, et quelles sont les meilleures pratiques et mises en garde?

Était-ce utile?

La solution

Vous pourriez être intéressé par la bibliothèque de widgets de Dojo, Dijit -. Si je comprends bien votre question, il fait essentiellement ce que vous demandez, et beaucoup plus

Dans Dijit, un widget encapsule essentiellement un nœud DOM, son contenu, tout JavaScript qui définit son comportement, et (importé séparément) le style CSS pour son apparence.

Widgets ont leur propre cycle de vie, le registre et les événements (y compris beaucoup qui carte simplement les événements DOM sur un noeud dans le widget, par exemple myWidget.onClick pourrait effectivement appeler myWidget.domNode.onclick).

Widgets peut (mais ne doivent pas) avoir leur contenu initial défini dans un fichier modèle HTML séparé, à travers lequel il est également possible d'événements se lient sur des noeuds dans le modèle à un widget méthodes, ainsi que des propriétés ensemble sur le widget que référence noeuds particuliers dans le modèle.

Je me gratte à peine la surface ici. Si vous souhaitez en savoir plus sur ce sujet, vous pouvez commencer avec ces pages de référence:

Tous dit, je ne sais pas ce que vous visez en fin de compte pour, et peut-être cela est un peu beaucoup à vos besoins (étant donné que je suis lancer toute une bibliothèque autre à vous), mais pensé qu'il pourrait piquer votre intérêts au moins.

Autres conseils

La poursuite de mon commentaire sur la question, jQuery est potentiel outil pour le travail, car il fournit déjà quelques-unes des bases de ce que vous êtes après. Cependant, après avoir dit, elle introduit des complexités propres, et encore, pas tous les « moyens » jQuery sont égaux. Je suggère une façon d'utiliser jQuery comme votre « modèle d'objet », mais il peut ou peut ne pas convenir à vos besoins.

Tout d'abord. La philosophie de jQuery est que vous commencez tout en sélectionnant l'élément premier, en utilisant $() ou jQuery() équivalente. Toutes les opérations commencent conceptuellement avec cela. Ceci est une manière légèrement différente de penser par rapport à la création d'un objet qui enveloppe un élément et en gardant une référence à cette enveloppe, mais essentiellement c'est ce que jQuery fait pour vous. Un appel à $('#some-id') saisit l'élément avec id « some-id » et l'enveloppe dans un objet jQuery.

Une façon:. Ecrire plugins "Filter"

Remplacez votre constructeur avec une méthode de jQuery initFilter(). Vous pouvez le faire en modifiant le prototype de jQuery et en utilisant l'objet jQuery que votre emballage. Le prototype de jQuery est référencé par jQuery.fn, donc: 

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

Ensuite, faites une chose similaire pour updateFeed(): 

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

Et l'utiliser comme ceci: 

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

Notez que updateFeed peut simplement être doublée dans le gestionnaire de clic pour prévenir la pollution inutile de l'espace de noms jQuery. Cependant, un avantage d'utiliser jQuery comme ceci est que vous n'avez pas besoin de conserver une référence à l'objet si vous avez besoin d'invoquer une fonction là-dessus plus tard, puisque jQuery lie toutes les références à des éléments réels. Si vous souhaitez appeler updateFeed programme, puis: 

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

sera ensuite appelée sur l'objet correct.

Certaines choses à considérer

Il y a certainement des inconvénients à cette méthode. La première est que toutes les propriétés que nous avons gagné contre l'élément en utilisant .data(), sont partagés entre toutes les fonctions jQuery qui agissent sur cet élément. J'ai essayé de remédier à ce en préfixant les noms de propriétés avec « Filtre- », mais en fonction de la complexité de votre objet (s), cela peut ne pas convenir.

En outre, cette méthode exacte ne peut pas être si approprié pour les objets qui nécessitent beaucoup de manipulation (à savoir des objets avec de nombreuses fonctions) puisque toutes ces fonctions sont communes à tous les objets jQuery. Il existe des moyens pour encapsuler tout cela que je vais pas ici, mais jQuery-ui fait avec leurs widgets, et je suis encore à expérimenter avec une autre alternative dans une bibliothèque que je crée.

Cependant, tirant un peu, la seule raison pour laquelle je suggère d'utiliser jQuery en premier lieu est que votre objet de filtre semble être fortement lié au DOM. Il lie les événements au DOM, il modifie les DOM basée sur l'interaction de l'utilisateur, au fond, il semble vivre dans les DOM, donc à base DOM utiliser quelque chose, à savoir jQuery.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top