javascript - 改进了使用模板字符串和 arr.reduce() 呈现的导航列表的语法

Question

我正在尝试 ES6 中的一些最新功能，以便处理框架问题。现在我正在构建一个导航菜单。这就是我用于渲染模板的内容。

// Prepare navigation container
var navMenuEl = document.createElement('div');
navMenuEl.id = 'lesson-navigation';
navMenuEl.className = 'menu side';

// Navigation options
let navItems = `
    <div class="link">
        <a href="/index.html">Home</a>
        <div class="label">View all lessons</div>
    </div>

    ${ links.reduce((t, link) => t + `

        <div class="link ${link.active === true ? 'active' : '' }">
            <a href="${link.url}">${link.title}</a>
            <div class="label">${link.description}</div>
        </div>

    `, '')}
`;

debug('Nav items:', navItems)

// Add navigation options
navMenuEl.innerHTML = navItems;

尽管由于 ES6 的缘故，这是一段令人惊叹的代码，但我想知道是否有更好的方法来编写reduce 函数。我在 JS 方面有丰富的经验，但我觉得新手可能会被语法迷惑。

添加 .active 类的问题相同。我可以有一个 util 方法 isActive(link) 但也许有更好的方法？例如，我可以为链接项使用专用的 Web 组件或渲染函数。但假设我不需要这里额外的组件。

干杯!

Answer 1

我不知道它是否更具可读性，但你可以替换 Array#reduce与 Array#map ，然后 Array#join这几项。此外，您可以为链接使用单独的变量，然后将它们添加到 navItems 中。

您可以编写不带 equal 和 true 的 .active 逻辑，并将其缩短一点:

link.active ? 'active' : ''

最终结果:

const linkItems = links.map((link) => `
    <div class="link ${link.active ? 'active' : ''}">
        <a href="${link.url}">${link.title}</a>
        <div class="label">${link.description}</div>
    </div>
`);

const navItems = `
    <div class="link">
        <a href="/index.html">Home</a>
        <div class="label">${link.description}</div>
    </div>

    ${ linkItems.join('') }
`;