Javascript 使显示/隐藏变小

我如何使代码更小？也许是一个切换，但人们说这在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';
}

或：

或：

函数切换（）{
var currentdisplay=getComputedStyle（参数[1]，null）['display']，
我
新显示器；
如果（currentdisplay='block'| | currentdisplay=='inline'）
newdisplay='none'；
其他的
newdisplay='block'；
对于（i=0；i

​

---

切换示例：

把它打开

使用空格和适当的变量名（要传递给迷你们），如下所示：

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);
}

有一些最佳实践与问题无关，但如果您的项目超出了这一微不足道的情况，则值得考虑：

• 使用缩小器。我最喜欢的是。这允许您在未统一的代码中使用有意义的变量名（如第二个示例）。minifier将输出与第一个示例更相似（但可能更好）的代码。即使使用小型化器，也要不断思考它能做什么和不能做什么——创建一个长的公共API（如document.getElementById）的私有快捷方式，如果您经常使用该API，它可以帮助实现小型化。查看缩小的代码，以确保您无法对其进行优化
• 如果可能的话，将javascript分离到独立于页面和异步加载的.js模块中
• 管理所有静态资产（如.js模块），使其具有较长的缓存超时时间-使用

  Expires:

  http头。然后在它们实际更改时更改它们的URL。这样，客户端可以无限期地缓存它们，直到您更改它们&然后客户端将立即获取新版本
• 将离散模块放在函数包装器中，这样您的变量就不会与其他代码片段发生冲突—无论是您自己的模块还是第三方模块。如果要将变量公开，请显式执行：

  window.pubvar=

---

避免污染全球范围：

(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";};
})();

---

一件事是您可以创建一个帮助器函数来设置元素的样式。这在需要设置许多不同元素的情况下非常有用

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 = ...

---

+1表示“我不喜欢在我的代码中只为一件事使用jQuery。”几乎所有人都喜欢使用jQuery（快餐，含有反式脂肪酸）通常花费较少的时间，但当你做自制（健康）的时候，你知道其中有什么，你不需要增加额外的脂肪。Fat=不使用的额外千字节代码。+1即使有更多的代码行，这肯定是一个改进，因为这意味着每次调用

open

和

close

时，您不需要从DOM中获取

消息

和

fade

元素。如何两次干调用相同的函数？251对265字节。没有那么多区别：）这是糟糕的开发代码。。。这就是迷你们的用途！是的，我最初对它进行编码时假设它被包装在一个函数中&小型化——这在我的环境中很常见。但随后，为了回应关于它仍然很大的抱怨，编辑了它。不能让他们都高兴！操作提示（通常是每个人）。如果您对

document.getElementById

进行速记，请将其设置为全局，并使用

$

或

\u

而不是

g

。最好保持。

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);
}

(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";};
})();

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 = ...

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.