Nes*_*Dan 8 javascript jquery coding-style
我已经做了一点JavaScript(好吧,更像是jQuery)一段时间了,我一直困惑的一件事就是我应该把我的脚本放在<head>标签或<body>标签中.
如果有人能澄清这个问题,那就太好了.应该去哪里的一个例子是完美的.
你提到了三个地方:
在标签中;
在HTML中; 和
在外部文件中.
让我解决其中的每一个问题.
最佳实践是在一个或多个外部文件中使用通用 Javascript,并且文件越少越好,因为加载的每个JS文件都会阻止加载页面,直到加载JS文件.
"共同"这个词非常重要.这意味着您不希望将特定于页面的Javascript代码放在该外部文件中以用于缓存原因.假设您有一个包含1000页的网站.每个页面都有特定于它的JS代码.这可能是1000个不同的文件,或者是一个执行大量不必要代码的非常大的文件(例如,查找不在该特定页面上但在999个其中一个上的ID).这些结果都不好.
第一个给你很少的缓存提升.第二个可能有可怕的页面加载时间.
所以你要做的就是将所有常用函数放在一个JS文件中,而JS文件只包含函数.在每个HTML页面中,您可以调用该页面所需的JS函数.
理想情况下,您的JS文件也可以有效地缓存.最佳做法是使用远期期货HTTP Expires标头和版本号,这样JS文件只会被每个浏览器加载一次,无论他们访问多少页面.更改文件时,您更改版本号并强制重新加载.使用mtime(JS文件的最后修改时间)是一种常见方案,给出如下URL:
<script type="text/javascript" src="/js/script.js?1233454455"></script>
哪个mtime是自动生成的.您的Web服务器配置为使用适当的Expires标头提供JS文件.
因此,尽可能以最好的方式混合外部文件和页内脚本(imho).
你提到的最后一个地方是标签.这在某种程度上取决于您使用的JS库和框架.我是jQuery的忠实粉丝,它鼓励不引人注目的Javascript.这意味着你(希望)根本不会在你的标记中添加任何Javascript .所以代替:
<a href="#" onclick="doStuff(); return false;">do stuff</a>
你做:
<a href="#" id="dostuff">do stuff</a>
使用Javascript:
$(function() {
$("#dostuff").click(doStuff);
});
| 归档时间： |
|
| 查看次数： |
1116 次 |
| 最近记录： |