附加到 HTML 个元素的 JS 对象

Question

我越来越喜欢 oop 和 js（我接受过 Java 的经典训练）并且我有四个盒子。我想做这样的事情：

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

基本上我希望每个框都有自己的私人点击计数属性，每次点击都会增加。

像这样连接 HTML 元素是理想的模式还是不好的做法？我应该将 HTML 元素传递给函数吗？如果是这样，我将如何使对象 private click var 与特定元素保持同步。

我显然知道有更简单的 jQuery 方法可以做到这一点，但我想专注于 oop。

Answer 1

这里 fiddle 解释了您想要实现的目标。 https://jsfiddle.net/2e24a3kx/

首先，您需要找到所有的盒子。然后为每个框创建新框，传递对 DOM 对象的引用，并连接处理程序。

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

计数为 "private variable"。它在调用函数 Box 时被创建为局部范围变量。框函数 "remembers" 所有局部作用域变量。使用 new 创建对象时，您需要在本地创建函数 (this.increateCounter)，以便它们可以访问 count 变量。通过 Box 中的 getCounter / increaseCounter 函数，您可以访问计数器。

在函数 connectClick 中，我向 jQuery 变量传递了一个具有绑定 (this) 的函数。因为这是我们的对象——盒子。在连接处理程序时 jquery 将此变量更改为 DOM。 Function Bind 将函数 this 变量更改为我们的 Box，绑定 returns 新函数。 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是不同的，不是更简单。它只是更具结构性的方式。当您在 OOP 中对其建模时，您必须付出更多努力来维护一些结构。

我认为最好的模式是使用纯 JavaScript 函数 addEventListener(event, object),

哪里可以直接传为object Box。然后 Box 实现函数 onEventReceived (event)

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

附加到 HTML 个元素的 JS 对象

JS objects attached to HTML elements

javascript

oop

javascript-objects