JavaScriptコードをスリミングしています.... JavaScriptを使った静的ページの動的ヘッダー

Question

この要素は最後にロードされ、ページ上で遅延しています... 静的なHTMLページ用の外部javascriptファイルを使用して動的ヘッダーを作成しました。 私はコードを細くする助けが必要です。 また、関数を呼び出すために、body onLoadメソッドを呼び出します。すべてのページの内容が読み込まれる前に、このEXTERNAL関数を呼び出す方法に関する提案はありますか？

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：両方addHTML及びIn [badertv.com]

createNav

Answer 1

だけつの動的変数を有します。なぜ連結？

追加： コンテンツを保持する要素の親タグを閉じた後で、関数内のすべての要素を入れて呼び出すことができます（2つの文字列が同じでない場合は2つの関数を設定できます）コンテナ）。

Answer 2

ステップ1：重複を減らす（スパンとタグは、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 3

私はこのようになるかもしれないと思っています。それは数バイト余分になりますが、それは努力する価値があるのだろうかと思います。 getElementbyIdが動作することをおそらく保証しているので、body onloadは安全です。スクリプトタグを</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 
}