2013-12-10 2 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.

конструктор связывает обработчик щелчка и создает геттер для возврата текущего счета. 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

Смежные вопросы