Vue.js 原始碼目錄設計

依然很囧發表於2019-11-05
Vue.js的原始碼都在src目錄下,其目錄結構如下。

src
├── compiler        # 編譯相關
├── core            # 核心程式碼
├── platforms       # 不同平臺的支援
├── server          # 服務端渲染
├── sfc             # .vue 檔案解析
├── shared          # 共享程式碼複製程式碼

compiler

compiler目錄包含Vue.js所有編譯相關的程式碼。它包括把模板解析成ast語法樹,ast語法樹優化,程式碼生成等功能。編譯的工作可以在構建時做(藉助webpackvue­loader等輔助外掛);也可以在執行時做,使用包含構建功能的Vue.js。顯然,編譯是一項耗效能的工作所以更推薦前者 離線編譯。

core

core目錄包含了Vue.js的核心程式碼,包括內建元件、全域性API封裝,Vue例化、觀察者、虛擬DOM、工具函式等等。

這裡的程式碼可謂是Vue.js的靈魂,也是我們之後需要重點分析的地方。

platform

Vue.js是一個跨平臺的MVVM框架,它可以跑在web上,也可以配合weex跑在natvie客戶端上。platformVue.js的入口,2個目錄代表2個主要入口分別打包成執行在web上和weex上的Vue.js

我們會重點分析web入口打包後的Vue.js,對於weex入口打包的Vue.js,感興趣的同學可以自行研究。

server

Vue.js 2.0支援了服務端渲染,所有服務端渲染相關的邏輯都在這個目錄下。注意:這部分程式碼是跑在服務端的Node.js,不要和跑在瀏覽器端的Vue.js為一談。

服務端渲染主要的工作是把元件渲染為伺服器端的HTML字串,將它們直接傳送到瀏覽器,最後將靜態標記"混合"為客戶端上完全互動的應用程式。

sfc

通常我們開發Vue.js都會藉助webpack構建,然後通過.vue單檔案的編寫組件。

這個目錄下的程式碼邏輯會把.vue檔案內容解析成一個JavaScript的物件。

shared

Vue.js會定義一些工具方法,這裡定義的工具方法都是會被瀏覽器端的Vue.js和服務端的Vue.js所共享的。

總結

Vue.js的目錄設計可以看到,作者把功能模組拆分的非常清楚,相關的邏輯放在一個獨立的目錄下維護,並且把複用的程式碼也抽成一個獨立目錄。這樣的目錄設計讓程式碼的閱讀性和可維護性都變強,是非常值得學習和推敲的


相關文章