[英]I want to put these two functions in one function
These two statements are identical, I want to make one statement that is equivalent to them. 这两个语句是相同的,我想做一个等同于它们的语句。
In other words I want to make a shortcut of these codes as 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");
This is the solution , not only for joinig two functions into two but look at how many times in one function you are accessing the dom element like document.getElementById()
, its leads to performance degrade. 这是解决方案,不仅可以将两个函数合并为两个,还可以查看一个函数中访问诸如document.getElementById()
类的dom元素的次数,这会导致性能下降。 Store the reference in a variable and reuse it. 将引用存储在变量中并重用。 like 喜欢
var btn = document.getElementById(id)
function chose( id ) { }
Then you use id
instead of "Button1" or "Button2" ; 然后,使用id
代替“ Button1”或“ Button2”; have you searched before asking ?... 在询问之前您是否进行过搜索?...
It's called Refactoring
. 这就是所谓的Refactoring
。 This world have many good books about it. 这个世界上有很多关于它的好书。
You can do: 你可以做:
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();
}
}
}
You can refactor into a single method that accepts what is variable (the button id). 您可以将其重构为可以接受变量(按钮ID)的单个方法。 And i suggestion i give to you, which will give you a better organization and performance is to assign a variable with the result of the: document.getElementById(button_id), instead of on each line making this evaluation you can put on a variable. 我建议我给您,这样可以给您带来更好的组织和性能,那就是分配一个变量,其结果为: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.