小米平板5 Pro 12.4簡評：多專多能 兼顧影音娛樂的大屏利器
疫情帶來了網(wǎng)課，網(wǎng)課盤活了安卓平板，安卓平板市場雖然中途停滯了幾年，但好的一點就是停滯的這幾年行業(yè)又有了新的發(fā)展方向，例如超窄邊框、高刷新率、多攝鏡頭組合等，這就讓安卓
相信不少同學(xué)都有歐陽這種情況，年初的時候給自己制定了一份關(guān)于學(xué)習(xí)英語和源碼的詳細(xì)年度計劃。但是到了實際執(zhí)行的時候因為各種情況制定的計劃基本都沒有完成，年底回顧時發(fā)現(xiàn)年初制定的計劃基本都沒完成。痛定思痛，第二年年初決定再次制定一份學(xué)習(xí)英語和源碼的詳細(xì)年度計劃，毫無疑問又失敗了。
經(jīng)過多年的摸索，對于如何查看源碼歐陽終于有了一些自己的心得。有的同學(xué)還想問英語有什么心得沒，不要問，再問歐陽哭給你看。
網(wǎng)上有一種說法是從頭開始看，假如源碼是一個線團(tuán)，那么找到線團(tuán)的頭子，順著頭子向下捋就能將源碼了解的七七八八了。
這種方法對于查看小項目的源碼是沒有問題，因為小項目的分支邏輯不多，復(fù)雜度也不高，順著線團(tuán)的頭子向下捋確實能夠搞清楚整個項目。
但是對于vue這種大型項目就不適用了，大型項目里面的分支邏輯特別多，而且每個分支的復(fù)雜度也很高。大型項目的源碼就像是一棵樹，那么我們找的線團(tuán)的頭子只是這棵樹的根節(jié)點。
看源碼的時候你從樹的根節(jié)點向下走，下面有多個子節(jié)點。選了一個子節(jié)點接著向下走，結(jié)果發(fā)現(xiàn)這個子節(jié)點下面又有多個子節(jié)點。再次選了一個子節(jié)點向下走，結(jié)果發(fā)現(xiàn)還是有很多子節(jié)點，重復(fù)幾次后你可能就把自己給搞的頭暈了。
出現(xiàn)這個問題的原因是你查看源碼的時候沒有一個明確的目標(biāo)，因為大型項目的源碼分支流程是超級多的。沒有明確的目標(biāo)一頭扎進(jìn)源碼中就會迷失在源碼的海洋中，這個明確的目標(biāo)就是我們查看vue源碼要搞清楚的問題。
想想你平時接手一個不熟悉并且很復(fù)雜的新項目你會怎么辦？
我的做法是先查看項目的README.md，了解項目是如何運(yùn)行起來的。
然后再查看項目的目錄，對整個項目的結(jié)構(gòu)有一點了解。
接著就是找到了解項目的測試或者產(chǎn)品，讓他給我講講項目的大體流程和重要概念，這個時候可能聽不懂或者聽了就忘了，沒關(guān)系，有個印象就可以了。
最后就是接到項目的迭代需求，從需求對應(yīng)的代碼出發(fā)開始了解項目。等需求做得足夠多時，基本就將整個項目的代碼過了一遍，此時我們已經(jīng)完全接手這個項目了。
我們這里以vue舉例，vue其實也是一個普通的js項目。本質(zhì)上和我們的工作中接手的新項目沒什么區(qū)別，對于查看vue源碼我們也可以復(fù)用上面這個套路。
查看源碼的contributing.md文件，這個文件就像是我們項目中的README.md。開源項目希望更多的人參與進(jìn)來所以一般都會有個contributing.md文件。這個文件里面會教你源碼項目是如何跑起來，項目結(jié)構(gòu)是什么樣的，怎么參與進(jìn)來開發(fā)。
第二步和接手新項目是一樣的，查看vue源碼的目錄，讓你對整個vue源碼的結(jié)構(gòu)有一些了解。
到了第三步就有問題了，不可能叫尤大充當(dāng)測試或者產(chǎn)品的角色過來給我講vue的大體流程和重要概念吧？此時我們可以換個思路，網(wǎng)上有很多講解vue源碼的文章或者書籍。可以讓這些源碼文章或者書籍充當(dāng)測試和產(chǎn)品的角色。通過閱讀這些vue源碼文章或者書籍，你就能對vue的大體流程和重要概念有了初步的印象。
網(wǎng)上的文章都參差不齊，如何挑選出優(yōu)質(zhì)文章呢？
以掘金為例，你就在掘金上面去搜索vue源碼。然后找出時間最近的，點贊和收藏最多的文章，這樣找出來的文章基本都是優(yōu)質(zhì)且未過時文章（墻裂推薦歐陽的vue源碼文章）。
當(dāng)然如果你在之前沒有接觸過vue源碼，第一次看vue源碼文章或者書籍可能看不懂或者比較吃力。沒關(guān)系，我們這一步只是讓你對vue源碼有個初步的印象就可以了。
直到這一步之前我們所做的事情都是讓自己對源碼有個大致的印象，最終想要看得懂源碼還是得要自己上手去debug。
做項目時我們是通過不斷的做業(yè)務(wù)需求，從而了解整個項目。在vue源碼這里就是從一個你想要了解的具體問題出發(fā)，通過debug調(diào)試vue源碼將這個問題搞清楚。這個問題就是我們在查看源碼時的目標(biāo)，和這個問題不相關(guān)的源碼全部都忽略。
這種情況你帶著問題去debug查看源碼，此時的源碼對于你來說就不是一棵樹了，而是圍繞著這個問題的一條線。我們的目標(biāo)也很單純，只是將這條線上面的源碼搞清楚就行了。當(dāng)你把這個問題搞清楚了后，在你的腦子里面關(guān)于vue源碼就有一條線了。
還有一個進(jìn)階玩法，將“通過debug源碼把某個問題搞清楚的過程”用自己的話說出來，這就形成了一篇優(yōu)秀的源碼文章，歐陽的所有源碼文章都是這樣寫出來的。
每個問題在我們腦子里都是一條關(guān)于vue源碼的一條線，當(dāng)我們搞清楚足夠多問題時，這些線連到一起就形成了一棵vue源碼樹。
看到這里有的小伙伴就有疑問了，那么問題又從哪里來啊？
我們每天寫代碼就在用vue，vue提供了很多黑魔法，難道你對這些黑魔法不感興趣嗎？
舉個例子，在vue的文檔中有寫defineProps是一個宏函數(shù)。所以我們使用他的時候不需要從vue中import導(dǎo)入，那么你有沒有好奇過為什么他不需要從vue中import導(dǎo)入呢？
為了搞清楚這個問題，我們需要先找到線團(tuán)的線頭子。而這個線頭子毫無疑問就是@vitejs/plugin-vue插件，vue文件就是由這個插件處理的。給這個線頭子打上斷點，順著斷點向下走，只關(guān)心和defineProps相關(guān)的代碼。最終我們就找到在一個compileScript函數(shù)中，會將源代碼中的defineProps宏函數(shù)給remove掉，并且同時會生成一個props屬性，由于defineProps宏函數(shù)經(jīng)過編譯后已經(jīng)被remove掉了，所以就不需要從vue中import導(dǎo)入。
我們知道vue是一個編譯時和運(yùn)行時同時存在的框架，編譯時說白了就是代碼運(yùn)行在nodejs階段，運(yùn)行時代碼跑在在瀏覽器中。所以在debug源碼的時候有時是在編譯時進(jìn)行，有時是在運(yùn)行時進(jìn)行。
在接下來的文章中我們會給你講一些編譯時和運(yùn)行時debug源碼的小技巧，如果你有更好用的技巧歡迎在評論區(qū)留言。
想要在編譯時debug源碼，首先我們需要啟動一個debug終端。這里以vscode舉例，打開終端然后點擊終端中的+號旁邊的下拉箭頭，在下拉中點擊Javascript Debug Terminal就可以啟動一個debug終端。
圖片
在debug終端執(zhí)行對應(yīng)的啟動命令，比如yarn dev，斷點將會停留在我們打斷點的代碼處。此時會有這樣一排操作按鈕，如下圖：
圖片
上面的一排操作按鈕歐陽平時debug源碼時一般就使用了前四個，分別是：Continue（繼續(xù)）、Step Over（單步跳過）、Step Into（單步調(diào)試）、Step Out（單步跳出）。
不一定每個問題你都能找到對應(yīng)的線頭子，這時你就不知道從哪里開始打斷點了。比如還是defineProps宏函數(shù)，假如你不知道應(yīng)該從@vitejs/plugin-vue插件開始打斷點，那這種情況我們應(yīng)該怎么辦呢？
答案很簡單，在源碼中去搜索defineProps關(guān)鍵字，將搜索到的結(jié)果都打上斷點。然后啟動項目，發(fā)現(xiàn)代碼走進(jìn)了我們打的斷點中，如下圖：
圖片
此時左側(cè)的Call Stack調(diào)用棧就能派上用場了，他里面存了當(dāng)前函數(shù)的所有調(diào)用棧。比如當(dāng)前斷點是停留在processDefineProps函數(shù)中，從Call Stack調(diào)用棧我們就能知道這個函數(shù)就是由compileScript調(diào)用的，而compileScript函數(shù)又是由resolveScript函數(shù)調(diào)用的。并且可以通過點擊函數(shù)名就可以跳轉(zhuǎn)到對應(yīng)的函數(shù)中，并且恢復(fù)當(dāng)時的上下文。
整個Call Stack調(diào)用棧是一條線，我們要找的問題的線頭子就在這條線中。我們帶著問題去debug源碼的時候只需要將在Call Stack調(diào)用棧中，線頭子后面的一系列函數(shù)邏輯搞清楚就行了。
大家都知道vue文件經(jīng)過編譯后會變成js文件，那么如何找到編譯后的js文件給他打上斷點呢？
圖片
很簡單在network面板中找到對應(yīng)的請求，這里我想找的是index.vue文件。然后右鍵，在彈出的菜單中選擇第一個Open In Sources Panel。瀏覽器將會切換到source面板中，并且自動打開編譯后的index.vue文件，然后我們就可以在這個文件中給對應(yīng)的代碼打斷點。
關(guān)于Continue、Step Over這幾個按鈕，還有Call Stack調(diào)用棧都是和編譯時是一樣的，在這里我們就不贅述了，歡迎補(bǔ)充其他小技巧。
大型項目的源碼可以理解為是一棵樹，如果我們直接從樹的根節(jié)點開始去看源碼肯定會被源碼的各種分支邏輯搞的頭暈。此時我們可以換個思路，按照以下四步去查看源碼：
本文鏈接：http://www.tebozhan.com/showinfo-26-100987-0.html想看源碼但是無從下口怎么辦？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號