Confirming that using a factory is the best (only?) way to create a generic multi-use click count listener

问题

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.

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.

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

回答1:

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.

Small sidenote: Instead of

 return clickCountListener;

it would make more sense to

 return clickCountObj;

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

warning: unserious content below

Way back when I was working in Java ...

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

来源：https://stackoverflow.com/questions/52615443/confirming-that-using-a-factory-is-the-best-only-way-to-create-a-generic-mult

标签

javascript

class