如何重构电视节目搜索应用的过长JS代码并为API空值设置默认参数

重构后完整代码 #

const imgContainer = document.querySelector('.img-container')
const clearBtn = document.querySelector('.clear-btn')
// 占位图常量统一管理，后续修改直接调整此处即可
const DEFAULT_PLACEHOLDER_IMG = 'https://www.westernheights.k12.ok.us/wp-content/uploads/2020/01/No-Photo-Available.jpg'

searchForm.addEventListener('submit', function (e) {
    e.preventDefault()
    fetchApi()
})

const fetchApi = async () => {
    const userInput = searchForm.elements.query.value
    const config = { params: { q: userInput } }
    // 修正原变量名fetch，避免和浏览器原生fetch API重名引发冲突
    const res = await axios.get('https://api.tvmaze.com/search/shows', config)
    showDetails(res.data)
}

// 单独封装生成单条节目卡片HTML的函数，职责独立
const getShowCardHtml = (show) => {
    // 用可选链+空值合并运算符一次性处理所有缺省场景，无需多分支判断
    const showTitle = show.name
    const showImg = show.image?.medium ?? DEFAULT_PLACEHOLDER_IMG
    const showDesc = show.summary ?? 'N/A'
    const showGenre = show.genres?.[0] ?? 'N/A'
    // 仅需写一次HTML模板即可覆盖所有情况
    return `
    <div class="show-details">
        <h1>${showTitle}</h1>
        <img class="stock-img" src="${showImg}" alt="">
        <p class="show-desc">Description: ${showDesc}</p>
        <p class="show-genre">Genre: ${showGenre}</p>
    </div>
    `
}

const showDetails = (request) => {
    const reqMap = request.map(item => getShowCardHtml(item.show)).join('')
    imgContainer.innerHTML = reqMap
}

核心改动说明 #

• 抽离getShowCardHtml工具函数专门负责生成卡片HTML，原showDetails仅负责遍历数据和DOM插入，职责拆分清晰，后续调整卡片样式仅需修改该函数即可
• 采用ES6可选链（?.） + 空值合并运算符（??） 一次性处理所有字段缺省场景，无需罗列所有字段缺失的组合判断，代码量缩减70%以上
• 占位图地址抽为全局常量，后续替换资源无需遍历代码查找，统一修改更高效
• 修正了原代码中与原生API重名的变量命名问题，避免潜在运行故障

内容的提问来源于stack exchange，提问作者MiguelWebDev