我想把這兩個函數放在一個函數中

Question

這兩個語句是一樣的，我想做一個等價於他們的語句。

換句話說，我想將這些代碼的快捷方式作爲一項功能。

function chose1() {   
     if (document.getElementById("Button1").click = true) { 
      if (document.getElementById('Button1').value == "") { 
       document.getElementById('Button1').value += nextTurn; 
       document.getElementById('Button1').style.fontSize = "30px"; 
       document.getElementById('Button1').style.color = 'Blue'; 
       if (document.getElementById('Button1').value == "O") { 
        document.getElementById('Button1').style.color = 'Red' 
       } 
        changeTurn(); 
      } 
     } 

     } 
     function chose2() { 
      if (document.getElementById("Button2").click = true) { 
       if (document.getElementById('Button2').value == "") { 
        document.getElementById('Button2').value += nextTurn; 
        document.getElementById('Button2').style.fontSize = "30px"; 
        document.getElementById('Button2').style.color = 'Blue'; 
        if (document.getElementById('Button2').value == "O") { 
         document.getElementById('Button2').style.color = 'Red' 
        } 
        changeTurn(); 
       } 
      } 

     } 

Answer 1

function chose(id) { 
     var btn = document.getElementById(id) 
     if (btn.click = true) { 
      if (btn.value == "") { 
       btn.value += nextTurn; 
       btn.style.fontSize = "30px"; 
       btn.style.color = 'Blue'; 
       if (btn.value == "O") { 
        btn.style.color = 'Red' 
       } 
       changeTurn(); 
      } 
     } 

chose("Button1"); 
chose("Button2"); 

這是解決方案，不僅爲joinig兩個功能分爲二，但看你有多少次在一個函數訪問DOM元素像document.getElementById()，其導致性能下降。 將參考存儲在變量中並重新使用。像

var btn = document.getElementById(id) 

Answer 2

然後使用id而不是 「Button1的」 或 「Button2的」;你問之前搜索？...

Answer 3

它叫Refactoring。這個世界有很多關於它的好書。

你可以這樣做：

function chose(button) {  
    clickedButton = document.getElementById(button); 

     if (clickedButton.click = true) { 
      if (clickedButton.value == "") { 
       clickedButton.value += nextTurn; 
       clickedButton.style.fontSize = "30px"; 
       clickedButton.style.color = 'Blue'; 
       if (clickedButton.value == "O") { 
        clickedButton.style.color = 'Red' 
       } 
        changeTurn(); 
      } 
     } 

} 

Answer 4

可以重構爲接受什麼是可變的（按鈕ID）的單一方法。我建議我給你，這會給你一個更好的 組織和性能是分配一個變量與結果：document.getElementById（button_id），而不是在每一行上作出這種評估，你可以把一個 可以放在一個變量。

function _buttonChoser(button_id) { 
    var button_element = document.getElementById(button_id); 
    if (button_element.click = true) { 
     if (button_element.value == "") { 
      button_element.value += nextTurn; 
      button_element.style.fontSize = "30px"; 
      button_element.style.color = 'Blue'; 
      if (button_element.value == "O") { 
       button_element.style.color = 'Red' 
      } 
      changeTurn(); 
     } 
    } 
}; 

function chose1() {   
    _buttonChoser('Button1') 
}; 
function chose2() { 
    _buttonChoser('Button2') 
};