程序员人生 网站导航

有效提高 jQuery 代码效率的25个技巧

栏目:jquery时间:2014-06-15 20:58:57

jQuery是一款非常优秀的JavaScript框架,关于它的更多介绍请点这里。今天小编整理了些提高jQuery效率的小技巧发给大家,希望对各位朋友有所帮助。

1. 从Google Code加载jQuery

Google Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽,能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是,如果用户访问那些发布在Google Code上的站点后它会被缓存下来。

这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本,而这些很容易做到:

<script src="<SPAN><A href="http://www.google.com/jsapi">http://www.google.com/jsapi</A>"></script>

<script type="text/javascript">

// Load jQuery

google.load("jquery", "1.2.6");

google.setOnLoadCallback(function() {

// Your code goes here.

});

</script>

<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

// Load jQuery

google.load("jquery", "1.2.6");

google.setOnLoadCallback(function() {

// Your code goes here.

});

</script>

或者,你能够直接引用JS:

script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

这里有详细的用法说明

2. 使用备忘单
不仅仅是jQuery,很多编程语言也有类似的备忘单,在一张A4的纸上就可以很容易看到每个函数的用法。幸运的是已经有好心的家伙把jQuery的备忘单做得很完善了:
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/

http://colorcharge.com/jquery/

【译注】
jQuery 1.3 Cheat Sheet

3. 整合所有的脚本并缩减它们

不错,这是JavaScript的一个常见技巧。可是一个使用了jQuery的大项目可能使用了很多相关的jQuery插件(本站就使用了easing,localScroll,lightbox,preload),因此它通常是适用的。浏览器不能同时加载JS脚本(大多数情况下),这意味着如果你同一时间加载很多脚本的话,将减缓页面的加载速度。因此,如果每个页面都要加载这些脚本,你应该考虑在发布之前将这些脚本整合成一个稍大的JS脚本。一些jQuery插件已经最小化了,但是你应该打包你的JS脚本和那些没有缩减过的脚本,这仅需要几秒的时间就可以完成。

就个人而言,我推荐Packer by Dean Edwards

4. 使用Firebug出色的控制台日志工具
如果你还没有安装Firebug,那么你真的应该把它装上。除了许多其它有用的特性(比如允许你检查http传输情况、发现你的CSS问题),它也有极好的日志命令,允许你很容易调试JS脚本。
这里有Firebug所有特性的详细说明。
我最喜欢的特性有”console.info“,通过它你可以把信息和变量值输出到控制台上,而不必使用alert;”console.time”则允许你在一组代码上设置定时器,从而计算出JS脚本运行所花费的时间。这一切都很容易做到:

console.time('create list');

for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}

console.timeEnd('create list');

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