Question

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

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

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

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

Answer 1

确保您也可以使用课程：

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

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

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

小边注：代替

 return clickCountListener;

这更有意义

 return clickCountObj;

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

警告：下面的恶意内容

回想我在Java中工作时...

...您接管了这种毫无意义的命名方案（clickCountObj.clickCount）。我想您不会只settings.count就放弃任何必要的信息...

确认使用工厂是创建通用的多用途点击计数侦听器的最佳方法（唯一？）

1 个答案: