源碼閱讀心得

1、看源碼的正確方法

改頁面、看源碼必定記得debugger,在debugger的過程一個個函數跳進去看，而後看每跳過一個每一個函數對應頁面效果的變化，這樣才能快速看懂不一樣函數的功能。

1.1 利用身邊好工具

雙屏模式下秒用控制檯窗口，第一個會把控制檯和頁面分紅2個頁面，雙屏很方便。

1.2 分塊看

1.2.1 如上面的頁面，就分爲左、中、右三部分去深刻細節看。

1.2.2 在控制檯中找要看的功能對應的關鍵詞class或者id；編譯器中全局搜索這個關鍵詞，以這個爲入口延伸拓展着去看一系列相關的函數和功能代碼，這樣看代碼富有樂趣，看的同時不斷來頁面調試下，邊調邊看效果。

經過斷點調試判斷本身想看的功能對應的函數對不對，有沒有運行。

1.2.3 有JS交互的地方，先找到對應的id，在控制檯/IDEA找對應函數功能實現。

如函數內部還嵌套了函數，那就去IDEA中找到對應內部函數


command+鼠標點進這個addAppBox（）函數中，看這個函數內部的方法。


點進去後再去瀏覽器打斷點看更深層次的信息。


注意：瀏覽器全局搜索command+alt+F

2、方法篇

看源碼以前先跑項目，看項目在頁面中的效果。從佈局最外層先找起，定位代碼片斷，只看對本身有用或者感興趣的代碼、避免一次看過多代碼影響思路。

1. 先把JS註釋掉，再看頁面狀態、判斷JS渲染頁面哪些部分的功能，再取消註釋。
   2.1 針對本身想學的效果來實現的HTML和CSS分離、在網頁開發者模式中找resource看HTML代碼時，附帶看完對應CSS效果。
   2.2 分析頁面框架佈局，將與本身想看功能有關的佈局對應的CSS分離出來到本身的文件下。
   3.1 對哪一個函數功能的實現感興趣就重點用斷點調試看對應的JS事件。
   3.2 在網頁對經過找id來找到對應事件的入口函數，在vs code中用ctrl+F來搜索
   3.3 衍生看相關的下一個函數，Command+shift+F全局搜索嵌套函數方法
2. 不斷運行函數，看每次運行的含義和出錯的地方，搞懂每個相關函數的做用和實現原理，不要抄代碼，要理解。
3. 在當前文件夾下複製黏貼當前看的html文檔做爲副本刪改測試各處代碼的功能，弄完了再複製一份用於創建本身的網頁。
4. 將與本身想看功能有關的佈局對應的JS分離出來到本身的文件下。

3、技巧篇

1．代碼儘量的在網頁開發者模式中看，敲DEMO再使用編譯器。
2．若是整個頁面都看，尤爲是公司大型頁面，嵌套太多css或js一時半會看不完的，也很差分離。切記只看本身想學的或者急用的功能。
3．改公司頁面以前，先把類似功能的源碼看懂了再去要修改的頁面中去編輯。（效率第一，思路理清了再編碼）
4．平時多看公司經常使用組件內容，弄懂組件代碼，再能快速閱讀要維護的網頁源碼。
5．花更少時間看懂源碼部分功能，重點是本身動手實現。
6．分塊看：把功能分開，從一次看2個功能一直到一次看所有功能去完善本身的邏輯思惟能力，每一個功能都要作到本身會寫纔算學會。
7．快速看：保證理解掌握了代碼寫法，一天看1個網頁確定學的很慢，會被前端要求的快速學習能力給淘汰。
8．保持時刻的危機感！多學多思多問！
9.源碼閱讀過程關鍵代碼黏貼到word上保存起來，往後作相應功能能夠拿出來看。可是好看每一個函數直接的關係時仍是把黏貼的代碼再扔到編譯器上看。由於編譯器的選取查找、切換上一個下一個也好理清思路。

4、斷點調試方法（3種功能一致）

4.1 debugger;在對應函數裏面寫debugger;

寫以後在頁面刷新，點擊頁面上對應事件的位置。如一個button按鈕，若是咱們的斷點位置打對了，那麼刷新頁面進入斷點調試模式後，再去頁面點擊對應位置控制檯的source就會跳轉到對應的debugger位置開啓斷點調試模式。

4.2 控制檯中找到對應的一行，最左側點擊一下出現紅點，也是打了斷點。一樣的辦法跳轉到頁面中。（@需瞭解編譯器打紅點調試的用法，本身百度一下，再來補充筆記@）

4.3 在控制檯source中找到想打斷點的代碼，最左側點擊一下也是打了斷點。後續一樣的辦法判斷。

注：有些函數是咱們進入斷點調試模式後再去頁面點擊一些地方，或拖拉等手動方式才觸發的效果。
經過這些辦法咱們能夠知道本身看的函數是否是本身在頁面上想看的位置。

5、調試bug的思路

1.js是否成功的執行進來；
2.js是否存在邏輯問題，變量問題，參數問題等；
3.若是上述都沒有問題，請仔細查看各類符號。

6、源碼閱讀實踐斷點調試

在文件中找到入口函數，在入口函數裏打斷點或手寫debugger;


大項目的代碼冗長，最好每更改一個地方都標記一下，最後跑項目調試成功以後再刪除註釋。

/*Sf Change Start*/ /*Sf Change End*/
/*Sf Commit Start*/ /*Sf Commit End*/

7、總結

在實際狀況下，咱們應養成拿到問題的第一時間，自行在腦海中排查問題，找到最有可能出現問題的點，如無法迅速排查出最重要的點，那就使用最麻煩可是很靠譜的方法，用 按鈕將整個和問題相關的js依次去執行一遍，執行的過程當中，本身跟着理清思路，同時注意下每一個變量的值以及選擇器選中的元素是否正確，這樣作一遍下來，bug都解決的差很少了！

大四實習中，若是寫錯的地方請你們留言指出，萬分感謝。轉載請註明出處。