源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

改善你的jQuery的25个步骤 千倍级效率提升

  • 时间:2021-12-26 14:09 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:改善你的jQuery的25个步骤 千倍级效率提升
1. 从Google Code加载jQuery[b] [/b]Google Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势。它[b]节省了你服务器上的带宽[/b],能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是,如果用户访问那些发布在Google Code上的站点后它会被[b]缓存下来。[/b] 这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本,而这些很容易做到,引入: <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>  2. 使用备忘单[b] [/b]不仅仅是jQuery,很多编程语言也有类似的备忘单,在一张A4的纸上就可以很容易看到每个函数的用法。幸运的是已经有好心的家伙把jQuery的备忘单做得很完善了: [url=http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/]http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/[/url] [url=http://colorcharge.com/jquery/]http://colorcharge.com/jquery/[/url] 3. 整合所有的脚本并缩减它们[b] [/b]不错,这是JavaScript的一个常见技巧。可是一个使用了jQuery的大项目可能使用了很多相关的jQuery插件(本站就使用了easing,localScroll,lightbox,preload),因此它通常是适用的。浏览器不能同时加载JS脚本(大多数情况下),这意味着如果你同一时间加载很多脚本的话,将减缓页面的加载速度。因此,如果每个页面都要加载这些脚本,你应该考虑在发布之前将这些脚本整合成一个稍大的JS脚本。一些jQuery插件已经最小化了,但是你应该打包你的JS脚本和那些没有缩减过的脚本,这仅需要几秒的时间就可以完成。 就个人而言,我推荐[url=http://dean.edwards.name/packer/]Packer by Dean Edwards[/url] 4. 使用Firebug出色的控制台日志工具[b] [/b]如果你还没有安装Firebug,那么你真的应该把它装上。除了许多其它有用的特性(比如允许你检查http传输情况、发现你的CSS问题),它也有极好的日志命令,允许你很容易调试JS脚本。 这里有Firebug所有[url=http://getfirebug.com/console.html]特性的详细说明[/url]。 我最喜欢的特性有”[url=http://console.info/]console.info[/url]“,通过它你可以把信息和变量值输出到控制台上,而不必使用alert;”console.time”则允许你在一组代码上设置定时器,从而计算出JS脚本运行所花费的时间。这一切都很容易做到:
[url=http://plugins.jquery.com/project/color]colors and background colors[/url] 12. 了解事件代理[b] [/b]与之前相比,jQuery能够更容易得向DOM元素无缝添加事件。这是很棒的特性,然而向元素添加太多的事件是效率很差的。在很多情况下事件代理允许你用少量的事件实现同样的目的。最好的解释方法就是使用实例:
[url=http://docs.jquery.com/Internals]jQuery internals[/url] [b]15. 写你自己的选择器 [/b]jQuery有许多内置的选择器用以通过ID、class、标签、属性以及其他元素进行选择操作。然而当你需要基于其它一些内容进行元素选择而jQuery却没有提供该选择器时,你能做什么呢? 嗯,一个解决方案可能是从一开始就给元素添加上classes,从而利用这些classes进行元素的选择操作。然而这被证明很难对jQuery扩展出新的选择器。 最好的解释方法就是使用实例:
[url=http://docs.jquery.com/Utilities]http://docs.jquery.com/Utilities[/url] 尤其,提供一些常见的数组函数的浏览器支持是一个补丁。jQuery提供了迭代、过滤、克隆、合并和从数组中去除重复项的方法。 其他常用的函数包括得到下拉框中的选择项。用传统的JavaScript方法,你就必须使用getElementById得到<select>元素,然后通过遍历它的子元素找出被选中的元素。而jQuery提供了相当容易使用的方法:
[url=http://www.learningjquery.com/2008/10/1-awesome-way-to-avoid-the-not-so-excellent-flash-of-amazing-unstyled-content]他的所有文章[/url]。 [b]24. 返回'false'以防止默认行为 [/b]这是很明显的,也可能不是。如果你有这样的习惯:
[url=#] 然后添加上如下的事件处理: 你在长页面使用上述方法时,它可能可以正常工作。有些时候你会注意到在点击链接后锚点会跳转到页面上部。 所有你要做的就是阻止它的默认行为,或者实际上你可以把”return false;”添加到任何事件的默认行为上。像这样:
[u]复制代码[/u] 代码如下:
$('popup').click(function(){ // Launch popup code return false; });
25. ready事件的简写[b] [/b]一个小技巧但是通过使用$(document).ready()的简写,你可以少输入几个字符。 取代:
[u]复制代码[/u] 代码如下:
$(document).ready(function (){ // your code });
你可以简写成:
[u]复制代码[/u] 代码如下:
$(function (){ // your code });
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部