web前端入坑第四篇：你還在用 jQuery？

大媽都這麼努力，我們有幾個人回家還看書的？

再說這個話題之前，我們先來掃盲普及一下 【jquery】 到底是什麼以及它火爆將近十年的重要原因。

【 重新認識 - Jquery 是什麼 】

jQuery簡寫 jq ，漢語 雞 課 外 瑞，具體來說，他是一個JS庫 ，並不是人人常說的框架，庫不能稱之為框架，框架是解決方案的輪子、架子，庫一般來說是一個語言濃縮和優化過後的超集或者工具包，其實ES6 更像是ES5的超集和庫。

jQuery的誕生背景

背景：Query 查詢的意思, jQuery就是用javascript更加方便的查詢和控制頁面控制元件。由善於思考並且很懶的美國佬 John Resig 創造並維護。

jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。它封裝JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，優化HTML文件操作、事件處理、動畫設計和Ajax互動。幾乎無所不能，而且想要多懶的寫法就可以多懶的寫法，因為它支援鏈式寫法，而且對css樣式支援接近完美。

Jquery 的意義和作用

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴充套件；擁有便捷的外掛擴充套件機制和豐富的外掛。jQuery相容各種主流瀏覽器 或者說所有的瀏覽器，它的其中一大目的，就是為了對付魚龍混雜的相容問題，所以對各個瀏覽器都可以輕鬆應對，而不用管原生js是否支援。

• 直觀對比 ：獲取一個dom節點

//可愛的 javascript ：document.getElementByID("id")；//牛鼻的 jQuery： $("#id")；

• 直觀對比 ：操作css樣式

//可愛的 javascript ：好大一串我去document.getElementById("id").style.color="#ff0000"；document.getElementById("id").style.background="#000000"；document.getElementById("id").style.display="block"；//牛鼻的 jQuery：就像寫css一樣寫就好了 $("#id").css({  "color"
 
:"#ff0000",  "background":"#000000",  "display":"block"  });

• 直觀對比 ：獲取一個元素的屬性

//可愛的 javascript ：獲取，設定document.getElementByID("id").getAttribute("href")；document.getElementByID("id").setAttribute("href",，"www.xx.com")；//牛鼻的 jQuery： $("#id").attr("href","www.xx.com");

Jquery 的好處和缺點

• 好處：不言而喻，經過上邊的對比得知：它優秀的設計思想和實用容記的語法 都讓他立於不敗之地將近10餘年。 它是2006年一經推出，就火速得到各界的好評和世界各大大量專案的深度應用，至今網路70%的絢麗效果和外掛都是它的功勞，可見普及度和好用程度多麼親民。

以下幾點摘自 某百科（反正大家都知道 大同小異，不多做介紹）

1、快速獲取文件元素

jQuery的選擇機制構建於Css的選擇器，它提供了快速查詢DOM文件中元素的能力，而且大大強化了JavaScript中獲取頁面元素的方式。

2、提供漂亮的頁面動態效果

jQuery中內建了一系列的動畫效果，可以開發出非常漂亮的網頁，許多網站都使用jQuery的內建的效果，比如淡入淡出、元素移除等動態特效。

3、建立AJAX無重新整理網頁

AJAX是非同步的JavaScript和ML的簡稱，可以開發出非常靈敏無重新整理的網頁，特別是開發伺服器端網頁時，比如PHP網站，需要往返地與伺服器通訊，如果不使用AJAX，每次資料更新不得不重新重新整理網頁，而使用AJAX特效後，可以對頁面進行區域性重新整理，提供動態的效果。

4、提供對JavaScript語言的增強

jQuery提供了對基本JavaScript結構的增強，比如元素迭代和陣列處理等操作。增強的事件處理jQuery提供了各種頁面事件，它可以避免程式設計師在HTML中新增太事件處理程式碼，最重要的是，它的事件處理器消除了各種瀏覽器相容性問題。

