建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號「Tecvan」，作者范文杰 。轉(zhuǎn)載本文請聯(lián)系Tecvan公眾號。
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)藁城免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
我很早就意識到，能熟練、高效閱讀開源前端框架源碼是成為一個高級前端工程師必須具備的基本技能之一，所以在我職業(yè)生涯的最早期，就已經(jīng)開始做了很多次相關(guān)的嘗試，但結(jié)果通常都以失敗告終，原因五花八門：
- 缺乏必要的背景知識，猶如閱讀天書
- 不理解項目架構(gòu)、設(shè)計理念，始終不得要領(lǐng)
- 目標(biāo)不夠聚焦，閱讀過程容易復(fù)雜化
- 容易陷入細(xì)節(jié)，在不重要的問題上糾結(jié)半天
- 容易追著分支流程跑，分散注意力
- 沒有及時記錄筆記和總結(jié)，沒有把知識碾碎、重組、內(nèi)化成自己的東西
- 沒有處理過特別復(fù)雜問題的經(jīng)歷，潛在的不自信心理
- 個人毅力、韌性不足，或者目標(biāo)感不夠強(qiáng)烈，遇到困難容易放棄
- 等等
這個列表還可以繼續(xù)往下拉很長很長，總之既有我自己主觀認(rèn)知上的限制又有切切實實的客觀原因。后來因為工作的契機(jī)硬著頭皮看完 Vue 和 mxGraph 的源碼，發(fā)現(xiàn)事情并沒有自己想象中那么困難，后來前前后后陸續(xù)看了很多框架源碼，包括 Webpack、Webpack-sources、Vite、Eslint、Babel、Vue-cli、Vuex、Uniapp、Lodash、Vetur、Echarts、Emmet 等等，愚鈍如我也慢慢摸索出了一些普適的方式方法，進(jìn)而斗膽撰下這篇文章，不敢說授人以漁，但至少也該拋磚引玉吧。
所以這是一篇為哪些有意，或準(zhǔn)備，或已經(jīng)在閱讀前端框架源碼的同學(xué)而寫的文章，我會在這里拋出一些經(jīng)過我個人多次實踐總結(jié)出來的閱讀技巧和原則，并結(jié)合 Vetur 源碼，具體地講解我在閱讀源碼的各個階段所思所想，希望能給讀者帶來一些啟發(fā)。
弄清楚目標(biāo)
在介紹具體的技巧之前，有必要先跟讀者探討一下閱讀源碼的動機(jī)，想清楚到底需不需要通過這種方式提升自身技能，雖然學(xué)習(xí)優(yōu)秀框架源碼確實有非常多不言自明的好處，但每個人的經(jīng)驗、所處的語境、訴求、思維習(xí)慣不同，實際學(xué)習(xí)效果在不同個體或個體的不同時期必然存在極大的差異，這里面最大的變量一是經(jīng)驗，二是目標(biāo)，經(jīng)驗因人而異，且很難在短時間內(nèi)補(bǔ)齊，沒有太多討論空間;倒是目標(biāo)方面值得盤道盤道。
第一層，先弄清楚為啥要閱讀源碼?可能的原因有很多，例如：
- 為了增進(jìn)對框架的認(rèn)知深度，提升個人能力
- 為了應(yīng)對面試
- 為了解決當(dāng)下某個棘手的 bug 或性能問題
- 基于某些原因，需要對框架做二次改造
- 反正閑著，也不知道該學(xué)點啥，試試唄。。。
- 好奇
這里面有一些很抽象，例如最后一個“好奇”;有一些很具體，例如“為了做二次改造”;還有一些在具體與抽象之間。按照 SMART 原則的說法，越具體、可衡量的目標(biāo)越容易達(dá)成，如果讀者的目標(biāo)還處在比較模棱兩可，不夠具體詳細(xì)的階段，那執(zhí)行過程大概率會翻車，畢竟這是一件特別消耗精力與耐性的活兒。
對于這種情況，我的建議是不妨往更細(xì)節(jié)的層次再想一想，例如對于最后一點“好奇”，可以想想具體有哪些特性讓你特別神奇，值得花時間精力去細(xì)致地探索，放在 Vetur 語境下可以是“我想了解 Vetur 的 template 錯誤提示與 eslint 如何結(jié)合在一起，實現(xiàn)模板層面的錯誤提示功能”，這就很具體很容易衡量了。
第二層，讀者如果已經(jīng)有了明確、具體、可衡量的目標(biāo)，不妨在開始之前先自問幾個問題：
- 當(dāng)下確實需要以閱讀源碼的方式增進(jìn)自己對框架的認(rèn)知深度嗎?有沒有一些更輕量級，迭代速度更快的學(xué)習(xí)方式?
- 你所選定的框架，其復(fù)雜度、技術(shù)難度是否與你當(dāng)下的能力匹配?最好的狀態(tài)是你自認(rèn)為踮踮腳就能夠到，過高，不具有可行性;過低，ROI 不值當(dāng)。
如果經(jīng)過這番推敲之后，必要性、可行性、相關(guān)性都與個人目標(biāo)契合，那就沒啥可猶豫的。
第三層，需要辯證地去看待所謂“目標(biāo)” —— 不是把整個項目完整讀完讀通才叫成功，如果能從一些語句、片段、局部模塊中習(xí)得新的設(shè)計思維、工具方法，甚至僅僅是命名規(guī)范都可以算作個人的一點進(jìn)步，積少成多遠(yuǎn)比拔苗助長靠譜的多。所以一開始沒必要把目標(biāo)定的太高，能剛剛好滿足自身需求是最好的，過程中如果發(fā)現(xiàn)問題域的復(fù)雜度在不斷膨脹變大，持續(xù)投入很多時間卻始終沒有明顯成效的話，那建議果斷放棄或者請求外援，重新評估目標(biāo)與可行性之后再做決定。
總之，這是一個預(yù)期管理的問題，我們可以多參考 SMART 原則，多從具體、可衡量、可行性、相關(guān)性幾個維度思考，不斷推敲是否需要做這件事;如何拆解目標(biāo)，用目標(biāo)反推計劃，不斷推進(jìn)個人成功。
閱讀技巧
了解背景知識
「知識」是形成「理解」的必要條件，展開學(xué)習(xí)任何一個開源項目之前都有必要花點時間調(diào)研項目相關(guān)的基礎(chǔ)知識，漸進(jìn)構(gòu)建起一套屬于你自己的知識體系，這包括：
- 優(yōu)質(zhì)參考資料 —— 收集一波質(zhì)量較高的學(xué)習(xí)資料，收集過程可以同步通讀一遍
- 框架是如何運行的 —— 也就是所謂的入口
- IO —— 框架如何與外部交互?它通常接受什么形態(tài)的運行參數(shù)?輸出什么形式的結(jié)果?
- 生態(tài) —— 優(yōu)秀的框架背后通常都帶有一套成熟的生態(tài)系統(tǒng)，例如 Vue，框架衍生品如何補(bǔ)齊框架本身的功能缺失?它們以何種方式，以什么樣的 IO 與主框架交互?遵循怎么樣的寫法規(guī)則?
- 如何斷點調(diào)試 —— 這幾乎是最有效的分析方法，斷點調(diào)試能夠幫助你細(xì)致地了解每一行代碼的作用。
注意，這里的目標(biāo)是迅速構(gòu)建起關(guān)于這個開源項目的抽象 —— 甚至不太準(zhǔn)確的知識框架，有意思地避免陷入無盡的細(xì)節(jié)中，就像在閱讀一篇文章的時候，可以先看看目錄結(jié)構(gòu)粗略地了解文章的信息框架，了解文章大概內(nèi)容。
例如，我剛開始學(xué)習(xí) Vetur 的時候只知道這是一個 VS Code 插件，但完全不了解插件怎么寫、怎么運行、怎么實現(xiàn)語言特性，所以我做的第一件事情是仔仔細(xì)細(xì)閱讀 VS Code 的官方文檔(所幸文檔非常齊全，不像某著名打包工具)，學(xué)習(xí)關(guān)于插件開發(fā)的基本知識，包括：
進(jìn)一步總結(jié)關(guān)于 VS Code 語言插件的要素：
- 「怎么寫插件」：通過 package.json 文件的 contributes 、main 等屬性，聲明插件的功能與入口
- 「怎么運行」：開發(fā)階段使用 F5 啟動調(diào)試
- 「怎么編寫語言特性」：使用 「詞法高亮、Language API、Language Server Protocol」 三類技術(shù)實現(xiàn)
VS Code 領(lǐng)域的知識量還是很龐大的，學(xué)習(xí)背景知識并梳理成這種高度結(jié)構(gòu)化、高度抽象的腦圖能夠給你一個更高層、全面的視角，理想狀態(tài)下，后續(xù)實際分析源碼的時候這些骨架脈絡(luò)能夠讓你非常本能地映射到某一個切面的知識點，事半功倍。
六步循環(huán)分析
接下來，我會介紹一套我常用的分析流程：
整體分為六個步驟：
- 理解項目結(jié)構(gòu)
- 尋找合適的切入點
- 就著切入點查閱文章資料
- 就著切入點分析代碼流程
- 局部深入研究
- 及時總結(jié)
之后，再繼續(xù)設(shè)定切入點，重復(fù)執(zhí)行上述流程直到透徹地理解了問題
這是一套在 「總-分-總」 視角之間反復(fù)橫跳最終構(gòu)建出完整視角的方法論，重點就在于告訴讀者在什么階段應(yīng)該關(guān)注什么，忽略什么，輸入什么，輸出什么，我個人就是按照這個方法慢慢摸索出包括 Webpack、Babel、Vue、Vetur、mxGraph 在內(nèi)的各種開源框架的實現(xiàn)原理。
理解項目結(jié)構(gòu)
剛開始閱讀源碼的時候，相信大多數(shù)人都會很懵逼，無從下手，這是因為讀者對項目缺乏一個必要的框架性認(rèn)知，不了解程序的入口在哪里、關(guān)鍵組件有哪些、各個文件夾有什么作用等，遇到問題無法迅速推測實現(xiàn)路徑。
所以，閱讀源碼的第一個步驟，應(yīng)該是先花點時間粗淺地分析、理解項目的組織結(jié)構(gòu)。所幸一個值得深入閱讀學(xué)習(xí)的開源項目，通常都會有較強(qiáng)的整體性與一致性，我們只需要梳理出三條線索：
- 分析項目入口
- 分析項目依賴了哪些基礎(chǔ)工具，包括編譯工具，如 webpack、Typescript、babel;基礎(chǔ)庫，如 lodash、tapable、snabbdom。
- 將項目中重要文件夾、文件逐一列舉出來，理解它們?nèi)绾伟凑找蕾囮P(guān)系組成一個整體的架構(gòu)。
放在 vetur 語境下，我們在上面“了解背景知識”一節(jié)已經(jīng)了解到 VS Code 插件需要在 package.json 文件通過 contributes 等屬性聲明插件的配置信息，所以這幾個問題都能在 package.json 文件找到答案。
入口分析
首先，需要識別出 Vetur 應(yīng)用的入口，這一步的作用是幫助我們理解 Vetur 是如何向 VS Code 貢獻(xiàn)新特性的。分析 vetur 的 package.json 發(fā)現(xiàn)有三種直接指向到文件的配置項：
- contributes.languages 指定語言配置文件
- contributes.grammars 指定語法配置文件
- "main": "./dist/vueMain.js" 指定插件執(zhí)行入口
三個入口分別實現(xiàn)三種不同的語言特性功能，略顯復(fù)雜，這里有必要分別展開了解一下。
探索 contributes.languages 配置
逐個講解，contributes.languages 配置信息指向到 ./languages/***-language-configuration.json 文件，如：
- {
- // ...
- "contributes": {
- "languages": [
- {
- "id": "vue",
- "configuration": "./languages/vue-language-configuration.json"
- },
- {
- "id": "vue-html",
- "configuration": "./languages/vue-html-language-configuration.json"
- }
- // ...
- ]
- }
- // ...
- }
這里回過頭翻一下 VS Code 對 [contributes.languages](https://code.visualstudio.com/api/references/contribution-points#contributes.languages) 的解釋(感謝資源豐富的 VS Code 社區(qū))：
Contribute definition of a language. This will introduce a new language or enrich the knowledge VS Code has about a language.
大意是說 contributes.languages 配置項的作用主要是增進(jìn) VS Code 對具體語言的理解，至于怎么增強(qiáng)呢?繼續(xù)打開配置項中的 ./languages/vue-language-configuration.json 文件：
- {
- "comments": {
- // symbol used for single line comment. Remove this entry if your language does not support line comments
- "lineComment": "http://",
- // symbols used for start and end a block comment. Remove this entry if your language does not support block comments
- "blockComment": [
- "/*",
- "*/"
- ]
- },
- // ...
- }
文件中定義了行內(nèi) comment、塊級 comment、括號、折疊等語言規(guī)則的配置，規(guī)則都很簡單直白，篇幅關(guān)系這里不展開。
回顧一下探索步驟：
- 翻閱參考資料，理解 contributes.languages 配置的作用
- 打開對應(yīng)入口文件，猜測各個配置項的作用
- 繼續(xù)翻閱參考資料，或者修改配置，驗證猜想
探索 contributes.grammars 配置
contributes.grammars 項包含諸多指向到 ./syntaxes/vue-xxx.json 的配置信息，形如：
- {
- "contributes": {
- "grammars": [
- {
- "language": "vue",
- "scopeName": "source.vue",
- "path": "./syntaxes/vue-generated.json",
- "embeddedLanguages": {
- "text.html.basic": "html",
- // ...
- }
- },
- {
- "language": "vue-postcss",
- "scopeName": "source.css.postcss",
- "path": "./syntaxes/vue-postcss.json"
- }
- // ...
- ]
- }
- }
同樣的，我們先查一下官網(wǎng)對 [contributes.grammars](https://code.visualstudio.com/api/references/contribution-points#contributes.grammars) 配置項的解釋：
Contribute a TextMate grammar to a language. You must provide the language this grammar applies to, the TextMate scopeName for the grammar and the file path.
這段描述略微復(fù)雜，大意是開發(fā)者可以通過 grammars 屬性提供關(guān)于語言的 TextMate 形式的語法描述，grammars 配置項包含三個屬性：
- language：語言的名稱
- scopeName：語言的分類，與 TextMate scopeName 同義，可用于嵌套語法定義
- path：語言的詞法規(guī)則文件
這里面 path 屬性指向一個內(nèi)容更復(fù)雜的配置文件 ./syntaxes/vue-xxx.json，我們可以接著打開其中任意一個文件，關(guān)鍵內(nèi)容結(jié)構(gòu)如下：
- {
- "name": "Vue HTML",
- "scopeName": "text.html.vue-html",
- "fileTypes": [],
- "uuid": "ca2e4260-5d62-45bf-8cf1-d8b5cc19c8f8",
- "patterns": [
- // ...
- {
- "name": "meta.tag.any.html",
- "begin": "(<)([A-Z][a-zA-Z0-9:-]*)(?=[^>]*>)",
- "beginCaptures": {
- "1": {
- "name": "punctuation.definition.tag.begin.html"
- },
- "2": {
- "name": "support.class.component.html"
- }
- }
- }
- ],
- "repository": {
- // ...
- }
- }
按照 Syntax Highlight Guide(https://zjsms.com/e7E5Jdq/) 一節(jié)的說法這里面最重要的是 patterns 屬性，而 patterns 屬性最關(guān)鍵的功能就是以正則語句表達(dá)語言的詞法分析規(guī)則，并分配詞法對應(yīng)的 name 命名，詳細(xì)的配置規(guī)則還可以繼續(xù)參考 TextMate 官網(wǎng)，這里大致理解作用即可，先不展開深究。
探索 main 配置
接著往下看，第三個值得關(guān)注的是 main 屬性，在 vetur 中對應(yīng)的值為：
- "main": "./dist/vueMain.js"
VS Code 官網(wǎng)對 main 屬性的解釋非常精簡：「The entry point to your extension」，也就是插件的入口，通常需要指向到可執(zhí)行的 JS 文件，插件啟動時 VS Code 會執(zhí)行這個入口文件導(dǎo)出的 activate 方法，內(nèi)容框架大致為：
- import vscode from 'vscode';
- export async function activate(context: vscode.ExtensionContext) {
- // ... 啟動邏輯
- }
在 Vetur 中，activate 函數(shù)定義在 client/vueMain.ts 文件，分析源碼可知該函數(shù)主要完成如下事項：
- 調(diào)用 registerXXXCommands 方法注冊一系列命令
- 調(diào)用 initializeLanguageClient 方法初始化 LSP Client 對象
這兩個操作具體的作用，我們先按下不表，后面再展開。
小結(jié)
對入口的分析就到這里了，我們先總結(jié)、記錄下關(guān)鍵信息：
- Vetur 本質(zhì)上是一個 VS Code 插件，所有配置 —— 包括入口都記錄在 package.json 文件中
- Vetur 包含三種啟動入口：
- contributes.languages：定義一些簡單的語言基本配置，包括怎么折疊，怎么注釋
- contributes.grammars：定義了一套基于 TextMate 引擎的詞法規(guī)則，用于實現(xiàn)代碼高亮
- main：定義了插件的啟動入口，入口中注冊了一系列命令，同時創(chuàng)建了基于 LSP 協(xié)議的 Language Client 對象，而 LSP 協(xié)議用于實現(xiàn)如代碼補(bǔ)全、錯誤診斷、跳轉(zhuǎn)定義等高級特性
到這里，雖然我們還是不了解 Vetur 的實現(xiàn)細(xì)節(jié)，但是對 Vetur 的背景知識與項目結(jié)構(gòu)應(yīng)該已經(jīng)有了一個比較基礎(chǔ)的認(rèn)知，已經(jīng)能大致識別哪些功能由哪些模塊實現(xiàn)。
OK，這里先保持好這個模模糊糊的認(rèn)知就行了，不要花太多時間。
基礎(chǔ)依賴分析
接下來，需要梳理一下 Vetur 的基礎(chǔ)依賴，這一步的作用是幫助我們理解 Vetur 可能用到哪些基礎(chǔ)技術(shù)，比如用到哪些工程化工具、怎么編譯、怎么檢查代碼等。
- Vetur 的 package.json 文件主要包含三類信息：
- VS Code 插件配置信息，大體上在上一節(jié)都有描述，這里不展開
工程化命令，核心有：
- watch：對應(yīng)命令為 rollup -c rollup.config.js -w ，由此可以推斷 Vetur 基于 Rollup 實現(xiàn)構(gòu)建
- compile：功能與 watch 相似
- lint：對應(yīng)命令為 tslint -c tslint.json **.ts ，由此可以推斷 Vetur 基于 tslint 實現(xiàn)代碼檢查
項目的 devDependencies 依賴，主要包含 typescript、tslint、rollup、vscode-languageclient、husky、mocha、vscode-test、prettier
那么，從這些信息我們基本可以推斷出如下信息：
- Vetur 使用 Rollup + typescript 等工具執(zhí)行構(gòu)建工作，按常理執(zhí)行 yarn watch 命令應(yīng)該就能啟動一個持續(xù)的構(gòu)建工作進(jìn)程
- Vetur 使用 tslint 實現(xiàn)代碼檢查，配合 huscky + prettier 完成格式化工作
- Vetur 使用 mocha + vscode-test 實現(xiàn)自動化測試
文件結(jié)構(gòu)
接著，還需要稍微展開看看 Vetur 的文件結(jié)構(gòu)，這一步能夠一定程度上幫助我們理解 Vetur 的代碼架構(gòu)及要素，推測各種特性是在什么位置實現(xiàn)的。Vetur 的文件結(jié)構(gòu)大致上如下：
- vetur
- ├─ .vscode
- │ ├─ ...
- ├─ build
- │ ├─ ...
- ├─ client
- │ ├─ client.ts
- │ ├─ commands
- │ │ ├─ ...
- │ ├─ grammar.ts
- │ ├─ ...
- ├─ languages
- │ ├─ vue-html-language-configuration.json
- │ ├─ ...
- ├─ scripts
- │ ├─ build_grammar.ts
- │ └─ tsconfig.json
- ├─ server
- │ ├─ .gitignore
- │ ├─ .mocharc.yml
- │ ├─ .npmrc
- │ ├─ bin
- │ │ └─ vls
- │ ├─ package.json
- │ ├─ rollup.config.js
- │ ├─ src
- │ │ ├─ ...
- ├─ syntaxes
- │ ├─ markdown-vue.json
- │ ├─ pug
- │ │ ├─ ...
- │ ├─ ...
- │ └─ vue.yaml
- ├─ test
- │ ├─ ...
- ├─ vti
- │ ├─ README.md
- │ ├─ bin
- │ │ └─ vti
- │ ├─ package.json
- │ ├─ rollup.config.js
- │ ├─ src
- │ │ ├─ ...
- │ ├─ tsconfig.json
- │ └─ yarn.lock
- ├─ tsconfig.options.json
- ├─ package.json
- ├─ ...
- └─ yarn.lock
其中，比較關(guān)鍵的有：
- client：VS Code 插件的入口代碼，package.json 文件中 main 字段會指向這個目錄的產(chǎn)物
- server：LSP 架構(gòu)中的 Server 端，上述 client 會通過 LSP 協(xié)議與這個 server 目錄通信
- syntaxes：Vetur 的詞法規(guī)則文件夾，內(nèi)部包含許多 JSON 格式，符合 TextMate 規(guī)則的詞法聲明
- languages：Vetur 提供的語言配置信息，規(guī)則比較簡單，了解作用即可，不必深入
- vti：按 vti/bin/vti 文件可以推斷，這里是 Vetur 的命令行工具，不在主流程內(nèi)可以先忽略
- docs：按內(nèi)容可以推斷這是 Vetur 的介紹文檔，此處可忽略
- build：構(gòu)建命令，package.json 文件的 script 命令有一些會指向這個目錄，可以忽略
- 一系列基礎(chǔ)配置文件，包括 tsconfig.json 、package.json 等，可先忽略
我們還可以繼續(xù)往下探索各個子目錄的內(nèi)容，但是注意淺嘗輒止即可，后面隨著源碼閱讀的深入，讀者對各個目錄的理解應(yīng)該會不斷迭代增長，現(xiàn)在沒必要花太多時間。
小結(jié)
回顧一下，我們首先學(xué)習(xí)了一些背景知識，之后花了一些時間分析項目的入口、基礎(chǔ)依賴、文件結(jié)構(gòu)，到這里我們基本上可以推斷出：
- Vetur 是一個語言插件，所以必然是使用 「詞法高亮、Language API、Language Server Protocol」 三類技術(shù)實現(xiàn)核心邏輯的，而 package.json 文件中的 contributes 配置項的內(nèi)容也恰好驗證了這一點
- 「詞法高亮」 相關(guān)的代碼集中在 syntaxes 文件夾
- 「Language Server Protocol」 相關(guān)的代碼集中在 client 與 server 文件夾
- 可以用 yarn watch 命令持續(xù)構(gòu)建，配合 F5 快捷鍵啟動調(diào)試
這些信息是后續(xù)分析源碼的必要條件，而這個過程跟學(xué)習(xí)一門新語言很類似，讀者可以回想一下最開始學(xué)習(xí) JavaScript 的時候，有經(jīng)驗的學(xué)習(xí)者不會一上來馬上深入諸如原型、變量提升、事件循環(huán)等語言細(xì)節(jié)，而是先以更高層、更抽象的視角學(xué)習(xí) JavaScript 語言的基本骨架，包括函數(shù)、循環(huán)語句、分支判斷語句、對象等，從而構(gòu)建起一個抽象的結(jié)構(gòu)化認(rèn)知，后續(xù)再慢慢填充細(xì)節(jié)，有點自頂向下的味道。
設(shè)定切入點
在對項目背景與結(jié)構(gòu)有基本了解之后，我們可以正式開始分析源碼了。首先，讀者要找到一個匹配自身狀態(tài)和需求的切入點，本質(zhì)上就是將大目標(biāo)拆解成一系列小目標(biāo)，將大問題拆解成一系列更具體的小問題，然后帶著具體問題更聚焦地去看代碼。
所謂切入點可以直接對標(biāo)到框架的具體功能，或者某些底層機(jī)制的實現(xiàn)上，以 Vetur 為例，它實現(xiàn)了諸多輔助開發(fā) Vue SFC 組件的特性，包括代碼補(bǔ)全、錯誤診斷、代碼高亮、跳轉(zhuǎn)到定義、hover 提示等等，這里面任意一個展開來都有大量可以挖掘的空間，如果從一開始就漫無目的瞎逛亂看那鐵定是看不出個所以然的，鑒于我的目標(biāo)就是想通過 Vetur 學(xué)習(xí) VS Code 插件的開發(fā)套路，所以選擇了一個看起來比較簡單的特性：「代碼補(bǔ)全」 作為第一個切入點，后續(xù)的學(xué)習(xí)經(jīng)歷證明這是一個非常合適的點，不復(fù)雜但是已經(jīng)能幫我窺見 Vetur 的核心工作機(jī)制，以此類推后面分析其它高級特性如代碼高亮、代碼補(bǔ)全等，基本上就是很輕車熟路的狀態(tài)了。
如果你有一些更明確的目的，比如解決某個具體的 bug，那你應(yīng)該會更容易 get 到當(dāng)下最需要做的事情;如果始終抓不到要點，那么建議先回到前面“了解背景知識”或“理解項目結(jié)構(gòu)”的步驟，繼續(xù)探索一些上下文信息，再試試問自己：我接下來到底應(yīng)該先了解哪些具體功能的實現(xiàn)邏輯?
記住，這并不是一錘子買賣，如果你在后續(xù)的分析過程中發(fā)現(xiàn)這個切入點變得越來越復(fù)雜，超出最開始的預(yù)期，不要有心理負(fù)擔(dān)，這再正常不過了，而且反而側(cè)面表現(xiàn)出你對問題域有越來越少的理解了，可以回過頭來重新調(diào)整目標(biāo)，找一個更小的切入點。
善用搜索引擎
定下切入點后，首先要做的不是打開代碼咔咔就干，而應(yīng)該首先試試在社區(qū)搜索相關(guān)的資料，畢竟自媒體時代了，很多開源框架的知識已經(jīng)被無數(shù)人吃透、捏碎、重組成各種維度的文章，順著這些文章的思路去理解源碼會比完全靠自己摸索效率高很多。
列舉幾種我常用的搜索渠道：
- 谷歌 and 百度一類的搜索引擎，體感上谷歌的搜索質(zhì)量會好很多，不過有一定的英語門檻
- 開源項目的官網(wǎng)、社區(qū)、wiki、github 等官方渠道，通常都會有比較不錯的資料
- Segmentfault、知乎、掘金、公眾號等垂直社區(qū)
- 國外的 Medium/StackOverflow 社區(qū)，質(zhì)量極高，很多大佬在上面活躍
假如搜了一通找不到答案，可以試試不同的關(guān)鍵詞組合，我經(jīng)常用的關(guān)鍵詞有：
- Xxx 源碼解析
- Xxx 原理
- 如何實現(xiàn) xxx
假如還是找不到，還可以試試換一個意思接近的關(guān)鍵詞，繞點彎路?？傊褪窍氡M辦法找到有用的，適合當(dāng)下問題的信息，幫助讀者更快更平滑地深入研究源碼，這一步對新手尤為重要。
當(dāng)前題目：如何閱讀源碼——以Vetur為例
文章起源：http://fisionsoft.com.cn/article/dhjegjh.html
