javascript - JS 窗口宽度/高度函数 - 有效但需要一些建议

Question

我用 JavaScript 构建了这个窗口高度和宽度显示功能(类似于 Chrome DevTools 中的功能)。它的工作原理如下:

1. 如果您调整窗口宽度/高度，它会在附加文本框中显示当前屏幕尺寸。

2. 如果窗口处于非事件状态 3 秒，文本框将隐藏。

3. 如果您重新调整窗口，它会重置计时器(以免导致重叠，以防您在 1-2 秒内重新调整)。

它有效，这是我第三次重写，但我知道它可以编码得比这更好，有人可以给我一些关于如何改进我的代码的建议吗？我还处于菜鸟阶段。

https://jsfiddle.net/kon56edn/

var boxText = document.createElement('div');
var boxStyle = boxText.style;

boxStyle.position = 'fixed';
boxStyle.right = 0;
boxStyle.top = 0;
boxStyle.padding = '16px';
boxStyle.zIndex = 999;
boxStyle.fontSize = '22px';
boxStyle.display = 'none';

var timerHandle = setTimeout(3000);

function resetTimer() {
  window.clearTimeout(timerHandle);

timerHandle = setTimeout(function() {

  boxStyle.display = 'none';

 }, 3000);
}

window.addEventListener('resize', function(timerHandle) {

  boxText.innerText = window.innerWidth + 'px' + ' x ' + window.innerHeight + 'px';
  boxStyle.display = 'block';
  document.body.appendChild(boxText);

  resetTimer();

});

我真的很想更好地编写干净、模块化的 JS。任何帮助或观点表示赞赏! :-)

Answer 1

您有一些错误，主要是在事件处理程序上做了一些繁重的工作。这是一个更轻的版本

var box = document.createElement('div');
var timerHandle;

// I would move this to external css if you want cleaner code
box.style.position = 'fixed';
box.style.right = 0;
box.style.top = 0;
box.style.padding = '16px';
box.style.zIndex = 999;
box.style.fontSize = '22px';
box.style.display = 'none';

// Append the box to the view only once! not everytime the event occures
document.body.appendChild(box);

// Handler for when the time is up
function hideBox() {
    box.style.display = 'none';
}

// I would add a throttle function here, search for lodash throttle for example
window.addEventListener('resize', function() {
    box.innerText = window.innerWidth + 'px' + ' x ' + window.innerHeight + 'px';
    box.style.display = 'block';

    // Reset the timer everytime the event happens
    if (timerHandle) {
        clearTimeout(timerHandle);
        timerHandle = null;
    }

    // Start the timer only when the event happend
    timerHandle = setTimeout(hideBox, 3000);
});