Objets JS attachés à des éléments HTML

Question

Donc, je me suis davantage intéressé à oop w js (j'ai une formation classique en java) et j'ai quatre cases. Je veux faire quelque chose comme ça

<div class="box"><\div> 
    <div class="box"><\div> 
    <div class="box"><\div> 
    <div class="box"><\div> 

    Function Box(){ 
     //PRIVATE VAR 
    var count=0; 
    } 
    Box.prototype.move = function(){ 
     this.css({left:50}); 
    } 

    Box.prototype.click= function(){ 
     this.count++; 
    } 

    //create new instances of box and assign or connect to the four HTML elements 
    For (var i = 0; i < $('.box').length; i++){ 
      $('.box')[i] = new Box(); 
    } 

Fondamentalement, je veux chaque case pour avoir sa propre propriété privée nombre de clics qui obtient incrémenté à chaque fois qu'il se cliqué.

Est-ce un modèle souhaitable ou est-ce une mauvaise pratique pour connecter un élément HTML comme celui-ci? Dois-je passer des éléments HTML aux fonctions à la place? Et si oui, comment garder un objet privé cliquez sur var en synchronisation avec un élément spécifique.

J'OBV sais qu'il ya des moyens plus simples de jquery pour le faire, mais je veux me concentrer sur oop

Answer 1

Voici un violon expliquant ce que tu veux atteindre. https://jsfiddle.net/2e24a3kx/

D'abord, vous devez trouver toutes les cases. Ensuite, pour chaque boîte, créez une nouvelle boîte, passez une référence à l'objet DOM et connectez le gestionnaire.

var boxes = $.find('.box'); 
    for(var i = 0; i < boxes.length; i++) { 
     var box = new Box(); 
     box.$view = $(boxes[i]); 
     box.connectClick(); 
    } 

Le nombre est "variable privée". Il est créé en tant que variable d'étendue locale à la fonction d'appel Box. La fonction Box "se souvient" de toutes les variables d'étendue locales. Avec la création d'objet avec new, vous avez besoin de fonctions créées localement (this.increateCounter) pour avoir accès à la variable count. Avec les fonctions getCounter/increaseCounter dans Box, vous avez accès au compteur.

Dans la fonction connectClick im transmettre à la variable jQuery une fonction avec binded (this). Beacuse c'est notre objet - boîte. Tandis que jquery aux gestionnaires de connexion change cette variable en DOM. Les changements de fonction Bind fonction cette variable à notre boîte, bind renvoie la nouvelle fonction. https://www.google.pl/search?q=mdn+Bind&oq=mdn+Bind&aqs=chrome..69i57j69i60j69i59j69i61j69i59l2.1082j0j7&sourceid=chrome&es_sm=93&ie=UTF-8

function Box(){ 
     //PRIVATE VAR 
     this.$view; 
     this.increaseCounter = function() { 
      count++; 
     }; 

     this.getCounter = function() { 
      return count; 
     } 
     var count=0; 
    } 

Jquery est diffrent, pas plus simple. C'est juste un moyen plus structurel. Pendant que vous le modélisez dans OOP vous devez faire un peu plus d'effort pour maintenir une certaine structure.

Je pense que le meilleur modèle est d'utiliser la fonction JavaScript pur addEventListener (événement, objet),

où vous pouvez passer directement comme objet Box. Box ont alors fonction d'implémentation onEventReceived (événement)

http://www.thecssninja.com/javascript/handleevent