Vue.js 原始碼目錄設計

依然很囧發表於2019-11-05
原文網址 : https://juejin.im/post/5dc1316ef265da4d2125d817
Vue.js原始碼
Vue.js的原始碼都在src目錄下，其目錄結構如下。

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

compiler

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

core

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

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

platform

Vue.js是一個跨平臺的MVVM框架，它可以跑在web上，也可以配合weex跑在natvie客戶端上。platform是Vue.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的目錄設計可以看到，作者把功能模組拆分的非常清楚，相關的邏輯放在一個獨立的目錄下維護，並且把複用的程式碼也抽成一個獨立目錄。這樣的目錄設計讓程式碼的閱讀性和可維護性都變強，是非常值得學習和推敲的。


相關文章