使用jQuery的9个误区

千万别忘记了使用最新的版本哦,毕竟每个版本更新肯定会在功能或性能上有所提升,或者修复了几个Bug,但有时惰性让人不想再去研究新版本的变化,因此,提醒你别忘记了在新项目用新的一定比旧版本要好。

AD:

jQuery是如此容易使用以至于我们有时候忘记了CSS的存在。我们在使用CSS时,几乎不去考虑性能,因为它已经是快得不值得再 去做什么优化上的努力。但现实世界中,JQuery会导致令开发人员发疯的性能问题。有时你会毫无知觉地就损失那么几毫秒。我们也很容易忘记的一些功能并 继续使用一些旧的(和不那么好的)的功能。以下是使用jQuery过程容易犯的9个错误,看看是不是你也曾遇到过?

1.不使用最新的版本

你看看你的机器是不是最新的?可能你不会把已经做好的网站再去更新一把,毕竟这个工作量可能没 人给你付费,但新的开发项目呢?千万别忘记了使用最新的版本哦,毕竟每个版本更新肯定会在功能或性能上有所提升,或者修复了几个Bug,但有时惰性让人不 想再去研究新版本的变化,因此,提醒你别忘记了在新项目用新的一定比旧版本要好。

2.不使用CDN-hosted的jQuery

很多人喜欢Download到自己的服务器上,然后调用。似乎潜意识里文件放在自己手里比较有安全感。但大部分时候,除非你特别牛,自己的服务器比 不过CDN服务器。如果流量小,可能没有什么影响,但如果流量一旦大了,性能方面的影响就非常突出了,这时,你完全可以考虑CDN服务器嘛,比如 google的Copy,这对于网站的性能有很大的帮助!

你只需要调用时采用如下:

  1. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

3.使用了CDN-hosted版本但没有备份措施

尽管我们相信Google很牛逼,不会出问题,但别忘记了你在天朝,一切皆有可能!因此,在html代码中加上本地服务器版本的容灾计划还是很有必要的,也非常简单:

  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  2. <script>window.jQuery || document.write(‘<script src="js/libs/jquery-1.7.2.min.js"><\/script>‘)</script>

4. 忘记链式写法

