Уменьшение размера кода JavaScript. Динамический заголовок на статической странице с использованием JavaScript.

Question

Этот элемент загружается последним и с задержкой на странице ... Я создал динамический заголовок с внешним файлом javascript для моей статической HTML-страницы.Мне нужна помощь, чтобы уменьшить код.Также для вызова функции я вызываю метод тела onLoad.Любые предложения о том, как вызвать эту ВНЕШНЮЮ функцию до того, как ВСЕ содержимое страницы загрузится?

function addHeaders(){
var emptyHTML = document.getElementById("category_header").innerHTML;
var addHTML = 
 "<span>" + emptyHTML + "<a href='/broadcast_webcast/' class='catnav'>" + "Live     Broadcasts &amp; Webcasts" + "</a>" + "</span>"
  + "<span>" + "<a href='/business/' class='catnav'>" + "Business" + "</a>" + "</span>" 
  + "<span>" + "<a href='/celebrities/' class='catnav'>" + "Celebrities" + "</a>" + "</span>" 
  + "<span>" + "<a href='/culture/' class='catnav'>" + "Culture" + "</a>" + "</span>" 
  + "<span>" + "<a href='/education/' class='catnav'>" + "Education" + "</a>" + "</span>" 
  + "<span>" + "<a href='/energy/' class='catnav'>" + "Energy" + "</a>" + "</span>" 
  + "<span>" + "<a href='/entertainment/' class='catnav'>" + "Entertainment" + "</a>" + "</span>" 
  + "<span>" + "<a href='/environment/' class='catnav'>" + "Environment" + "</a>" + "</span>" 
  + "<span>" + "<a href='/fashion/' class='catnav'>" + "Fashion" + "</a>" + "</span>" 
  + "<br>" 
  + "<span>" + "<a href='/health/' class='catnav'>" + "Health &amp; Fitness" + "</a>" + "</span>" 
  + "<span>" + "<a href='/humanitarian/' class='catnav'>" + "Humanitarian" + "</a>" + "</span>" 
  + "<span>" + "<a href='/movies/' class='catnav'>" + "Movies" + "</a>" + "</span>" 
  + "<span>" + "<a href='/music/' class='catnav'>" + "Music" + "</a>" + "</span>"
  + "<span>" + "<a href='/hollywood/' class='catnav'>" + "Hollywood" + "</a>" + "</span>"

  + "<span>" + "<a href='/newyork/' class='catnav'>" + "New York City" + "</a>" + "</span>" 
  + "<span>" + "<a href='/scienceandtech/' class='catnav'>" + "Science &amp; Technology" + "</a>" + "</span>" 
  + "<span>" + "<a href='/sports/' class='catnav'>" + "Sports" + "</a>" + "</span>"
  + "<span>" + "<a href='/videogames/' class='catnav'>"+ "Video Games" + "</a>" + "</span>"

 document.getElementById("category_header").innerHTML = addHTML;

 var getNav = document.getElementById("navtop").innerHTML;
 var createNav = 
 "<span class='navtop'>" + getNav + "<a href='../' class='navtop'>" + "Home" + "</a>" + "</span>" 
 + "<span class='navtop'>" + "<a href='/contact-us' class='navtop'>" + "Contact Us" + "</a>" + "</span>"
 + "<span class='navtop'>" + "<a href='/our-expertise' class='navtop'>" + "Our Expertise" + "</a>" + "</span>"
 + "<span class='navtop'>" + "<a href='/worldwide-studios-offices/' class='navtop'>" + "Bader TV Worldwide Studios &amp; Offices" + "</a>" + "</span>"
 + "<span class='navtop'>" + "<a href='/careers' class='navtop'>" + "Careers" + "</a>" + "</span>" 
 + "<span class='navtop'>" + "<a href='/urgent-video-requests' class='navtop'>" + "Urgent video Requests" + "</a>" + "</span>"

 document.getElementById("navtop").innerHTML = createNav;   

}

ref: [badertv.com]

Answer 1

Шаг 1: Уменьшите дублирование (создайте функцию, которая заставляет span и теги давать URL и текст.

Шаг 2: Используйте массив и цикл для URL и текста.

function makeLink(url, text){
  return "<span><a href='"+url+"' class='catnav'>"+text+"</a></span>";
}
var url = ['/business/','/celebrities/',...];
var text = ['Business','Celebrities',...];
var out = '';
for(var i = 0; i < url.length; i++){
  out += makeLink(url[i],text[i]);
}

Добавьте любые особые случаи, и все готово.

Answer 2

Похоже, что похудение могло бы пойти так, оно сэкономит вам несколько байтов, но мне интересно, стоит ли это усилий. Для части загрузки: вызов этого в теле onload безопасен, потому что он, вероятно, гарантирует, что getElementbyId будет работать. Если вы поместите тег сценария в конец тега </body>, он также может работать, но в другом браузере поведение может быть другим (иначе не работает).

function link(linkText) {
  return "<span><a href='/" + linkText[0] + "/' class='catnav'>" + linkText[1] + "</a></span>";
}

function addHeaders(){ 
var emptyHTML = document.getElementById("category_header").innerHTML, 
    linkTexts = [ 
["broadcast_webcast", "Live Broadcasts &amp; Webcasts"],
["business", "Business"] 
// etc
],
addHtml;

addHtml = new [];
for (i=0;i<linkTexts.length;i += 1) {
  addHtml.push(link(linkTexts[i]));
}

document.getElementById("category_header").innerHTML = addHtml.join("");

// rest of the code 
}

Answer 3

В addHTML и createNav имеется только одна динамическая переменная.Почему конкатенация?

Добавление: вы можете просто поместить все это в функцию и вызвать ее после закрытия родительского тега для элемента, который будет содержать содержимое (вы можете установить две функции, если две строки нетот же контейнер).