DRY it up.
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 =