将多个类似的 JavaScript 功能合二为一

Question

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

这是我写的 function：

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

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

Answer 1

您可以使用模板文字和 function arguments 来做到这一点。

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

Answer 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)
...

Answer 3

它很简单，只是你自己的 function 像这样

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

尽可能多地使用它。

Answer 4

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

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

Answer 5

textarea-S1-1它在这里唯一变化的值，所以你可以将它作为参数传递给一般的 function

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')