現在的前端都在用JavaScript「框架」?前端框架的功能與優點 ... | 網頁前端框架
現在打開任何一間求職網站,搜尋前端相關職缺,幾乎每間公司的職缺都會在求職條件或加分項目中提到目前的三大框架:React、Vue、Angular;或著也可以到GitHub上搜尋AwesomeJavascript,其中的Framework[1]數量也是琳瑯滿目,其中也能看到三大框架驚人的星星數量;這麼熱門的技術,身為開發者的我們好像不跟著用也不太對,但到底為什麼好像全世界都在用「框架」呢?剛好三框架三色完美契合XD(業界專案實戰,學會用Vue.js打造餐廳論壇網站[2])沒有框架的日子先回想一下在沒有框架的時候,開發者的日常會長什麼樣子吧。那時最流行的「套...
現在打開任何一間求職網站,搜尋前端相關職缺,幾乎每間公司的職缺都會在求職條件或加分項目中提到目前的三大框架:React、Vue、Angular;或著也可以到 GitHub 上搜尋 Awesome Javascript,其中的 Framework[1] 數量也是琳瑯滿目,其中也能看到三大框架驚人的星星數量;這麼熱門的技術,身為開發者的我們好像不跟著用也不太對,但到底為什麼好像全世界都在用「框架」呢?
剛好三框架三色完美契合 XD
(業界專案實戰,學會用Vue.js打造餐廳論壇網站[2])
沒有框架的日子先回想一下在沒有框架的時候,開發者的日常會長什麼樣子吧。
那時最流行的「套件」非 jQuery[3] 莫屬了,語法簡潔、直覺好用的元素選取器,語法便捷的事件監聽註冊,豐富的開發者生態系產出大量的開源套件,以及最重要的,弭平瀏覽器 XHR 差異的 ajax 函式,將複雜的瀏覽器差異藏在套件中,讓開發者只需要專注在想實作的邏輯即可。
透過好用的元素選取器及事件監聽,開發者們可以依據使用者的行為,靈活操作 DOM 元素的結構及樣式,jQuery 的這些特色直到 2019 的現在,都仍是很實用的功能,甚至 程式碼本身[4] 也有許多值得開發者學習的地方;但隨著專案規模逐漸增大,程式複雜度不斷上升,直接操作 DOM 的缺點也就逐漸浮出檯面:
難以維護HTML、CSS、JavaScript[5] 無法維持原先的各司其職,因為需要透過 JavaScript 處理互動內容,勢必要將結構、樣式寫到 JavaScript 的部份中,也就因此造成架構耦合度提高,程式碼管理困難。
效能低落在 Reflow 及 Repaint 是什麼?[6] 中有提到 Render Tree 的概念,當 DOM 被改變,勢必要觸發整個 Reflow & Repaint 的流程,頻繁的改動觸發重複渲染,便會讓頁面效能被消耗殆盡。
框架的功能既然有前述的問題,自然會有強者試圖解決它。歷史進程中有許多大神拋出了方法論,或是實作出解決方案,但這中間的歷史礙於篇幅,就容筆者簡略帶過吧。...