5、更改網頁內容

jQuery可以修改網頁中的內容，比如更改網頁的文字、插入或者翻轉網頁影象，jQuery簡化了原本使用JavaScript程式碼需要處理的方式。

• 缺點：極度依賴dom節點，要引入第三方jquery檔案額，而且是一大坨。版本參差不齊，雖說解決了瀏覽器之間的相容問題，但卻出現了jquery版本之間的用法衝突等。

1、現在的jQuery太臃腫了，有很多用不到的功能。所以現在有了很多精簡jQuery的專案。如 zepto.js

2、對jQuery的過度依賴，目前大部分前端和後端人員極度依賴jQuery的寫法和應用，以至於離開jQuery壓根不會寫JS，在一定程度上變成了一種悲哀。

3、全DOM操作，鉤子往往會依賴標籤，如果依賴jQuery來搭建頁面的話（比如後臺輸出json，然後jQuery loop一個列表出來），維護上會有困難。一旦改動改頁面結構，很多依賴標籤的選擇器，一改起來js那塊就得跟著大改，或者改動json 資料格式，dom也得跟著改動，改版是一件萬分痛苦的事。也就是解耦性太緊了。是基於事件驅動不是基於資料驅動，資料結構一旦變化，view層就要重新維護。

4、避免不了大量手拼html字串（標準dom方法除了innerHTML這一歷史遺蹟，是完全沒有直接插html的api介面的），從根本上解決不了XSS攻擊隱患。這確實也是jQuery的一個缺點。

那麼，我們簡單回顧了一下，讓眾多程式設計師跨過一個時代的jQuery神器，那麼我們這系列文章的真正目的是什麼呢？如標題所言：你還在用 jQuery? 我是在反問你啊 大胸弟，大胸妹 你們有沒有想過一個問題，現在前端到底是一個什麼樣的時代呢？

前面我們說了 會用jQuery 你還不叫前端好嗎？大部分後端都比你玩的6啊，因為好多效果和應用各種複製查詢就可以啦，也導致各種可笑的程式碼層出不窮，魚目混珠。

jQuery過時了嗎

這是個偽命題，但卻是個很親民和討論意義的話題。過時：如果是指被用得少了，或者大部分人已經在討論是不是過時了，那肯定是在過時。

我的觀點是：第一選擇已近過時，但開發思想永為經典。雖然jQuery官方不願承認，而且一直在跟隨潮流做很重要的更新，甚至有了mvvm概念的框架用法加入其中還出了jquery mobile 等移動端定製庫，不過很遺憾，越來越多的專案拋棄了jquery，因為它的歷史使命已經完成了。

但不會完全過時，它的思想是影響整整一代的，現在就算 angularjs、 vuejs、reactjs在實際開發中，還是少不了dom操作，畢竟你怎麼可能完全脫離dom呢？

作為一個庫，jQuery能在計算機軟體領域存在十餘年，絕非偶然。它的選擇符、易用的API、跨瀏覽器相容、DOM元素批處理、外掛提供的程式碼複用等等，個個特性都有強大的理論支援和實際場景的良好應用。

時代在進步，思想在進步，web前端發展這麼多年也終於有了大範圍的變化。現在的vuejs、angularjs、react大行其道，而且各種教材刺激眼球，還有各種大神的安利文，那麼跟著我來看看這種型別的框架是怎樣的一個東西。

下一篇： 

•  

  什麼是MVVM？[MVVM] 是Model-View-ViewModel的縮寫。

   
 
•  

  MV*系列框架的基礎原理

   
 
•  

  和jQuery的對比優點

   
 
•  

  Vue、Angular、react 的選擇和應用場景 敬請期待

   

原創不易，請用實際行動支援我利用更多的個人時間和精力繼續更下去，吹下去，不做伸手黨，明說：我就是要打賞。

掃描長按二維碼，關注我的公眾號