附加到HTML元素的JS对象 [英] JS objects attached to HTML elements

问题描述

所以我已经越来越多地进入oop w js（我经常接受java训练）并且我有四个盒子。我想做这样的事情

So I've been getting more into oop w js (I'm classically trained in java) and I have four boxes. I want to do something like this

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

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

Basically I want each box to have its own private click count property that gets incremented each time it gets clicked.

这是一个理想的模式，还是连接这样的HTML元素是不好的做法？我应该将HTML元素传递给函数吗？如果是这样，我如何在同步wa特定元素中保持对象私有点击var。

Is this a desirable pattern or is it a poor practice to connect an HTML element like this? Should I be passing HTML elements to the functions instead? And if so, how would I keep an objects private click var in sync w a specific element.

我知道有更简单的jquery方法来做到这一点但我想要关注在oop

I obv know there are simpler jquery ways to do this but I want to focus on oop

推荐答案

这是一个小提琴，解释你想要实现的目标。
https://jsfiddle.net/2e24a3kx/

Here is a fiddle explaining what u want achieve. https://jsfiddle.net/2e24a3kx/

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

First, you need to find all boxes. Then for every box, create new box, pass a reference to DOM object, and connect handler.

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

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

Count is "private variable". It is created as local scope variable at calling function Box. Box function "remembers" all local scope variables. With creation of object with new, you need functions created locally (this.increateCounter) so they have access to count variable. With getCounter / increaseCounter functions in Box, you have access to counter.

在函数connectClick中传递给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

In function connectClick im passing to jQuery variable a function with binded (this). Beacuse this is our object - box. While jquery at connecting handlers change this variable to DOM. Function Bind changes function this variable to our Box, bind returns new function. 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中对它进行建模时，你需要做一些努力来维护一些结构。

Jquery is diffrent, not simpler. Its just more structural way. While you model it in OOP u have to do a little more effort to maintain some structure.

我认为最好的模式是使用纯JavaScript函数addEventListener（event，object ），

I think the best pattern is to use pure JavaScript function addEventListener(event, object),

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

where you can directly pass as object Box. Box have then implement function onEventReceived (event)

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

这篇关于附加到HTML元素的JS对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！