製作放大/縮小放大

Question

我該如何縮小這段代碼？也許是一個切換，但人們說這很容易在jQuery中完成。但問題是，我不喜歡在我的代碼中只使用jQuery。

function open() { 
document.getElementById('message').style.display='block'; 
document.getElementById('fade').style.display='block'; 
} 

function close() { 
document.getElementById('message').style.display='none'; 
document.getElementById('fade').style.display='none'; 
} 

Answer 1

DRY它起來。

var b='block',h='none',m='message',f='fade'; 
function s(i,d){document.getElementById(i).style.display=d} 
function open(){s(m,b);s(f,b)} 
function close(){s(m,h);s(f,h)} 

隨着空格和適當的變量名（要傳遞到minifier），這看起來像：

var show = 'block', hide = 'none', message = 'message', fade = 'fade'; 

function setStyle(id, display) { 
    document.getElementById(id).style.display=display; 
} 
function open() { 
    setStyle(message, show); 
    setStyle(fade, show); 
} 
function close() { 
    setStyle(message, hide); 
    setStyle(fade, hide); 
} 

有不涉及到這個問題，但有一些最佳實踐值得考慮的是，如果您的項目超出這種微不足道的情況：

• 使用縮小。我最喜歡的是uglifyjs。這使您可以在未定義的代碼中使用有意義的變量名稱（如第二個示例）。縮小器將輸出更類似於第一個例子（但可能甚至更好）的代碼。即使使用縮小器，也要考慮它可以做什麼和不可以做什麼 - 創建一個私有快捷方式來訪問像public.getElementById這樣的公共API，如果您經常使用該API，可以幫助縮小規模。查看縮小的代碼以確保沒有什麼可以優化的。
• 將你的javascript分離成獨立於頁面加載的.js模塊，如果可能的話，使用asychrounously。
• 管理您的所有靜態資產（如.js模塊），以使它們具有較長的高速緩存超時 - 使用Expires: http標頭。然後在實際更改時更改其網址。這樣，客戶端可以無限期地緩存它們，直到您更改它們，然後客戶端立即獲取新版本。
• 在函數包裝中放置離散模塊，以便您的變量不會與其他代碼段 - 您自己的或第三方模塊發生衝突。如果你想使一個變量公開，做到這一點明確：window.pubvar =

Answer 2

var message = document.getElementById('message'), 
    fade = document.getElementById('fade'); 

function open() { 
    message.style.display = fade.style.display = 'block'; 
} 

function close() { 
    message.style.display = fade.style.display = 'none'; 
} 

或者：

function toggle() { 
    var message = document.getElementById('message'), 
     fade = document.getElementById('fade'), 
     currentdisplay = getComputedStyle(message, null)['display']; 

    if(currentdisplay == 'block' || currentdisplay == 'inline') 
     message.style.display = fade.style.display = 'none'; 
    else 
     message.style.display = fade.style.display = 'block'; /* or inline */ 
} 

或者：

function toggle() { 
    var currentdisplay = getComputedStyle(arguments[1], null)['display'], 
     i, 
     newdisplay; 

    if(currentdisplay == 'block' || currentdisplay == 'inline') 
     newdisplay = 'none'; 
    else 
     newdisplay = 'block'; 

    for(i = 0; i < arguments.length; i++) 
     arguments[i].style.display = newdisplay; 
} 

var message = document.getElementById('message'), 
    fade = document.getElementById('fade'); 

toggle(message, fade); /* hide */ 
toggle(message, fade); /* show */ 

document.body.onclick = function(){ 
    toggle(message, fade); 
} 

---

切換示例：

http://jsfiddle.net/djHTq/

Answer 3

避免了污染全局範圍：

(function() { 
    var msgstl = document.getElementById('message').style, 
     fdestl = document.getElementById('fade').style; 
    window.open = function() {msgstl.display = fdestl.display = "block";}; 
    window.close = function() {msgstl.display = fdestl.display = "none";}; 
})(); 

Answer 4

的一件事是，你可以對元素設置樣式創建一個輔助功能。這在您需要設置許多不同元素的情況下非常有用。

function setStyle(element, style, value) { 
    document.getElementById(element).style[style] = value; 
} 
function open() { 
    setStyle('message', 'display', 'block'); 
    setStyle('fade', 'display', 'block'); 
} 
function close() { 
    setStyle('message', 'display', 'none'); 
    setStyle('fade', 'display', 'none'); 
} 

如果您經常使用元素，您可能還想將元素設置爲變量。

var message = document.getElementById('message'), fade = ... 

Answer 5

var toggle = function(doc){ 
    var $ = doc.getElementById, message = $('message'), fade = $('fade'), open = true; 
    return function(){ 
     var display = open ? 'none' : 'block'; 
     message.style.display = display; 
     fade.style.display = display; 
     open = !open; 
    } 
}(document); 

toggle(); // Hide both elements 
toggle(); // Show both elements. Rinse and repeat.