化整為零的Vue元件化開發

力軟資訊發表於2021-12-30

“工業4.0”這一以資訊化技術促進產業變革的時代,前端技術不斷髮展,前端開發能夠處理的業務越來越多,網頁也變得越來越強大和動態化,網際網路、雲端計算、大資料、人工智慧、區塊鏈和物聯網融合,計算無處不在,軟體定義一切,網路包容萬物,連線隨手可及 , 這些進步都離不開JavaScript。在目前的開發中,已經把很多服務端的程式碼放到了瀏覽器中來執行,這就產生了成千上萬行的JavaScript程式碼,他們連線著各式各樣的HTML和CSS檔案,但是缺乏正規的組織形式。這也是為什麼越來越多的前端開發者使用JavaScript框架的原因

目前比較流行的前端三大框架之中,最具創新力的是 React,而最具企業級能力的是 Angular,能夠取長補短,各項資料介於兩者之間的則是 Vue。

Vue是一款友好的、多用途且高效能的JavaScript框架,它能夠建立可維護性和可測試性更強的程式碼庫。Vue是漸進式的JavaScript框架,也就是說,如果已有現成的服務端應用,就可將Vue作為該應用的一部分嵌入其中,帶來更加豐富的互動體驗。如果希望將更多業務邏輯放到前端來實現,那麼Vue的核心庫及其生態系統也可以滿足各式需求。不可忽略的是,元件 化開發 亦是Vue最強大的功能之一,程式設計師用獨立可複用的小元件來構建大型應用,讓開發效率更快更敏捷。

元件化,顧名思義,把重複的程式碼提取出來合併成為一個個元件,成為一個個小的單位。元件最重要的就是複用,位於框架最底層,其他功能都依賴於元件,可供不同功能使用。多個元件可以組合成元件庫,元件間也可以巢狀,小元件組合成大元件。利用好元件化開發,開發一個頁面,就像是搭積木一樣,將各個元件拼接到一起,最後融合到一起,就是一個完整的系統。

使用元件化開發可以降低整個系統的耦合度,在保持介面不變的情況下替換不同的元件快速完成需求。在元件化開發下,整個系統是通過元件組合起來的,在出現問題的時候,可以用排除法直接移除元件,或者根據報錯的元件快速定位問題。因為每個元件之間的低耦合,職責單一,所以邏輯會比分析整個系統簡單,從而實現快速定位。

由於每個元件的職責單一,並且元件在系統中是被複用的,所以對程式碼進行優化可獲得系統的整體升級,提高系統可維護性。例如某個元件負責處理非同步請求,與業務無關,再新增快取機制,序列化相容,編碼修正等功能,一來整個系統中的每個使用到這個元件的模組都會受惠;二來可以使這個元件更具健壯性。

Vue 門檻低、易上手、人性化、效率高等特點,外加最為豐富的中文資源和諸如 SpreadJS 等優秀的第三方控制元件加持,使得其在亞洲的增速突飛猛進,Grammarly完全是在Vue的基礎上建立的,阿里巴巴和小米更是在2018年就宣佈完全過渡到Vue.js。在這個追求快速和變化的時代,Vue“一切都是元件”的中心思想或許更契合時代的主流需求。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69965343/viewspace-2849533/,如需轉載,請註明出處,否則將追究法律責任。

相關文章