템플릿 문자열 및 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 때문에 놀라운 코드 조각이긴하지만, 저감 기능을 작성하는 더 좋은 방법이 있는지 궁금합니다. JS에서 많은 경험을했지만 신참이 구문에 의해 방향 감각을 잃어 버릴 수 있다고 생각합니다.

.active 클래스를 추가 할 때와 같은 질문입니다. 나는 util 메소드 isActive(link)을 가질 수 있지만, 아마도 더 좋은 것이 있을까요? 예를 들어 링크 항목에 전용 웹 구성 요소 또는 렌더링 기능을 사용할 수 있습니다. 하지만 여기에 여분의 구성 요소가 필요 없다고합니다.

건배!

Answer 1

더 읽기 쉬울 지 모르겠지만 Array#reduce을 Array#map으로 바꾼 다음 Array#join으로 바꿀 수 있습니다. 또한 링크에 별도의 변수를 사용하여 navItems에 추가 할 수 있습니다.

당신은 동등하고 true없이 .active 로직을 작성하고, 조금을 단축 할 수 있습니다

link.active ? 'active' : '' 

최종 결과 :`linkItems.join()`와

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