如何缩小此代码?也许是一个切换,但人们说这很容易在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';
}
答案 0 :(得分:4)
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);
}
切换示例:
答案 1 :(得分:4)
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);
}
有些最佳做法与问题无关,但如果您的项目超出这个微不足道的情况,则值得考虑:
Expires:
http标头。然后在实际更改时更改其URL。这样,客户端可以无限期地缓存它们,直到您更改它们为止。然后客户端将立即获取新版本。window.pubvar =
答案 2 :(得分:3)
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.
答案 3 :(得分:2)
避免污染全球范围:
(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";};
})();
答案 4 :(得分:2)
有一件事是你可以创建一个辅助函数来设置元素的样式。这在您需要设置许多不同元素的情况下非常有用。
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 = ...