代码之家 › 专栏 › 技术社区 › ControlAltDel

确认使用工厂是最好的(唯一的?)创建通用多用途点击计数监听器的方法

class javascript

ControlAltDel · 技术社区 · 6 年前

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

最初,我想作为一个班级而不是一个工厂来做这件事…回到我在爪哇工作的时候,我会用一个FAI课程来完成它,这就是我所想的。但我得出的结论是,在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;
}

1 回复 | 直到 6 年前

Jonas Wilms 6 年前

当然,您也可以使用类:

 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;

因为它将公开设置和可能有用的计数。

警告:以下内容不明确

回到我在爪哇工作的时候…

…你接管了那个毫无意义的命名计划( clickCountObj.clickCount )我想你不会泄露任何必要的信息 settings.count …