Question

所以我已经越来越多地进入oop w 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元素传递给函数吗？如果是这样，我如何保持对象私有点击var与特定元素同步。

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

Answer 1

这是一个小提琴，解释你想要达到的目标。 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();
   }

Count是＆＃34;私有变量＆＃34;。它在调用函数Box中创建为局部范围变量。盒子功能＆＃34;记住＆＃34;所有本地范围变量。使用new创建对象时，需要在本地创建函数（this.increateCounter），以便它们可以访问count变量。使用Box中的getCounter / increaseCounter函数，您可以访问计数器。

在函数connectClick im传递给jQuery变量一个带有binded（this）的函数。因为这是我们的对象框。虽然连接处理程序的jquery将此变量更改为DOM。函数绑定更改函数将此变量设置为Box，bind返回新函数。 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），

您可以直接传递为对象框。 Box然后实现onEventReceived（event）函数

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

附加到HTML元素的JS对象

1 个答案: