一、事件背景:
我最近開(kāi)源了一個(gè)個(gè)人耗時(shí)半年打造的富文本及一套適用于web后臺(tái)的ui框架,在gitee上受到網(wǎng)友們的關(guān)注,部分網(wǎng)友對(duì)我采用jquery的技術(shù)棧提出了質(zhì)疑??偨Y(jié)起來(lái):無(wú)非是jquery已經(jīng)落后,不久將死。甚至有少數(shù)網(wǎng)友很激進(jìn):非vue技術(shù)棧,你不應(yīng)該加入我這個(gè)群,不管你做得多好。對(duì)應(yīng)這個(gè)事情,首先我一般不反駁,因?yàn)槲覍?duì)vue,jquery有自己的應(yīng)用場(chǎng)景度量。但是對(duì)于這種不分場(chǎng)景應(yīng)用而盲目趕潮流的觀點(diǎn),我是持否定態(tài)度的。
為此我想有必要通過(guò)這篇文章,說(shuō)明一下:我為什么用jquery來(lái)寫vue和web后端ui框架,而不用vue。在文章開(kāi)始前,先貼一下我開(kāi)源的富文本:
gitee: https://gitee.com/kevin-huang/Bui-Editor-public
浮動(dòng)文本/圖片/視頻功能

繪制流程圖功能

移動(dòng)設(shè)備模擬功能

