瘦身javascript代碼....靜態頁面上的動態頭與javascript

Question

這個元素加載最後，延遲在頁面上... 我創建了一個動態的頭與外部javascript文件爲我的靜態html頁面。 我需要幫助減少代碼。 另外，爲了調用函數，我調用了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; 

}

參考：[badertv.com]

Answer 1

在這兩種addHTML和createNav只有一個動態可變的。爲什麼連接？

加法： 你可以把整個東西放在一個函數中，並在關閉將要容納內容的元素的父標籤後調用它（如果兩個字符串不相同，可以設置兩個函數容器）。

Answer 2

第1步：減少重複（作功能，這使得跨度和標籤提供一個網址和文字

第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

減肥我猜可能會這樣，它會讓你省幾個字節，但我不知道是否值得這個努力。 body 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 
}