谁能帮我重构这段代码?我通过JS返回HTML，我的功能太长了.也许我可以使函数返回HTML?

Question

如果可能的话，我希望缩短这段代码。我正在制作一个电视节目搜索应用程序和我使用的API有一些空数组在它。我想知道我是否可以设置一些默认参数?我已经被困在这个问题上好几天了!我知道这篇文章读起来有点眼痛，但任何帮助都是非常感谢的。谢谢你看我的代码。

const imgContainer = document.querySelector('.img-container')
const clearBtn = document.querySelector('.clear-btn')
searchForm.addEventListener('submit', function (e) {
e.preventDefault()
fetchApi()
})
const fetchApi = async () => {
const userInput = searchForm.elements.query.value
const config = { params: { q: userInput } }
const fetch = await axios.get('https://api.tvmaze.com/search/shows', config)
showDetails(fetch.data)
}
const showDetails = (request) => {
const reqMap = request.map(function (shows) {
const showImg = shows.show.image
const showTitle = shows.show.name
const showDesc = shows.show.summary
const showGenres = shows.show.genres[0]
if (showImg && showTitle && showDesc && showGenres) {
let showImgMed = shows.show.image.medium
return `<div class="show-details">
<h1>${showTitle}</h1>
<img class="stock-img" src="${showImgMed}" alt="">
<p class="show-desc">Description: ${showDesc}</p>
<p class="show-genre">Genre: ${showGenres}</p>
</div>`
} else if (!showGenres && !showImg && !showDesc) {
return `<div class="show-details">
<h1>${showTitle}</h1>
<img class="stock-img" src="https://www.westernheights.k12.ok.us/wp-content/uploads/2020/01/No-Photo-Available.jpg" alt="">
<p class="show-desc">Description: N/A</p>
<p class="show-genre">Genre: N/A</p>

</div>`
} else if (!showImg) {
return `<div class="show-details">
<h1>${showTitle}</h1>
<img class="stock-img" src="https://www.westernheights.k12.ok.us/wp-content/uploads/2020/01/No-Photo-Available.jpg" alt="">
<p class="show-desc">Description: ${showDesc}</p>
<p class="show-genre">Genre: ${showGenres}</p>

</div>`
} else if (!showDesc) {
let showImgMed = shows.show.image.medium
return `<div class="show-details">
<h1>${showTitle}</h1>
<img class="stock-img" src="${showImgMed}" alt="">
<p class="show-desc">Description: N/A</p>
<p class="show-genre">Genre: ${showGenres}</p>

</div>`
} else if (!showGenres) {
let showImgMed = shows.show.image.medium
return `<div class="show-details">
<h1>${showTitle}</h1>
<img class="stock-img" src="${showImgMed}" alt="">
<p class="show-desc">Description: ${showDesc}</p>
<p class="show-genre">Genre: N/A</p>

</div>`
}
}).join('')
imgContainer.innerHTML = reqMap
}

Answer 1

预先定义变化的值，然后写出HTML字符串一次并插入。将mapper函数更改为:

const {
image,
name,
summary = 'N/A',
genres,
} = shows.show;
const imageSrc = image ? image.medium : 'https://www.westernheights.k12.ok.us/wp-content/uploads/2020/01/No-Photo-Available.jpg';
const showGenres = genres[0] || 'N/A';
return `
<div class="show-details">
<h1>${name}</h1>
<img class="stock-img" src="${imageSrc}" alt="">
<p class="show-desc">Description: ${summary}</p>
<p class="show-genre">Genre: ${showGenres}</p>
</div>
`;

Answer 2

你可以正常渲染HTML，然后通过javascript更改元素参数。

var element = document.createElement('div');
element.innerHTML = `<div class="show-details">
<h1>aa</h1>
<img class="stock-img" src="aa" alt="">
<p class="show-desc">Description: aa</p>
<p class="show-genre">Genre: aa</p>
</div>`.trim();

我们设变量showgenre == false

if(!showGenres) {
element.querySelector("p.show-desc").textContent = "Genre: N/A"
}

你可以在元素变量中定义一次内容，然后动态更改:)

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute