附加到HTML元素的JS对象

因此，我已经越来越多地进入oop w js（我在java中经受过培训），并且我有四个框。我想要做这样的事情附加到HTML元素的JS对象

<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与特定元素同步。

我OBV知道有简单jQuery的方法可以做到这一点，但我希望把重点放在接力

来源

2015-07-21 ryan

计数是一个局部变量，而不是一个属性，你的函数有资本F. – epascarello

所以我在我的 – ryan

iPhone这样做的，它是自动更正。这应该是几乎像伪代码...我不需要语法帮助我需要我想要完成的总体想法......以及为什么它目前不工作 – ryan

这里是一个小提琴解释什么ü希望实现的。 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(); 
    }

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

在函数connectClick im传递给jQuery变量绑定（this）的函数。因为这是我们的对象框。而连接处理程序的jquery将此变量更改为DOM。函数绑定更改函数将这个变量赋值给我们的Box，绑定返回新函数。 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（事件对象），

在那里你可以直接传递为对象框。盒已经然后实现功能onEventReceived（事件）

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

来源

2015-07-21 14:22:20

附加到HTML元素的JS对象

回答

相关问题