Question

我正在尝试实现一种实用的DRY编程风格。在这种情况下，我将需要以某种方式将“显示”操作转换为一个函数（这是一个问题，因为它会为每个输出生成特定的输出），找到一种方法来完全摆脱全局变量并同时处理click和关键字事件同时避免代码的重复。我无法更改HTML上的“ id”标记或类，因为它们是请求的结构的一部分。有什么想法吗？

HTML

   CREATE GLOBAL TEMPORARY TABLE EMAIL_NEW
ON COMMIT PRESERVE ROWS
AS

SELECT
  CUSTOMER_ID

FROM CUSTOMER_TABLE  
;

JavaScript

<body>
    <div id="drum-machine">
        <div id="display">
            <p id="displaytext"></p>
        </div>
            <div id="controls1">
            <button id="Heater1button"  class="drum-pad"><audio class="clip" id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" preload="auto"></audio>Q</button>
            <button id="Heater2button" class="drum-pad"><audio class="clip" id='W' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" preload="auto"></audio>W</button>
            <button id="Heater3button" class="drum-pad"><audio class="clip" id='E' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" preload="auto"></audio>E</button>
            </div>
        <div id="controls2">
            <button id="Heater4button" class="drum-pad"><audio class="clip" id='A' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" preload="auto"></audio>A</button>
            <button id="Heater6button"  class="drum-pad"><audio class="clip" id='S'src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"></audio>S</button>
            <button id="OpenHHbutton"  class="drum-pad"><audio class="clip" id='D'src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"></audio>D</button>
        </div>
        <div id="controls3">
            <button id="KicknHat" class="drum-pad"><audio class="clip" id='Z'src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"></audio>Z</button>
            <button id="Kickbutton"class="drum-pad"><audio class="clip" id='X'src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"></audio>X</button>
            <button id="ClosedHHbutton"class="drum-pad"><audio class="clip" id='C' src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"></audio>C</button>
        </div>
    </div>

Answer 1

代替重构代码，我将展示如何从头开始编写代码。

通过className选择目标元素，并将集合转换为常规数组：

const dps = [].slice.call(document.querySelectorAll('.drum-pad'));
const dt = document.querySelector('#displaytext');

使用数组代替使用switch语句：

const texts = ["Heater 1", "Heater 2", "Heater 3", "Heater 4", "Heater 6", "Open HH", "Kick N Hat", "Kick", "Closed HH"];
const keycodes = [81, 87, 69, 65, 83, 68, 90, 88, 67];

为click和keydown事件定义通用处理程序，并使用Array.prototype.indexOf查找目标元素：

function handler(e) {
  const index = e.type === 'keydown' ? keycodes.indexOf(e.keyCode) : dps.indexOf(this);
  const target = dps[index];
  if (!target) return;
  const audio = target.childNodes[0];
  audio.play();
  dt.textContent = texts[index];
}

dps.forEach(function(el) {
  el.addEventListener('click', handler);
});

document.addEventListener("keydown", handler);

A demo on jsfiddle

以上解决方案是尝试使脚本更短。当然，这不是唯一的解决方案。您也可以使用HTML5 data- *属性代替数组。

整理和多个事件侦听器

1 个答案: