确认使用工厂是创建通用的多用途点击计数侦听器的最佳方法(唯一?) [英] Confirming that using a factory is the best (only?) way to create a generic multi-use click count listener

问题描述

我创建了以下点击计数工厂，用于将点击计数添加到常规点击事件中已经存在的事件信息中.此函数将创建一个clickCountObj来跟踪点击次数，以及一个用于捕获给定元素参数上的click事件并将其与点击计数一起报告给侦听器参数的新函数.

I have created the following click count factory for adding the click count to the event information already present in a regular click event. This function creates a clickCountObj to track the number of clicks, as well as a new function for catching a click event on the given element parameter and reporting it back to the listener parameter along with the click count.

最初，我想作为一个类而不是工厂来进行此操作……回想当我在Java中工作时，我会使用façade类来完成此操作，所以这就是我的想法.但是我已经得出结论，在Javascript中是不可能的，因为用于创建对象的相同函数将是响应单击而调用的函数，而我看不到解决此问题的方法.

Originally, I wanted to do this as a class, rather than a factory... Way back when I was working in Java, I would have done it with a façade class, so that's what I was thinking. But I've concluded that it is not possible in Javascript, because the same function you'd use to create the object would be the one called in response to the click, and I can't see a way around this.

这个问题的目的仅仅是为了增进我对JavaScript的理解和使用.请让我知道，如果我在上述结论中有误，或者还有其他替代方法可以做得更好?

The purpose of this question is simply to improve my understanding and using of JavaScript. Please let me know if I am wrong in my conclusion stated above, or if there are any other alternatives to doing this a better way?

function clickCount(element, listener) {
  let clickCountObj = {};
  clickCountObj.clickCount = 0;
  clickCountObj.clickDelay = 500;
  clickCountObj.element = element;
  clickCountObj.lastClickTime = 0;
  let clickCountListener = function (e) {
//    alert("last click time: " + clickCountObj.clickDelay);
    if ((e.timeStamp - clickCountObj.clickDelay) < clickCountObj.lastClickTime) {
      clickCountObj.clickCount = clickCountObj.clickCount + 1;
//      alert("click count up: " + clickCountObj.clickCount);
    }
    else {
      clickCountObj.clickCount = 1;
    }
    clickCountObj.lastClickTime = e.timeStamp;
    listener.call(element, clickCountObj.clickCount, e);
  };
  if (!element) throw "No element to listener to";
  element.addEventListener("click", clickCountListener);
  return clickCountListener;
}

推荐答案

请确保您还可以使用一个类:

For sure you can also use a class:

 class ClickCounter {
   constructor(element, onClick, delay = 500) {
     this.element = element;
     this.onClick = onClick;
     this.counter = 0;
     this.delay = delay;
     this.lastClicked = 0;

     element.addEventListener("click", () => this.click(), false);
  }

  click() {
    if(Date.now() < this.lastClicked + this.delay)
      return;
    this.lastClicked = Date.now();
    this.onClick.call(this.element, this.counter++);
  }
}

 new ClickCounter(document.body, count => {
   alert(count);
 });

[这是一种更好的方法吗?

[is] doing this a better way?

不，不是这样.在这里使用类并不是真正有用的，因为您不想公开属性，也不需要继承.在这里建厂似乎是个好方法.

No, not really. Using a class is not really useful here as you don't want to expose properties and you also don't need inheritance. A factory seems to be a good approach here.

小边注:代替

 return clickCountListener;

这更有意义

 return clickCountObj;

因为它将显示可能有用的设置和计数.

as it would expose the settings and the count which might be useful.

警告:下面的恶意内容

回头，当我使用Java时...

Way back when I was working in Java ...

...您接管了这种毫无意义的命名方案( clickCountObj.clickCount ).我想您不会仅仅通过 settings.count ...

... you took over that senseless naming scheme (clickCountObj.clickCount). I guess you won't loose any necessary information with just settings.count ...

这篇关于确认使用工厂是创建通用的多用途点击计数侦听器的最佳方法(唯一?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！