將多個類似的 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')