區(qū)別:1、JQuery是一個(gè)JS庫(kù),AngularJS是一個(gè)JS框架;2、Jquery與模型無(wú)關(guān),Angular基于MVC模型;3、Jquery沒有雙向綁定功能,Angular有;4、jQuery適合回合式,Angular適合單頁(yè)應(yīng)用等。
本教程操作環(huán)境:windows7系統(tǒng)、jquery1.10.0&&Angular6版本、Dell G3電腦。
AngularJS與JQuery之間的區(qū)別:
1、JQuery是一個(gè)JavaScript庫(kù),用于DOM操作;AngularJS是一個(gè)JavaScript框架。
2、Jquery與模型無(wú)關(guān); Angular是基于MVC,用于創(chuàng)建SPA(單頁(yè)面應(yīng)用程序)。
3、Jquery沒有雙向綁定功能;而Angular具有路由,指令,雙向數(shù)據(jù)綁定,模型,依賴注入,單元測(cè)試等關(guān)鍵功能。
4、開發(fā)模式存在差異
AngularJS與jQuery在web應(yīng)用開發(fā)模式上有著完全不同的思路:
-
jQuery: 通過(guò)顯示操作瀏覽器中的DOM來(lái)創(chuàng)建應(yīng)用程序(適合回合式應(yīng)用),對(duì)于大型及復(fù)雜項(xiàng) 目,不利于全面的單元測(cè)試;
-
AngularJS:將瀏覽器吸收為應(yīng)用程序的基礎(chǔ)(適合單頁(yè)應(yīng)用),擅長(zhǎng)大型及復(fù)雜項(xiàng)目,便于全面的單元測(cè)試。
那什么是回合式應(yīng)用和單頁(yè)應(yīng)用呢?
回合式應(yīng)用(Round-Trip Application)
在Web應(yīng)用發(fā)展剛起步時(shí),很多開發(fā)者都用的是回合式應(yīng)用。
相較于單頁(yè)應(yīng)用,它就相當(dāng)于多頁(yè)應(yīng)用吧。
-
優(yōu)點(diǎn):它對(duì)瀏覽器的要求少,能保證最大限度地對(duì)客戶端的支持;
-
缺點(diǎn):用戶在下一個(gè)HTML文檔唄請(qǐng)求并加載之前必須等待,這個(gè)期間,它需要大型服務(wù)器端,也就是后端服務(wù)器來(lái)處理所有請(qǐng)求并管理所有的應(yīng)用程序狀態(tài),占用了許多帶寬(這時(shí)因?yàn)槊總€(gè)HTML文檔必須是自包含的,也就是每次更新頁(yè)面,都要把HTML文檔中更新的和未更新的內(nèi)容完整的發(fā)送給服務(wù)器端,這就導(dǎo)致從服務(wù)器產(chǎn)生的每個(gè)響應(yīng)中包含許多相同的內(nèi)容)。
單頁(yè)應(yīng)用 (Single-Page Application)
相較于回合式應(yīng)用,單頁(yè)應(yīng)用就是另辟蹊徑了。整個(gè)應(yīng)用程序只有一個(gè)初始的HTML文檔被發(fā)送給瀏覽器,用戶交互所產(chǎn)生的Ajax(異步)請(qǐng)求只會(huì)請(qǐng)求較小的HTML片段,或者要插入到已有的顯示給用戶元素中的數(shù)據(jù)。
初始的HTML文檔不會(huì)被再次加載或者替換,在Ajax請(qǐng)求被異步執(zhí)行時(shí),用戶還可以繼續(xù)與已有的HTML進(jìn)行交互。
-
優(yōu)點(diǎn): 減少向后端請(qǐng)求的數(shù)據(jù)量,減少了帶寬,提升了web應(yīng)用的性能。
-
缺點(diǎn):對(duì)瀏覽器的性能變高,不是所有瀏覽器都有兼容某些特性。