通過(guò)上述富文本的截圖,可以大概了解到這個(gè)富文本的功能很豐富,許多功能可以說(shuō)是全網(wǎng)富文本里面的only-one。這么復(fù)雜的應(yīng)用對(duì)技術(shù)棧的選擇很重要,良好適配的技術(shù)??梢栽谠O(shè)計(jì)上,編碼上給開(kāi)發(fā)者更大的自由度,同時(shí)可以避免很多繁雜的實(shí)現(xiàn),提升代碼質(zhì)量,降低后期的維護(hù),運(yùn)營(yíng)的成本。
二、我的觀點(diǎn):
1、vue技術(shù)棧適用于移動(dòng)端應(yīng)用開(kāi)發(fā),對(duì)于pc端web應(yīng)用,vue技術(shù)棧并不見(jiàn)得優(yōu)于傳統(tǒng)技術(shù)棧(相對(duì)于vue來(lái)說(shuō)是傳統(tǒng)的)。
2、jquery是目前dom操作的王者,除此無(wú)二,jquery和vue不可比較,他們各自擅長(zhǎng)的場(chǎng)景不一樣。
3、復(fù)雜應(yīng)用,原生JavaScript + jquery是比較好的技術(shù)棧組合,優(yōu)于vue技術(shù)棧。
三、jquery、vue技術(shù)棧誕生背景,擅長(zhǎng)場(chǎng)景說(shuō)明
jquery:
誕生背景
1、jquery誕生于2006年,它誕生的背景是瀏覽器的dom操作繁雜,各種瀏覽器api不統(tǒng)一。市場(chǎng)需要一個(gè)前端JavaScript庫(kù)解決dom操作的痛點(diǎn)。
2、jquery誕生的年代,移動(dòng)應(yīng)用還在萌芽,它的設(shè)計(jì)實(shí)現(xiàn)都是面向pc端的,當(dāng)時(shí)的前端技術(shù)范疇也還沒(méi)有mvvm(數(shù)據(jù)驅(qū)動(dòng))的思想,它為操作dom而生。
擅長(zhǎng)場(chǎng)景:
dom操作為主的場(chǎng)景,如富文本,流程設(shè)計(jì)器,這些應(yīng)用需要對(duì)dom進(jìn)行大量的操作,jquery最合適不過(guò)。
對(duì)于這種場(chǎng)景,vue的編程規(guī)范會(huì)造成設(shè)計(jì)實(shí)現(xiàn)上的束縛,其雙向綁定在這里也是多余的,完全沒(méi)有用武之地!
缺點(diǎn):
1、jquery沒(méi)有mvvm思想,不能解決移動(dòng)端帶寬、性能的痛點(diǎn)。
2、jquery沒(méi)法實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)開(kāi)發(fā),還需要開(kāi)發(fā)者編寫dom讀寫操作。
vue:
誕生背景
1、vue的誕生之前,已經(jīng)有了許多成熟的mvvm框架,如backbone、angular,他們都是在一些數(shù)據(jù)驅(qū)動(dòng)的需求場(chǎng)景中得到很好的應(yīng)用,但也并沒(méi)有像vue被開(kāi)發(fā)者如此著迷。
2、backbone、angular既然已經(jīng)有了數(shù)據(jù)驅(qū)動(dòng)的實(shí)現(xiàn),為何沒(méi)有像vue那樣火呢,因?yàn)樗麄円幢容^笨重,要么還沒(méi)有解決移動(dòng)端應(yīng)用的痛點(diǎn)(帶寬、性能)。
3、vue可以說(shuō)是為移動(dòng)應(yīng)用而生,輕量,其設(shè)計(jì)的虛擬dom解決移動(dòng)設(shè)備頻繁觸發(fā)瀏覽器刷新而引起的性能/電量問(wèn)題,其設(shè)計(jì)的單頁(yè)打包(webpack)模式,解決了跳轉(zhuǎn)需要網(wǎng)絡(luò)請(qǐng)求的帶寬痛點(diǎn)。
擅長(zhǎng)場(chǎng)景:
1、數(shù)據(jù)驅(qū)動(dòng)的雙向綁定場(chǎng)景,特別是表單讀寫,可以說(shuō)解放了表單讀寫對(duì)dom的操作編程。
2、移動(dòng)應(yīng)用場(chǎng)景,通過(guò)雙向綁定,虛擬dom、webpack打包,解決移動(dòng)端web應(yīng)用的設(shè)備性能/電量、帶寬痛點(diǎn)。
缺點(diǎn):
1、采用數(shù)據(jù)驅(qū)動(dòng),沒(méi)有靈活的dom操作,不適用于dom操作為主的應(yīng)用場(chǎng)景。
2、在復(fù)雜應(yīng)用中,大量的dom監(jiān)聽(tīng)、data狀態(tài)聯(lián)動(dòng)維護(hù)并不是一種好的機(jī)制。
3、webpack打包方式解決了移動(dòng)應(yīng)用的痛點(diǎn),但也帶來(lái)了發(fā)布后,難以跟蹤定位問(wèn)題,沒(méi)法即刻修改已經(jīng)在線頁(yè)面的缺點(diǎn)。
4、學(xué)習(xí)成本相對(duì)傳統(tǒng)技術(shù)棧高一些,對(duì)團(tuán)隊(duì)的前端知識(shí)要求也相對(duì)高一些。
四、vue應(yīng)用場(chǎng)景說(shuō)明
pc端web應(yīng)用場(chǎng)景
1、pc端沒(méi)有移動(dòng)端性能、帶寬的限制,采用vue技術(shù)棧,反而帶來(lái)了開(kāi)發(fā)環(huán)境繁雜、學(xué)習(xí)額外的非w3c規(guī)范的web知識(shí)、發(fā)布后難以定位跟蹤問(wèn)題、沒(méi)法即刻修改在線頁(yè)面這些缺點(diǎn)。
2、pc端的應(yīng)用,大多是普通的表單開(kāi)發(fā)應(yīng)用,除此之外基本都是展示類型的頁(yè)面,個(gè)人認(rèn)為除了表單的雙向綁定,監(jiān)控類ui的數(shù)據(jù)聯(lián)動(dòng),其他如ui表現(xiàn)/結(jié)構(gòu)的編程采用vue有點(diǎn)多余。
移動(dòng)端應(yīng)用場(chǎng)景
1、移動(dòng)應(yīng)用場(chǎng)景,對(duì)性能、帶寬有要求,移動(dòng)設(shè)備的特點(diǎn)也決定了其在問(wèn)題跟蹤定位,更新部署方面與pc端有差異。
2、vue技術(shù)棧應(yīng)用于移動(dòng)應(yīng)用場(chǎng)景具有天生的設(shè)計(jì)實(shí)現(xiàn)優(yōu)勢(shì)。
我的總結(jié):
1、 pc端采用傳統(tǒng)的ui技術(shù)棧,同時(shí)在傳統(tǒng)的基礎(chǔ)上引入輕量級(jí)mvvm方案解決表單讀寫開(kāi)發(fā)編程,即優(yōu)于vue技術(shù)棧。這也Bui會(huì)實(shí)現(xiàn)一個(gè)min-mvvm的初衷。
2、移動(dòng)端應(yīng)用,毫無(wú)疑問(wèn),采用vue技術(shù)棧是王道。
歡迎登陸我的demo網(wǎng)站,體驗(yàn)可能是全網(wǎng)最強(qiáng)大的富文本應(yīng)用:
http://www.vvui.net/bui/
以上所述是小編給大家介紹的jQuery會(huì)死嗎?我為什么不用vue寫富文本,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
您可能感興趣的文章:- 如何在vue 中引入使用jquery
- 使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法
- 詳解jquery和vue對(duì)比
- 在Vue項(xiàng)目中引入JQuery-ui插件的講解
- 在vue項(xiàng)目中使用Jquery-contextmenu插件的步驟講解
- jQuery+vue.js實(shí)現(xiàn)的多選下拉列表功能示例
- vue-cli 引入jQuery,Bootstrap,popper的方法
- 深入淺析angular和vue還有jquery的區(qū)別
- Vue引入jquery實(shí)現(xiàn)平滑滾動(dòng)到指定位置
- 到底該拋不拋棄JQuery