摘要:好好打基礎(chǔ),然后多嘗試不同風(fēng)格的框架,因為只有嘗試過后才能理解比如徐飛提到的各種權(quán)衡,也只有嘗試過后才能知道哪個能真正提升自己的開發(fā)效率。
今天看了幾篇關(guān)于這三個主流框架的PK,如標(biāo)題:react.js,angular.js,vue.js學(xué)習(xí)哪個好?相信每個人都有這種問題。
現(xiàn)在的前端框架層出不窮,作為前端開發(fā)者何去何從?fackbook的react.js盛世火熱,react native打開了JS占領(lǐng)android和ios領(lǐng)地,讓JS變的無所不能。angular.js背后有谷歌,個人感覺太重了,相對而言更喜歡vue,但是實(shí)際選擇哪個更好呢?總不能一下都學(xué)了也沒這個精力啊那么當(dāng)你讀完這篇文章或許你就有答案了!
對于初學(xué)React者。一定認(rèn)為這玩意真難學(xué),還不好寫,還不如原生JS寫的6呢。沒錯起碼我現(xiàn)在是這么覺得的,沒準(zhǔn)以后會發(fā)現(xiàn)它的好呢也說不定。先來說說都有的感想:
認(rèn)為ReactJS在真正開發(fā)大型復(fù)雜系統(tǒng)的時候并不好,首先一點(diǎn)就是,一個完整頁面的HTML模板被完全碎片化了,被分散到一個個的Component里,這樣的話,UI Designer和Dev根本沒有一個統(tǒng)一的視圖去協(xié)作。
那么,徐飛給你回答了這個問題,往下看:
我們學(xué)一個東西,通常兩個目的:
1.為了解決現(xiàn)有的問題
2.為了解決將來可能會有的問題
所以,在學(xué)這些東西之前,先必須了解,它們是用來解決什么問題的。
Angular,React,Vue,這三者其實(shí)面對的是同一個領(lǐng)域,那就是Web應(yīng)用,什么是Web應(yīng)(前端做的都是web應(yīng)用包括移動端)
這三者中,Angular的適用領(lǐng)域相對窄一些,React可以拓展到服務(wù)端,移動端Native部分,而Vue因為比較輕量,還能用于業(yè)務(wù)場景非常輕的頁面中。
在Web應(yīng)用中,我們需要解決的問題可以歸納為三類:
狀態(tài)
組織
效率
1. 狀態(tài)
在一個業(yè)務(wù)界面中,我們可能會根據(jù)某些數(shù)據(jù)去生成一塊界面,然后通過界面上的某些操作,改變一些數(shù)據(jù),從而影響界面的另外一些部分。
這里面就存在兩種關(guān)系,一種是從數(shù)據(jù)到界面,一種是從界面到數(shù)據(jù)。能夠描述界面當(dāng)前狀況的數(shù)據(jù),就可以被稱為狀態(tài)。
如果不對狀態(tài)作抽象,很可能會導(dǎo)致邏輯的混亂,比如說,一個地方點(diǎn)了,要改多個地方,這種代碼直接寫,很容易寫亂的,所以,不同的框架采用不同的方式進(jìn)行了處理。
比如說MVVM流的Angular和Vue,還有Avalon,Regular,Knockout,都是走的這一流派,通過類似模板的語法,描述界面狀態(tài)與數(shù)據(jù)的綁定關(guān)系,然后通過內(nèi)部轉(zhuǎn)換,把這個結(jié)構(gòu)建立起來,當(dāng)界面發(fā)生變化的時候,按照配置規(guī)則去更新相應(yīng)的數(shù)據(jù),然后,再根據(jù)配置好的規(guī)則去,從數(shù)據(jù)更新界面狀態(tài)。
React走的是另外一個流派,就是所謂的函數(shù)式,在這個里面,推崇的是單向數(shù)據(jù)流:給定原始界面(或數(shù)據(jù)),施加一個變化,就能推導(dǎo)出另外一個狀態(tài)(界面或者數(shù)據(jù)的更新)。
在這里需要額外提一下ReactiveJS,它的理念又有所不同,是基于Reactive的。
2. 組織
剛才這些,都可以看作是滿足最基本的需求,那就是業(yè)務(wù)的正確性。在這之后,就有另外的訴求了,首當(dāng)其沖的就是整個業(yè)務(wù)代碼的組織。
所謂組織,指的是兩個方面,一方面是模塊關(guān)系,另一方面是業(yè)務(wù)模型。
我們剛才提到組件化,整個應(yīng)用形成了一個組件樹,組件之間可能會需要通訊,它們通訊的內(nèi)容可能是簡單的界面事件,也可能是業(yè)務(wù)含義較深,能夠牽一發(fā)而動全身的。界面是怎么來的?是由初始界面加上狀態(tài)形成的,為了能夠反映界面的變化,我們必須使得對業(yè)務(wù)模型的每一個擾動都收斂到確切的狀態(tài),所以,這也就是Redux這類東西的意義所在。
再插另外一句:很多人吐槽Angular大而全笨重,吐槽React全家桶,但其實(shí)世界上大部分人是沒有框架整合能力的,小而美的庫最后整合了,在面臨各種業(yè)務(wù)需求之后不斷引入新模塊,也還是一個大而全的方案。在絕大部分場景下,還是有一整套標(biāo)配模塊比較好。你看ExtJS他也多帶帶提供ExtCore模塊,但不但競爭不過jQuery,連mootools和prototype都競爭不過,用它的人幾乎都是用全方案的。
3. 效率
效率也分兩種,一種是開發(fā)效率,一種是運(yùn)行效率。
我們前面提到,組件化,這是提升開發(fā)效率的一種手段,在組件化這個點(diǎn)上,各路框架的組織方式大同小異,反正最終都是組件樹。具體到單個組件的實(shí)現(xiàn)上,我個人是傾向于MVVM流的,之前做過對比,MVVM系的代碼量會少一些,開發(fā)效率稍高一點(diǎn)。
其中,Angular因為實(shí)現(xiàn)的特殊性,有作用域繼承之類的雙刃劍黑魔法,開發(fā)效率的不穩(wěn)定因素要高不少,深刻理解的人用起來效率很高,不理解的用了到處是坑。
再看運(yùn)行效率,這里面,Angular是較低的那個,主要在于數(shù)據(jù)變更檢測方式,但這也不是絕對的,在部分場景下,臟檢測未必就沒有優(yōu)勢,這個記得@鄭海波論述過。
運(yùn)行效率的另外一面主要是創(chuàng)建和修改DOM,在創(chuàng)建上,大家是沒有太大差異的,而在修改DOM的時候,React首創(chuàng)的虛擬DOM有很大優(yōu)勢,所以其他框架內(nèi)部實(shí)現(xiàn)也在逐漸借鑒。
如果看到這里,很可能你會疑惑,題目問的明明是學(xué)哪個好,我說這些是什么意思?
我用這些篇幅說明了Web應(yīng)用的業(yè)務(wù)開發(fā)中存在哪些麻煩,每種技術(shù)又是來解決什么痛點(diǎn)的,這樣,你可以按照自己的需求去,結(jié)合業(yè)務(wù)場景進(jìn)行分析,然后選擇需要的挨個學(xué)下去。
其實(shí)學(xué)API之類的很快,還是要把自己業(yè)務(wù)中的難點(diǎn)想清楚,帶著問題去學(xué),帶著需求去學(xué),學(xué)思想重于學(xué)使用,一定能事半功倍。
引用尤雨溪的話:
想要只學(xué)一個一勞永逸,那是不可能的。好好打基礎(chǔ),然后多嘗試不同風(fēng)格的框架,因為只有嘗試過后才能理解比如@徐飛提到的各種權(quán)衡,也只有嘗試過后才能知道哪個能真正提升自己的開發(fā)效率。說沒精力,那是借口。
跟大家共勉一句話:
對很多人來說,技術(shù)都不是一生的職業(yè)導(dǎo)向,那么,提升自己的眼界,站在更高的角度思考問題就顯得尤為重要,從自己,到團(tuán)隊,公司,再到整個業(yè)界,眼界寬廣了,技術(shù)也就是你的左膀右臂。——陳韜
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/88395.html
摘要:,谷歌給的一份性能指南和最佳實(shí)踐。目前而言,前端社區(qū)有三大框架和。隨后重點(diǎn)講述了和兩大前端框架,給出了大量的文章教程和相關(guān)資源列表。我認(rèn)為,使用函數(shù)式編程方式,更加符合后端程序員的思路,而是更符合前端工程師習(xí)慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風(fēng)》...
摘要:,谷歌給的一份性能指南和最佳實(shí)踐。目前而言,前端社區(qū)有三大框架和。隨后重點(diǎn)講述了和兩大前端框架,給出了大量的文章教程和相關(guān)資源列表。我認(rèn)為,使用函數(shù)式編程方式,更加符合后端程序員的思路,而是更符合前端工程師習(xí)慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風(fēng)》...
摘要:特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補(bǔ)充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會及時更新,平時業(yè)務(wù)工作時也會不定期更...
摘要:對于前端,有時候需要實(shí)現(xiàn)視圖層和數(shù)據(jù)層的雙向綁定例如當(dāng)前流行的各種框架和類庫。為代表前端數(shù)據(jù)劫持。參考資料實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式談?wù)勚械碾p向數(shù)據(jù)綁定非常簡單的雙向數(shù)據(jù)綁定框架三 對于前端,有時候需要實(shí)現(xiàn)視圖層和數(shù)據(jù)層的雙向綁定(two-way-binding), 例如當(dāng)前流行的各種框架和類庫:Vue.js、Angular.js、React.js。 然而,他們最原始的實(shí)現(xiàn)方式其實(shí)都相...
摘要:一團(tuán)隊組織網(wǎng)站說明騰訊團(tuán)隊騰訊前端團(tuán)隊,代表作品,致力于前端技術(shù)的研究騰訊社交用戶體驗設(shè)計,簡稱,騰訊設(shè)計團(tuán)隊網(wǎng)站騰訊用戶研究與體驗設(shè)計部百度前端研發(fā)部出品淘寶前端團(tuán)隊用技術(shù)為體驗提供無限可能凹凸實(shí)驗室京東用戶體驗設(shè)計部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊 騰訊Web前端團(tuán)隊,代表作品WebQQ,致力于前端技術(shù)的研究 ISUX 騰...
閱讀 2574·2021-10-19 11:41
閱讀 2415·2021-09-01 10:32
閱讀 3377·2019-08-29 15:21
閱讀 1755·2019-08-29 12:20
閱讀 1161·2019-08-29 12:13
閱讀 599·2019-08-26 12:24
閱讀 2520·2019-08-26 10:26
閱讀 827·2019-08-23 18:40