使用jQuery的9個(gè)誤區(qū)
jQuery是如此容易使用以至于我們有時(shí)候忘記了CSS的存在。我們?cè)谑褂肅SS時(shí)，幾乎不去考慮性能，因?yàn)樗呀?jīng)是快得不值得再去做什么優(yōu)化上的努力。但現(xiàn)實(shí)世界中，JQuery會(huì)導(dǎo)致令開(kāi)發(fā)人員發(fā)瘋的性能問(wèn)題。有時(shí)你會(huì)毫無(wú)知覺(jué)地就損失那么幾毫秒。我們也很容易忘記的一些功能并繼續(xù)使用一些舊的（和不那么好的）的功能。以下是使用jQuery過(guò)程容易犯的9個(gè)錯(cuò)誤，看看是不是你也曾遇到過(guò)？
1.不使用最新的版本
你看看你的機(jī)器是不是最新的？可能你不會(huì)把已經(jīng)做好的網(wǎng)站再去更新一把，畢竟這個(gè)工作量可能沒(méi)人給你付費(fèi)，但新的開(kāi)發(fā)項(xiàng)目呢？千萬(wàn)別忘記了使用最新的版本哦，畢竟每個(gè)版本更新肯定會(huì)在功能或性能上有所提升，或者修復(fù)了幾個(gè)Bug，但有時(shí)惰性讓人不想再去研究新版本的變化，因此，提醒你別忘記了在新項(xiàng)目用新的一定比舊版本要好。
2.不使用CDN-hosted的jQuery
很多人喜歡Download到自己的服務(wù)器上，然后調(diào)用。似乎潛意識(shí)里文件放在自己手里比較有安全感。但大部分時(shí)候，除非你特別牛，自己的服務(wù)器比不過(guò)CDN服務(wù)器。如果流量小，可能沒(méi)有什么影響，但如果流量一旦大了，性能方面的影響就非常突出了，這時(shí)，你完全可以考慮CDN服務(wù)器嘛，比如google的Copy，這對(duì)于網(wǎng)站的性能有很大的幫助!
你只需要調(diào)用時(shí)采用如下：
- <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
3.使用了CDN-hosted版本但沒(méi)有備份措施
盡管我們相信Google很牛逼，不會(huì)出問(wèn)題，但別忘記了你在天朝，一切皆有可能！因此，在html代碼中加上本地服務(wù)器版本的容災(zāi)計(jì)劃還是很有必要的，也非常簡(jiǎn)單：
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
4. 忘記鏈?zhǔn)綄懛?/strong>
我們?cè)谶M(jìn)行一些普通操作時(shí)，如果多使用鏈?zhǔn)讲僮鞣绞?，可以提高性能，不用多次加載元素。例如
- $(“#mydiv”).hide();
- $(“#mydiv”).css(“padding-left”, “50px”);
- JQuery會(huì)獲取元素2次
- $(“#mydiv”).hide().css(“padding-left”, “50px”);
一次搞定，有時(shí)候鏈?zhǔn)綄懛◣?lái)的性能改善是相當(dāng)可觀的哦
5.忘記緩存
這是跟性能相關(guān)的重要提示：別忘記緩存！如果頁(yè)面中調(diào)用了某個(gè)元素至少2次，你就應(yīng)該考慮緩存了。通過(guò)一個(gè)變量就可以在JQuery中緩存選擇器。當(dāng)?shù)诙问褂迷撨x擇器時(shí)，只需引用該變量即可。這樣做的好處就是jQuery不用再次遍歷搜索整個(gè)DOM樹(shù)去尋找你選擇的元素。例如
- var $myMxria = $(“#mydiv”).hide();
- //......
- $myMxria.show();
6.干嘛不使用原始的JS？
用慣了$，大家就基本忽略document.getElementById了，但不得不說(shuō)，濫用$也是不對(duì)的，為什么呢？如果只是純粹的屬性修改，使用原始的javascript性能更好，完全沒(méi)有使用jQuery對(duì)象。例如下面的例子中，瀏覽器還是會(huì)將jQuery對(duì)象轉(zhuǎn)化為DOM節(jié)點(diǎn)進(jìn)行操作。
- $mydiv[0].setAttribute('class', 'awesome'); //這種寫法有點(diǎn)性能上不劃算。
7.未作檢查的濫用插件
如今，JQuery流行起來(lái)也帶來(lái)無(wú)數(shù)插件，精彩的、雷人的各種插件很多。我們很喜歡追隨潮流，用些時(shí)髦玩意兒。但事實(shí)上，很多插件需要我們認(rèn)真評(píng)估，看看到底是不是適合你的項(xiàng)目，或者說(shuō)你真的需要嗎？有沒(méi)有考慮以下因素呢？
文件大?。撼^(guò)10k的大小就得反復(fù)考慮一下哦
性能評(píng)估：圖個(gè)方便不在乎性能？真的嗎？
跨瀏覽器支持： 看看你的客戶在用什么瀏覽器，別忘記了古老的IE6可是依然風(fēng)采依舊哦
移動(dòng)支持： 確認(rèn)插件是可以在Mobile環(huán)境下運(yùn)作正常的
8 不用jQuery
不用不行嗎？干嘛一定要用呢？很多時(shí)候我們可能根本沒(méi)有想過(guò)這個(gè)問(wèn)題，首先想到的可能是用jquey好像很容易實(shí)現(xiàn)啊！這個(gè)誤區(qū)真的很普遍，你有一把快刀砍到底的習(xí)慣嗎？
9 使用jQuery干服務(wù)器端的活
JQuery太好了，太強(qiáng)大了，似乎一切都可以在前端搞定！于是，我們又會(huì)進(jìn)入一個(gè)誤區(qū)：類似有效性檢查和數(shù)據(jù)驗(yàn)證的活，忽略了在服務(wù)端的重要性。很多業(yè)務(wù)邏輯能在前端處理的就一古腦在前端處理，過(guò)猶不及的悲劇就此發(fā)生！千萬(wàn)要記住，前端瀏覽器里啥事都可能發(fā)生?。?！禁用JS、某個(gè)不兼容問(wèn)題、偽造數(shù)據(jù)、攻擊行為，這些都不是開(kāi)發(fā)者能100%掌控到的，所以，服務(wù)端的活千萬(wàn)別因?yàn)閖Query的強(qiáng)大而放松警惕！
以上供參考，看看你有無(wú)走進(jìn)誤區(qū)?
原文鏈接： http://webdesignledger.com/tips/9-jquery-mistakes-you-shouldnt-commit
