缩小显示/隐藏
Making a show/hide smaller
如何使这段代码更小?也许是一个切换,但人们说这在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 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。 这允许您在未缩小的代码中使用有意义的变量名称(如第二个示例)。 简化器将输出的代码更像(但可能比第一个示例更好)。 即使使用缩小器,也要继续思考它能做什么和不能做什么 - 如果您经常使用该 API,创建长公共 API 的私有快捷方式(如 document.getElementById)可以帮助缩小。 查看缩小的代码,以确保没有可以优化它的方法。
- 将您的 javascript 分成 .js 个模块,这些模块与页面分开加载,如果可能的话,可以不和谐地加载。
- 管理所有静态资产(如.js模块),使它们具有较长的缓存超时 - 使用
Expires:
http 标头。 然后在实际更改时更改其 URL。 这样,客户端可以无限期地缓存它们,直到您更改它们,然后客户端将立即获取新版本。 - 将离散模块放在函数包装器中,这样您的变量就不会与其他代码段(您自己的或第三方模块)冲突。 如果要公开变量,请显式执行:
window.pubvar =
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/
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.
避免污染全局范围:
(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 = ...
相关文章:
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- 数据表-隐藏/显示列
- $scope变量,ng隐藏/显示
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- JQuery隐藏/显示无法正常工作
- 隐藏/显示下面的分区根据是否选择某个选项进行选择
- 使用类而不是id在JavaScript中隐藏显示
- 我想隐藏/显示我的SVG元素,同时在anguarJS中使用它
- 隐藏/显示图像
- Javascript 中的表 - 隐藏/显示列
- 仅使用Javascript隐藏/显示元素,而不会弄乱DOM
- 隐藏/显示 js 代码不会在 IE8 或更低版本上运行
- Magento:根据所选国家/地区隐藏/显示输入字段
- 货到付款选择隐藏/显示付款方式
- "隐藏/显示”;元素和更改按钮背景图像
- Bootstrap Collapse.js切换菜单的隐藏/显示
- 如何隐藏/显示<面板>使用jquery
- 在php中隐藏/显示切换回声结果
- 如何使用jquery使2个按钮切换css,而只使用1个按钮.不显示隐藏/显示
- JQuery隐藏/显示不起作用