我们在进行一些普通操作时,如果多使用链式操作方式,可以提高性能,不用多次加载元素。例如

  1. $(“#mydiv”).hide();
  2. $(“#mydiv”).css(“padding-left”, “50px”);
  3. JQuery会获取元素2次
  4. $(“#mydiv”).hide().css(“padding-left”, “50px”);

一次搞定,有时候链式写法带来的性能改善是相当可观的哦

5.忘记缓存

这是跟性能相关的重要提示:别忘记缓存!如果页面中调用了某个元素至少2次,你就应该考虑缓存了。通过一个变量就可以在JQuery中缓存选择器。 当第二次使用该选择器时,只需引用该变量即可。这样做的好处就是jQuery不用再次遍历搜索整个DOM树去寻找你选择的元素。例如

  1. var $myMxria = $(“#mydiv”).hide();
  2. //......
  3. $myMxria.show();

6.干嘛不使用原始的JS?

用惯了$,大家就基本忽略document.getElementById了,但不得不说,滥用$也是不对的,为什么呢?如果只是纯粹的属性修改, 使用原始的javascript性能更好,完全没有使用jQuery对象。例如下面的例子中,浏览器还是会将jQuery对象转化为DOM节点进行操作。

  1. $mydiv[0].setAttribute(‘class‘, ‘awesome‘);  //这种写法有点性能上不划算。

7.未作检查的滥用插件

如今,JQuery流行起来也带来无数插件,精彩的、雷人的各种插件很多。我们很喜欢追随潮流,用些时髦玩意儿。但事实上,很多插件需要我们认真评估,看看到底是不是适合你的项目,或者说你真的需要吗?有没有考虑以下因素呢?

文件大小:超过10k的大小就得反复考虑一下哦

性能评估:图个方便不在乎性能?真的吗?

跨浏览器支持: 看看你的客户在用什么浏览器,别忘记了古老的IE6可是依然风采依旧哦

移动支持: 确认插件是可以在Mobile环境下运作正常的

8 不用jQuery

不用不行吗?干嘛一定要用呢?很多时候我们可能根本没有想过这个问题,首先想到的可能是用jquey好像很容易实现啊!这个误区真的很普遍,你有一把快刀砍到底的习惯吗?

9 使用jQuery干服务器端的活

JQuery太好了,太强大了,似乎一切都可以在前端搞定!于是,我们又会进入一个误区:类似有效性检查和数据验证的活,忽略了在服务端的重要性。 很多业务逻辑能在前端处理的就一古脑在前端处理,过犹不及的悲剧就此发生!千万要记住,前端浏览器里啥事都可能发生!!!禁用JS、某个不兼容问题、伪造 数据、攻击行为,这些都不是开发者能100%掌控到的,所以,服务端的活千万别因为jQuery的强大而放松警惕!

以上供参考,看看你有无走进误区?

原文链接: http://webdesignledger.com/tips/9-jquery-mistakes-you-shouldnt-commit

时间: 2024-11-02 23:30:30

使用jQuery的9个误区的相关文章

JQuery html()方法使用一些误区。

最近我在处理一个比较复杂的DOM控制的业务的时候发现html()这个方法的一些领我有些不解的地方. 1.html() 获取的是第一个匹配的元素的内容,不包括它自己. 2.如果需要获取包括元素自己本身的html的话,请使用prop("outerHTML"),如: $("div").prop("outerHTML"); //这个的返回值会包含div自己本身以及以内的所有html代码. 3.假如你使用了一个很复杂的DOM操作,例如使用了clone(),

金华网络公司:微信小程序的8个误区

小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量.这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有.但四处传的消息很多是失真的,废话不说,先列 ... 作者:金华腾云科技(钟先生18606796001) 小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列出8个多数人都搞错的问题: 1.小程序是H

jQuery插件开发详细教程

扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 一.入门 编写一个jQuery插件开始于给jQuery.fn加入??新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn.myPlugin = function() { //你自己的插件代码 }; 用户非常喜欢的$符号哪里去了? 它仍然存在,但是,为了避免和其他JavaScript库冲突,我们最好将jQuery传递给一个自我执行的封闭

jquery获取select选中的值并对另一个select禁用启用

误区: 一直以为jQuery获取select中option被选中的文本值,是这样写的: $("#s").text();  //获取所有option的文本值 实际上应该这样: $("#s option:selected").text();  //获取选中的option的文本值 获取select中option的被选中的value值, $("#s").val(); $("#s option:selected").val(); js获

web前端的学习误区

web前端的学习误区 网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便. 入门快.见效快让我们在不知不觉中已经深深爱上了网页制作.此时,很多人会陷入一个误区,那就是既然借助这么帅的IDE,通过鼠标点击菜单就可以快速方便地制作网页. 那么我们为什么还要去学习html.CSS.JavaScrpt.jQuery等这些苦逼的代码呢?这不是舍简求繁吗? 但

js&amp;jquery跨域详解jsonp,jquery并发大量请求丢失回调bug

URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a.com/a.js https://www.a.com/b.js 同一域名,不

jQuery插件开发入门

Require.js中使用jQuery 插件请查看http://www.css88.com/archives/4826 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入??新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn.myPlugin =function(){ //你自己的插件代码 }; 用户非常喜欢的$符号哪里去

JQuery学习使用笔记 -- JQuery插件开发

内容转载自 http://www.css88.com/archives/4821 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入??新的功能属性,此处添加的对象属性的名称就是你插件的名称 jQuery.fn.myPlugin = function(){ //你自己的插件代码 }; 用户非常喜欢的$符号哪里去了? 它仍然存在,但是,为了避免和其他

《jQuery风暴》第2章 必须知道的JavaScript知识

第2章 必须知道的JavaScript知识 JavaScript是jQuery应用的基础,掌握JavaScript这门语言是使用jQuery的基础条件.本章不会全面细致的讲解JavaScript的全部, 而是讲解其精髓,这些知识可以提升大家的JavaScript内功.切忌,要修炼上乘的武功,必须要有深厚的内功基础,否则只可学到其招式而发挥不了功力.JavaScript实际上包括三部分: w   ECMAScript 描述了该语言的语法和基本对象. w   DOM 描述了处理网页内容的方法和接口.