1. 程式人生 > >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側重樣式操作,動畫效果等,則會更加高效率的完成業務需求。