jQuery與前端框架

想學好前端,推薦書籍,點擊這裏

jQuery是什麼?

具體來說,他是一個JS庫 ,並不是人人常說的框架,庫不能稱之爲框架,框架是解決方案的輪子、架子,庫一般來說是一個語言濃縮和優化過後的超集或者工具包,其實ES6 更像是ES5的超集和庫。

jQuery的核心特性可以總結爲:具有獨特的鏈式語法和短小清晰的多功能接口;具有高效靈活的css選擇器,並且可對CSS選擇器進行擴展;擁有便捷的插件擴展機制和豐富的插件。

jQuery兼容各種主流瀏覽器 或者說所有的瀏覽器,它的其中一大目的,就是爲了對付魚龍混雜的兼容問題,所以對各個瀏覽器都可以輕鬆應對,而不用管原生js是否支持。

1、快速獲取文檔元素,更改網頁內容

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

jQuery中內置了一系列的動畫效果,比如淡入淡出、元素移除等動態特效。

3、創建AJAX無刷新網頁

AJAX是異步的JavaScript和ML的簡稱,可以開發出非常靈敏無刷新的網頁,特別是開發服務器端網頁時,使用AJAX特效後,可以對頁面進行局部刷新,提供動態的效果。

4、提供對JavaScript語言的增強

jQuery提供了對基本JavaScript結構的增強,比如元素迭代和數組處理等操作。
增強的事件處理
jQuery提供了各種頁面事件,它可以避免程序員在HTML中添加太事件處理代碼,最重要的是,它的事件處理器消除了各種瀏覽器兼容性問題。

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的一個缺點。

ECMAScript

ECMAScript是一種由Ecma國際通過ECMA-262標準化的腳本程序設計語言。這種語言在萬維網上應用廣泛,它往往被稱爲JavaScriptJScript,所以它可以理解爲是javascript的一個標準,但實際上後兩者是ECMA-262標準的實現和擴展。

jQuery 與 Vue 對比 ->查看原文

jquery到vue或者說是到mvvm的轉變則是一個思想想的轉變,是將原有的直接操作dom的思想轉變到操作數據上去。

jQuery是使用選擇器($)選取DOM對象,對其進行賦值、取值、事件綁定等操作,其實和原生的HTML的區別只在於可以更方便的選取和操作DOM對象,而數據和界面是在一起的。比如需要獲取label標籤的內容:$("lable").val();,它還是依賴DOM元素的值。 

Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象,可以說數據和View是分離的,他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。

舉例一:

列表添加一個元素,vue只需要向數據message裏面push一條數據即可完成添加一個li標籤的操作,而jquery則需要獲取dom元素節點,並對dom進行添加一個標籤的操作,如果dom結構特別複雜,或者添加的元素非常複雜,則代碼會變得非常複雜且閱讀性低。

舉例二:

控制按鈕的顯示隱藏,vue只需要控制屬性isShow的值爲true和false即可,而jquery則還是需要操作dom元素控制按鈕的顯示和隱藏。

適用場景:

vue適用的場景:複雜數據操作的後臺頁面,表單填寫頁面

jquery適用的場景:比如說一些html5的動畫頁面,一些需要js來操作頁面樣式的頁面

然而二者也是可以結合起來一起使用的,vue側重數據綁定,jquery側重樣式操作,動畫效果等,則會更加高效率的完成業務需求。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章