vue的架構設計


下圖是我自己整理的vue的整體結構,

 

 

 

我們可以看出它整體分為三個部分:核心代碼、跨平台相關和公用工具函數。同時,其架構是分層的,最底層是一個普通的構造函數,最上層是一個入口,

也就是一個完整的構造函數導出給用戶使用,在最底層和最頂層中間,需要添加一些方法和屬性,而構造函數上一層的一些方法會最終添加到構造函數的prototype屬性中,

再上一層的方法最終會添加到構造函數上,這些方法叫作全局API,也就是說,現在構造函數的prototype屬性中添加方法后,再向構造函數自身添加全局API,再往上一層是

與跨平台相關的內容,在構建時,首先會選擇一個平台,然后將特定與這個平台的代碼加載到構建文件中,再上一層包括兩部分:服務端渲染相關的內容和編譯器相關的內容,

構建時會根據構建的目標文件來選擇是否需要將編譯器加載進來

vue目錄結構下有一個dist目錄,其下有很多不同的Vue.js構建版本

 

如果構建只包含運行時代碼的版本,就不會將渲染層中編譯器部分的代碼加載出來了

在構建文件時,不同平台的構建文件會選擇不同的入口進行構建操作。

 

其實整個程序結構還可以用另一種表現形式來展現,因為下面三層的代碼是與平台無關的核心代碼,上面三層是與平台相關的代碼。

下圖就是另一種表現形式,看起來比較一目了然

 

不同的平台有不同的入口,有一些特定與平台的代碼會加載到這部分,而底層的核心代碼是通用的,可以在任何平台下運行。

這里以構建Web平台下運行的文件為例,如果我們構建的是完整版本,那么會選擇Web平台的入口文件開始構建,這個入口文件最終

會導出一個Vue構造函數,在導出之前,會向Vue構造函數中添加一些方法,其流程是:先向Vue構造函數的prototype屬性上添加一些方法,

然后向Vue構造函數自身添加一些全局API,接着將平台特有的代碼導入進來,最后將編譯器導入進來,最終將所有代碼同Vue構造函數一起導出去。

 

 總結:

在架構設計中,Vue大體可以分為:核心代碼、跨平台相關與公用工具函數,核心代碼包含原型方法和全局API,可以在各個平台運行,而跨平台相關的部分更多

的是渲染相關的功能,不同平台下的渲染API是不同的,以Web平台為例,Web頁面中的渲染操作就是操作DOM,所以在跨平台的Web環境下對DOM操作的API

進行了封裝,這個封裝主要與虛擬DOM對接,而虛擬DOM中所使用的各種節點操作其實是調用跨平台層封裝的API接口,而Weex平台對節點的操作與Web平台並不相同。

 

 

文字過於多。一定要有耐心,仔細閱讀喲。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM