1. 程式人生 > 其它 >前端MVVM框架之我見

前端MVVM框架之我見

回顧往昔。
1989年World Wide Web初現。
1990年所有工具開發完成,1991年公佈第一個網站(http://info.cern.ch)。
1993年Web協議和程式碼免版稅。
1994年W3C成立。
……
HTTP、HTML、CSS、JavaScript、瀏覽器,或完善,或創造,一個連線資訊的全球資訊網出現了。
如今,已是2021年,三十多年的發展,Web世界早已變得繽紛多彩(資訊的低成本共享無疑極大促進了經濟總量的絕對增長)。
隨之而來的,是頁面越來越“重”。
人與網頁間的互動變得頻繁,網站表現的,越來越像是一個應用。
Web在蓬勃發展。
需求迫使人們做出改變(各項標準的推進)。
站點增長速度的上升讓我們儘可能的想辦法來複用程式碼(庫)。
單站點程式碼量的劇增讓我們不得不想出新的辦法來重新組織程式碼(框架)。
JS也從一個玩具型的指令碼語言成長為一門完善的現代程式語言。
時至今日,MVVM型別的前端框架已經成為主流。
React,Vue,Angular三分天下。
Svelte之流雖是後起之秀,但在格局已然穩定的今天,實難逆天改命。
此外,還有砥礪前行的老將(Ember,Knockout),緩緩升起的新星(Inferno)……
前端框架細數起來,實在多如牛毛(Github上有個前端框架跑分的專案,那裡列舉的應該是比較全的)。
今天,筆者就簡單說說對三大框架的少許見解,疏漏不足之處,請多多包涵。
從根本上說,現代的前端框架都是MVVM模式,核心的功能就是【開發者宣告資料和檢視的關係,由框架去同步UI和狀態】。
由此來看,三大框架無本質區別,在生態完善的情況下,選擇哪個都是個人喜好(說的直白一點,對哪個熟悉,喜歡哪個就用哪個)。
不同點,分【資料驅動的實現方式】和【框架抽象工具/程式組織正規化】兩部分來說。
第一部分。
Vue,模板編譯(找出資料與檢視的對應關係),資料驅動,對每個資料生成get/set方法,資料發生變動時,入棧,每次事件迴圈結束時,進行對應DOM操作。
Angular,模板編譯(找出資料與檢視的對應關係),事件驅動,觸發非同步時,對資料進行“髒檢查”,找到發生變動的資料,進行相應DOM操作。
React,主動驅動,Virtual DOM + DIFF演算法。
這裡的精華在於各種實現方式背後的思想,不要強行排名,沒必要。
第二部分。
僅羅列一些關鍵詞,具體的思考因人而異,就目前的業務場景來說,哪一方都沒有絕對的優勢。
此外,Angular本身就是工程化的代表,大而全,是個真正的框架。
Vue和React核心只是個檢視庫,和周邊生態結合起來再加上一些約定俗成才能稱為框架。
模板、Virtual DOM、TypeScript、依賴注入、類、函式式、元件、資料流……
最後。
React的思想無疑是革命性的,元件化(合理的抽象),Virtual DOM,檢視=fn(狀態),函式式,單項資料流……
但,其他框架亦有其出彩之處。
不單單是Vue和Angular,還有很多沒有提到的框架。
有的是先驅,開MVVM之先河,等發現不合理之處時再回頭為時已晚……
有的是新星,在尚未開墾的荒原上東一鋤頭,西一鋤頭,大部分刨出來的都是石頭,但說不定哪天就發現了金礦。
程式碼會老去,待在一塊硬盤裡無人問津。
編碼人員也會老去。
而只有思想,永遠熠熠生輝。
那些合理的抽象層,將會化作堅石,繼續支撐新生代的編碼人員去構建更復雜的資訊世界。
倘若新技術的突破摧毀了如今所有的抽象層(比如新型計算機的出現且成為主流),那也不打緊,不要忘了,構建抽象層背後的東西可被我們藏得好好的嘞。