3

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

5 回答 5

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

​</p>

切换示例：

http://jsfiddle.net/djHTq/

于 2012-06-26T22:59:23.660 回答
4

把它擦干。

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

使用空格和正确的变量名（要传递给压缩器），这看起来像：

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。这允许您在未缩小的代码中使用有意义的变量名（如第二个示例）。minifier 将输出更像（但可能甚至比）第一个示例的代码。即使使用缩小器，也要继续思考它能做什么和不能做什么 - 如果您经常使用该 API，则创建一个指向像 document.getElementById 这样长的公共 API 的私有快捷方式可以帮助缩小。查看缩小的代码以确保您无法对其进行优化。
  • 如果可能的话，将你的 javascript 分成 .js 模块，这些模块与页面分开加载并且异步加载。
  • 管理所有静态资产（如 .js 模块），使它们具有较长的缓存超时 - 使用 Expires:http 标头。然后在它们实际更改时更改它们的 URL。这样，客户端可以无限期地缓存它们，直到您更改它们，然后客户端将立即获取新版本。
  • 将离散模块放在函数包装器中，这样您的变量就不会与其他代码片段冲突——无论是您自己的还是第三方模块。如果要公开变量，请明确执行：window.pubvar =
于 2012-06-26T23:01:00.633 回答
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.
于 2012-06-26T23:03:46.120 回答
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";};
})();
于 2012-06-26T23:01:57.813 回答
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 = ...
于 2012-06-26T23:02:59.183 回答