[英]I want to put these two functions in one function
這兩個語句是相同的,我想做一個等同於它們的語句。
換句話說,我想將這些代碼的快捷方式作為一個功能。
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();
}
}
}
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");
這是解決方案,不僅可以將兩個函數合並為兩個,還可以查看一個函數中訪問諸如document.getElementById()
類的dom元素的次數,這會導致性能下降。 將引用存儲在變量中並重用。 喜歡
var btn = document.getElementById(id)
function chose( id ) { }
然后,使用id
代替“ Button1”或“ Button2”; 在詢問之前您是否進行過搜索?...
這就是所謂的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();
}
}
}
您可以將其重構為可以接受變量(按鈕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')
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.