Vue源碼探究-源碼文件組織
源碼探究基於最新開發分支,當前發佈版本爲v2.5.17-beta.0
Vue 2.0版本的大整改不僅在於使用功能上的優化和調整,整個代碼庫也發生了天翻地覆的重組。可見隨着使用者的增加與聲名傳播,Vue自身的格局發生了很大的突破,特別體現在對Weex框架做了內部支持。不管在未來是使用Weex或者與NativeScript結合做跨平臺應用開發,都還是能與React、Angular保持三足鼎立的勢頭。
Vue的github倉庫根目錄
先來大致瞭解一下整個項目的結構(摘譯自官方說明文檔):
-
scripts
:包含構建相關的腳本和配置文件。作者聲明一般開發不需要關注此目錄 -
dist
:構建出的不同分發版本,只有發佈新版本時纔會跟新,開發分支的新特性不會反映在此 -
flow
:包含使用Flow(靜態類型檢查工具)聲明的類型,供全局使用 -
packages
:包含服務端渲染和模板編譯器兩種不同的NPM包,是提供給不同使用場景使用的 -
test
:包含所有測試代碼 -
src
:Vue的源碼,使用ES6和Flow類型註釋編寫的 -
types
:使用TypeScript定義的類型聲明,並且包含了測試文件,不太明白爲什麼要同時使用兩種靜態類型檢查語言
以下是官方文檔未列出說明的文件夾,好奇寶寶抱着刨根問底的決心一併在此列出:
-
.github
:項目相關的說明文檔,上面的說明文檔就在此文件夾 -
examples
:一些示例 -
.circleci
:包含CircleCI部署工具的配置文件 -
benchmark
: Benchmark性能測試相關文件
根目錄下的其他配置文件相信大家都心知肚明有什麼作用,不在此贅述了。
基於以上的大致瞭解,發現除 flow
和 src
目錄外,其他的文件夾主要都是用來服務於Vue項目組織和構建的,在源碼探究的旅途中可以將他們剔除。由於 flow
文件夾裏包含了一些預先定義好的靜態類型,是與源碼編寫相關的,還是需要瀏覽一下。接下來,繼續詳細的探索一下 src
源碼文件夾的組織結構。
Vue的src源碼目錄
Vue最新版本的源碼文件夾下分爲6個目錄compiler
、core
、server
、platforms
、sfc
、shared
。作者在CONTRIBUTING.md也說明了它們的內容,但在其文檔中types
文件夾已經被移出到根目錄下了,這裏沒有修改。
Compiler 編譯器
包含模板到渲染函數編譯器的代碼。
拆分原因:1.0版本中就把編譯器的功能存放在獨立文件夾中,2.0之後的版本進行了調整和優化,可以更好地組織編譯器相關功能的代碼。
編譯器由解析器、優化器、代碼生成器組成,另外還有生成編譯器、指令相關等一些代碼。
編譯器的主要構成部分:
-
parser
:解析器的作用是將模板轉換成元素AST對象。 -
optimizer
:優化器負責檢測靜態抽象樹的渲染進行優化。 -
codegen
:代碼生成器直接從AST對象生成代碼字符串。
編譯器具體的實現功能在另一篇文章模板編譯的實現中進行探討。
Core 核心
組織與平臺無關的通用運行時代碼,即與平臺解耦,在任何支持Javascript運行的環境下都可以運行。
拆分原因:隨着2.0版本區別出了web和weex跨平臺兩端的開發支持,在不同平臺下的編譯和運行時都有區別,所以將核心通用的代碼提取到獨立文件夾中組織,並且不包含那些將要根據不同平臺調整的相關代碼,如編譯器。
核心代碼包括2.0版本中最基礎的代碼部分:
-
Observer
:觀察者系統,實現監測數據變化的功能。 -
Vdom
:Vue虛擬節點樹,實現虛擬節點的創建和刷新功能。 -
instance
:Vue類,包含構造函數和原型方法的創建。 -
Global-API
:全局API。 -
Components
:通用抽象組件。 -
util
:輔助函數。
Platforms 平臺
平臺專有代碼存放在這個目錄中,以不同的平臺組成子目錄。
拆分原因:2.0版本後在內部支持與Weex框架的融合,與web端的應用開發相區分。
目前分離了出了兩個部分:web端開發和weex框架所涉及跨平臺開發,分別包含了一些編譯器和運行時的不同代碼。
Server 服務器渲染
包含服務端渲染的相關代碼。
拆分原因:2.0版本後開發了支持服務端渲染的新功能
Sfc 單文件組件文件編譯
這一文件夾目前只包含了一個叫parser.js的文件,用來將單文件組件解析爲SFC描述對象,輸出給編譯器繼而執行模板編譯。
拆分原因:單獨抽離解析vue單文件組件的邏輯
Shared 共享常量和函數
Shared是2.0版本之後增加的用來組織共享變量和輔助函數的文件夾,主要從之前的輔助函數文件裏抽取出來,在後來的開發中也繼續添加了其他函數和常量,從其中包含的constants.js和util.js兩個文件的名稱中也能顯而易見此文件夾的作用。
拆分原因:更好的組織代碼
關於爲何要花心思來分析一個項目的文件組織方式和目錄結構,並不是因爲我有着一套成熟的學習項目源代碼的方式,而是因爲我覺得可能會有一些人與我一樣,無法任由那些不懂的東西殘留在視線範圍內,所以到此爲止,帶着各種問題探索完了Vue倉庫的文件組織,感覺自己對於整個Vue項目的組織有了更深入的瞭解,爲繼續解讀具體功能的實現排除了無關影響因素,掃清了路障。如有問題歡迎大家指正。