将多个相似的 JavaScript 函数合二为一答案

【问题标题】：Combine multiple similar JavaScript functions into one将多个相似的 JavaScript 函数合二为一
【发布时间】：2022-01-15 18:08:13
【问题描述】：

我正在创建一个需要复制到剪贴板的扩展，但我不希望有 18 个不同的功能（几乎）做完全相同的事情。

这是我写的函数：

function copyS1_1() {
    var letter_to_copy = document.getElementById('textarea-S1-1');
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}
function copyS1_2() {
    var letter_to_copy = document.getElementById('textarea-S1-2');
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}

对于“Section”，每个函数都称为“copyS#_#”，然后是该部分中的编号。我不想拥有其中的 18 个，所以我正在寻找一种方法将其简化为 3 个功能（每个部分一个，有 3 个。）

【问题讨论】：

使用函数参数。将元素 id（或两个#）声明为参数。
"将其简化为 3 个函数" - 为什么不完全简化为 1 个函数？
@Bergi 我可以，而且会更好，但我不知道如何开始，所以我只是说了一些看起来可能更容易的话，并且在Cam 所说的，我会使用 3 个函数，但看看 Cam 是如何做到的，我可以将其简化为 1 个函数。

标签： javascript html

【解决方案1】：

您可以使用模板文字和函数参数来做到这一点。

function copyFuncForAny(num1, num2) {
    var letter_to_copy = document.getElementById(`textarea-S${num1}-${num2}`);
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}

copyFuncForAny(1, 1);
copyFuncForAny(1, 2);

【讨论】：

【解决方案2】：

你可以添加一个参数：

function copyS1(id) {
    var letter_to_copy = document.getElementById('textarea-S1-' + id);
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}

这样使用：

copyS1(1)
copyS1(2)
...

【讨论】：

所以我实际上尝试了这个，但我认为因为我使用document.getElementById('Sec1_BTN1').addEventListener('click', copyS1(1)); 和你的建议，它会触发页面加载事件。有什么想法吗？
@jasonhe 是的！如您所知，addEventListener 的第二个参数是您希望 JS 在事件发生时运行的函数。你的代码的问题：JS 认为你希望它运行的函数是undefined，因为copyS1(1)，一旦你调用 addEventListener 就会运行，计算结果为undefined。你真正想要的是：document.getElementById('Sec1_BTN1').addEventListener('click', function() { copyS1(1) }); 之所以有效，是因为 function() { copyS1(1) } 的计算结果是一个函数
另一种方法是使用“绑定”——背景见developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。但代码看起来像这样：document.getElementById('Sec1_BTN1').addEventListener('click', copyS1.bind(null, 1));。它之所以有效，是因为 copyS1.bind(null, 1) 评估为“调用 copyS1(1) 的函数”。

【解决方案3】：

这很简单，只是你自己的函数

function copyText(id) {
    var letter_to_copy = document.getElementById(id);
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}

想用多少次就用多少次。

【讨论】：

【解决方案4】：

为什么不简单地将字符串作为参数传递？

function copyS1_1(id) {
  var letter_to_copy = document.getElementById(id);
  letter_to_copy.select();
  navigator.clipboard.writeText(letter_to_copy.value);
}

【讨论】：

【解决方案5】：

textarea-S1-1这里唯一变化的值，所以你可以把它作为参数传递给一个通用函数

function copyS1(textarea) {
    var letter_to_copy = document.getElementById(textarea);
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}

按如下方式使用

var copyS1_1 = copyS1('textarea-S1-1')
var copyS1_2 = copyS1('textarea-S1-2')

【讨论】：