大佬教程收集整理的这篇文章主要介绍了如何以更有效和更短的方式编写 Javascript，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我编写了一些代码，适用于我创建的并列。作为 JavaScript 的初学者，我以有意义的方式编写它，经过长时间的研究，我能够创建运行良好的代码。然而，代码非常重复，而且比它应该的要长得多，尽管我不确定如何在不破坏它的情况下重写它。我想让它只写一次，而不是每次使用它，再加上任何其他可以使代码更紧凑的东西。这是我写的代码：
window.addEventListener("load",(event) => {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
var color = JsonObject['color'];
for (var i = 0; i < color.length; i++) {
var buttoncolor = i;
if (buttoncolor == 0 ) {
document.querySELEctor(".btn-1").style.BACkgroundImage = `url(${Color[0].smallimagE})`;
}
else if (buttoncolor == 1 ) {
document.querySELEctor(".btn-2").style.BACkgroundImage = `url(${Color[1].smallimagE})`;
}
else if (buttoncolor == 2 ) {
document.querySELEctor(".btn-3").style.BACkgroundImage = `url(${Color[2].smallimagE})`;
}
else if (buttoncolor == 3 ) {
document.querySELEctor(".btn-4").style.BACkgroundImage = `url(${Color[3].smallimagE})`;
}
else if (buttoncolor == 4 ) {
document.querySELEctor(".btn-5").style.BACkgroundImage = `url(${Color[0].smallimagE})`;
}
else if (buttoncolor == 5 ) {
document.querySELEctor(".btn-6").style.BACkgroundImage = `url(${Color[1].smallimagE})`;
}
else if (buttoncolor == 6 ) {
document.querySELEctor(".btn-7").style.BACkgroundImage = `url(${Color[2].smallimagE})`;
}
else if (buttoncolor == 7 ) {
document.querySELEctor(".btn-8").style.BACkgroundImage = `url(${Color[3].smallimagE})`;
}
else if (buttoncolor == 8 ) {
document.querySELEctor(".btn-9").style.BACkgroundImage = `url(${Color[0].smallimagE})`;
}
else if (buttoncolor == 9 ) {
document.querySELEctor(".btn-10").style.BACkgroundImage = `url(${Color[1].smallimagE})`;
}
else if (buttoncolor == 10 ) {
document.querySELEctor(".btn-11").style.BACkgroundImage = `url(${Color[2].smallimagE})`;
}
else if (buttoncolor == 11 ) {
document.querySELEctor(".btn-12").style.BACkgroundImage = `url(${Color[3].smallimagE})`;
}
else if (buttoncolor == 12 ) {
document.querySELEctor(".btn-13").style.BACkgroundImage = `url(${Color[0].smallimagE})`;
}
else if (buttoncolor == 13 ) {
document.querySELEctor(".btn-14").style.BACkgroundImage = `url(${Color[1].smallimagE})`;
}
}
});
var buttons2 = document.querySELEctorAll('.btn');
for (let i = 0; i < buttons2.length; i++) {
buttons2[i].onclick = function () {
let switcher = i;
if (switcher == 0 ) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "red";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[0].imagE)
{
image.src = color[0].image;
}
else
{
image.src = color[0].image;
}
};
});
}
else if (switcher == 1) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "blue";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[1].imagE)
{
image.src = color[1].image;
}
else
{
image.src = color[1].image;
}
};
});
}
else if (switcher == 2) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "yellow";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[2].imagE)
{
image.src = color[2].image;
}
else
{
image.src = color[2].image;
}
};
});
}
else if (switcher == 3) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "green";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[1].imagE)
{
image.src = color[3].image;
}
else
{
image.src = color[3].image;
}
};
});
}
else if (switcher == 4) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "red";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[2].imagE)
{
image.src = color[0].image;
}
else
{
image.src = color[0].image;
}
};
});
}
else if (switcher == 5) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "blue";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[1].imagE)
{
image.src = color[1].image;
}
else
{
image.src = color[1].image;
}
};
});
}
else if (switcher == 6) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "yellow";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[2].imagE)
{
image.src = color[2].image;
}
else
{
image.src = color[2].image;
}
};
});
}
else if (switcher == 7) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "green";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[1].imagE)
{
image.src = color[3].image;
}
else
{
image.src = color[3].image;
}
};
});
}
else if (switcher == 8) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "red";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[2].imagE)
{
image.src = color[0].image;
}
else
{
image.src = color[0].image;
}
};
});
}
else if (switcher == 9) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "blue";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[1].imagE)
{
image.src = color[1].image;
}
else
{
image.src = color[1].image;
}
};
});
}
else if (switcher == 10) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "yellow";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[2].imagE)
{
image.src = color[2].image;
}
else
{
image.src = color[2].image;
}
};
});
}
else if (switcher == 11) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "green";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[1].imagE)
{
image.src = color[3].image;
}
else
{
image.src = color[3].image;
}
};
});
}
else if (switcher == 12) {
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "red";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[2].imagE)
{
image.src = color[0].image;
}
else
{
image.src = color[0].image;
}
};
});
}
else{
const t = "Js/test.Json"
fetch(t)
.then(function (responsE) {
return response.Json();
})
.then(function (JsonObject) {
const color = JsonObject['color'];
for (let i = 0; i < color.length; i++) {
let name = "blue";
document.getElementByID("color-title").INNERHTML = name;
var image = document.getElementByID('bigpic');
if (image.getAttribute('src') !== color[3].imagE)
{
image.src = color[1].image;
}
else
{
image.src = color[1].image;
}
};
});
}
}
}
})
有什么建议吗？
function 打包相同的逻辑。@H_874_15@
试试看：
window.addEventListener("load",async (event) => {
let json = { color: [] } // init data
try {
const url = "js/test.json";
const res = await fetch(url);
json = response.json();
} catch (err) {
// ajax or other err
}
const { color } = json; // array
if (color.length === 0) {
// no data
throw new Error('no color data')
}
// make color loop @R_673_7000@n btn?
const allButtons = document.querySELEctorAll('.btn');
const titleEle = document.getElementById('color-title');
const imgEle = document.getElementById('bigpic');
const names = ['red','blue','yellow','green'];
allButtons.forEach((button,idX) => {
// idx = 0,btn-1
// idx = 1,btn-2
// if not,please change this part
const offset = idx % color.length; // % => remainder,(idx = 7) % color.length (4?) = 3
const name = names[offset]
const { smallImage,image } = color[offset]; // extract smallImage,image
button.style.BACkgroundImage = `url(${smallImagE})`;
// button.onclick = function?
button.addEventListener('click',function ($E) {
titleEle.innerHTML = name;
imgEle.src = image // no need to check even if no change
/* you change it anyway,so why are you compare it? this part is waird
if (image.getAttribute('src') !== color[1].imagE)
{
image.src = color[3].image;
}
else
{
image.src = color[3].image;
}
*/
})
});
})
以上是大佬教程为你收集整理的如何以更有效和更短的方式编写 Javascript全部内容，希望文章能够帮你解决如何以更有效和更短的方式编写 Javascript所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。