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。

您可以在没有相等和.active的情况下编写true逻辑，并稍微缩短一下：

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('') }
`;

改进了使用模板字符串和arr.reduce（）

1 个答案: