我正在尝试 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 组件或渲染函数。但假设我不需要这里额外的组件。
干杯!
最佳答案
我不知道它是否更具可读性,但你可以替换 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('') }
`;
关于javascript - 改进了使用模板字符串和 arr.reduce() 呈现的导航列表的语法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46390490/