main.js

let Menu = (()=> {
  'use strict'
 
  const api = new Api();
  const template = new Template();
  
  const $ = (el) => document.querySelector(el)
  const displayWidth = () => window.innerWidth
  const headerMenuFull = $('#container-menu');
   
  const urlApi = {
    menu : 'http://api-portalmenuhml.bandeirantes.com.br',
    live: 'http://pubvideos-hml.bandeirantes.com.br',
    weather: {
      api : 'http://www.band.uol.com.br/api/tempo/previsao/',
      name: 'somar',
      token: 'XX14529933@@2017',
      cidDefault: window.localStorage.getItem('ptCidade') || 'SaoPaulo-SP'
    }
  }
 
  const renderTemplate = (data, element, templateMarkup) => {
    const markup = templateMarkup(data)
    element.innerHTML = markup;
  }
 
  const initRenderMenu = () => {
    renderTemplate('', headerMenuFull, template.markupMenuFull)
     toogleMenu();
  }
 
  const buscarMenu = () => {
      api.get(`${urlApi.menu}/Menu/GetAll`)
          .then((res) => {
            initRenderMenu();
            return res.slice(0,10)
          })
          .then((res) => {
            let menuContainer = $('#render-Menuchannel');
            renderTemplate(res, menuContainer, template.createMarkupMenu)  
          })
           .then(() => {
            let menuDynamic = $('#menu-dynamic');
            api.get(`${urlApi.menu}/MenuDynamic/GetAll`).then((res) => {
              renderTemplate(res[0].programs, menuDynamic, template.markupMenuDynamic)
              eventMenuMobile();
              fixedMenu();
            })
           
          })
          .then(() => {
            buscarLive();
          })
          .then(() => {
            buscarWeather();
          })
  }
 
  const buscarLive = () => {
    let contanierLive = $('#on-air');
    api.get(`${urlApi.live}/Programa/Grade`)
      .then((res) => {
        let live = res.filter((item) => item.isLive)
        if(live.length)  {
          renderTemplate(live, contanierLive, template.markupLive)
        }
       
      })
  }
 
  const buscarWeather= () => {
    let container = $('#weather');
    api.get(`${urlApi.weather.api}?cid=${urlApi.weather.cidDefault}`)
      .then((res) => {
        renderTemplate(res, container, template.markupWeather)
      })
  }
 
   const toogleMenu = () => {
    let btnMenuChannel = $('#btn-menu-channel');
    let menuChannel = $('#menu-channel');
    let bgMenu = $('.l-header__channel__bg');
 
    btnMenuChannel.addEventListener('click', (event) => {
    event.preventDefault();
      btnMenuChannel.classList.toggle('active')
      menuChannel.classList.toggle('active');
      if(displayWidth() < 450) {
        bgMenu.classList.toggle('active');
        if ('vibrate' in navigator) window.navigator.vibrate(100);
      }
    })
 
    bgMenu.addEventListener('click', (e) => {
        event.preventDefault();
        btnMenuChannel.classList.toggle('active')
        bgMenu.classList.remove('active');
        menuChannel.classList.remove('active');
    })
 
  }
 
  const fixedMenu = () => {
    let menuChannel = $('#menu-channel');
    window.addEventListener('scroll', function(e){
      const header = $('.l-header');
      if(window.scrollY > 99){
        header.classList.add('active')
        menuChannel.classList.add('scroll')
      }else {
        header.classList.remove('active')
        menuChannel.classList.remove('scroll')
      }
    })
  }
 
  const eventMenuMobile = () => {
 
      let btnMenuFull = document.querySelectorAll('.m-menu__channelFull__title');
 
      btnMenuFull.forEach((el) => {
      if(displayWidth() < 450){
        el.addEventListener('click',(e) => {
          e.preventDefault();
          el.nextElementSibling.classList.toggle('active');
          el.children[0].classList.toggle('fa-caret-up');
          el.children[0].classList.toggle('fa-caret-down');
        })
      }
    })
  }
 
  const init = () => {
    buscarMenu();
    }
 
    return {
        init: init
    }
 
})()
 
Menu.init();

Estou fazendo vários then() porque um template depende do outro, criei um arquivo que só tem os template string, por sua vez o markupMenuFull precisa estar pronto para o createMarkupMenu e os demais templates sejam populado dentro dele! Não sei se estou fazendo isso com uma boa pratica!

https://gist.github.com/tosipaulo/80d6549b3fd182aecb6ad747dd29919e