2013-12-10 115 views
0

我想知道如何创建JS计数器(下面的期望看起来)使用私有属性的原型obeject和封闭。如果有人能告诉我如何,但也评论它,所以我可以理解的步骤和过程,我真的很感激它。私人财产和关闭

<!DOCTYPE html> 
<html> 
<body> 
    <button name="button" class="click-tracking">Click Me</button> 
    <script> 
    var counts = {}, 
    track = document.getElementsByClassName('click-tracking'); 

for (var i = 0, max = track.length; i < max; i++) { 
    track[i].addEventListener('click', function() { 

     var name = this.name, 
      ele = document.getElementById(name + '-count') || false; 


     if (typeof counts[name] === 'undefined') { 
      counts[name] = 0; 
     } 


     if (!ele) { 
      var ele = document.createElement('div'); 
       ele.id = name + '-count'; 


      this.parentNode.insertBefore(ele, this.nextSibling); 
     } 

     ele.innerHTML = counts[name]++; 
    }); 
} 
     </script> 
</body> 

</head> 
</html> 
+1

我不明白这个问题。你有什么问题与你的代码(这似乎很工作)? – Bergi

+0

你想要一个原型对象么?这个功能绝对没有必要 - 你没有多个共享公共属性的实例。 – Bergi

+0

我想为一个按钮做一个计数器,而不是仅仅使用js,我想在原型和闭包上使用私有属性。所以我只是把这个代码放在我想要的样子的例子中。对困惑感到抱歉。 – user3088804

回答

0

原型实例间共享,因为你只能通过关闭模拟私处你不能对原型实例特定的专用值。

有关构造函数和原型的介绍,您可以阅读this answer

构造函数创建一个计数器,可以启动和停止可以是这样的(我使用_private命名约定,而不是关闭。

var Counter = function(name){ 
    //instance specific values 
    this._intervalid=false; 
    this._counter=0; 
    this.name=name; 
}; 
Counter.prototype.start=function(){ 
    //create closure for invoking object 
    var me=this; 
    this._intervalid=setInterval(function(){ 
    me._counter++; 
    console.log(me.name,me._counter); 
    },100); 
}; 
Counter.prototype.stop=function(){ 
    if(this._intervalid){ 
    clearInterval(this._intervalid); 
    } 
}; 

var c1=new Counter("counter1"); 
var c2=new Counter("counter2"); 
setTimeout(function(){c2.start();},200); 
c1.start(); 
setTimeout(function(){c2.stop();c1.stop();},2000); 
0

您可以创建一个构造函数来创建原型对象。私人性质可以用局部变量来模拟,在这里我们创建一个局部变量count,这个变量不能在Counter函数之外被修改

构造函数绑定点击处理函数并创建一个getter方法来返回当前计数getCount和事件处理程序关闭每个实例的计数值。

function Counter(trackElement) { 
    var count = 0; 
    this.getCount = function() { return count; } 
    trackElement.addEventListener('click', function() { 
     count++; 
    }); 
} 

var counters = [], 
    track = document.getElementsByClassName('click-tracking'); 

for (var i = 0, i < track.length; i++) { 
    counters.push(new Counter(track[i])); 
} 
+0

原型发生了什么?我似乎记得在问题中提到它。 – HMR