如何快速了解一個新的前端項目？

在接受一個新的項目后，要想快速了解它，就需要一種抽象思維進行剝繭抽絲，遵守項目搭建的基本規律，猶如庖丁解牛，游刃有余。 以達到可能給快速跟上團隊成員的節奏進行開發。下面我就給大家總結一下，拿到一個新的前端項目后，如果進行解牛。這些思路可以延伸到其他項目，java，python，php。正所謂一法通，萬法通。讓我們開始吧。

庖丁解牛 游刃有余

梳理數據流轉

數據流轉指的是用戶頁面上的表單數據是創建的，獲取表單數據后，調用了什么方法，做了什么驗證，攔截，調用的那個http庫發起的xhr請求，以及如何后端返回值的統一攔截，這是從用戶到服務端的數據流轉。還有就是從服務器獲取數據渲染到用戶頁面上這個流程，期間也會調用很多方法。大多數項目都會封裝一個http請求的統一處理方法。

那么熟悉這一塊有什么用處那？http請求幾乎是每個功能需求都需要用到的，將表單數據提交到服務端，從服務端查詢數據顯示到頁面上。是再平常不過的功能。如果你不了解這個數據是怎么流轉的，數據如何從一個方法到另一個方法的，對數據做了那些處理，那么你在做功能時會就會遇到很多問題。

如果遇到了使用vuex，或者Mobx，redux，dva，React Hooks， 這種狀態管理庫，一時間看不明白，最好的辦法是對照著官方一起看,然后自己在模仿著現有的功能做一個增刪改查。

路由的映射，跳轉

路由的調整，路由的映射，這部分也是比較重要的，但基本上，路由庫就那么官方的幾個，稍微看一下就能了解其用法，vue-router， React-Router。這部分不算難。需要注意的是路由守衛，攔截，這部分代碼，還有菜單的配置。如果分配給你一個功能，很有可能需要配置一個新的菜單。有時候你明明按照現有的路由配置了一個新的路由，但就是無法顯示在菜單里，這個時候就要通讀一下有關路由邏輯處理的代碼了。

每個目錄的作用

目前的前端項目大部分都是使用腳手架來生成的，所有目錄一般都會大同小異。 但也有一些例外，比如我之前接觸的rancher-ui這個項目，使用ember.js腳手架搭建，剛接觸時真是讓我苦惱了幾個小時。

根據URL快速找到對應的組件

這個技能是必備，而且收益最快的，試想一下，你剛入職二天，領導讓你改一個頁面的bug，bug上指定了是那個頁面，路徑也給你了，這個時候就需要你更加url快速定位到問題所在的組件。有時路由是一層套一層， 組件也是一層套一層。

那么如何快速找到想要的組件那？ 簡單的辦法是使用程序員超神技能 全局搜索

在vscode中 CTRL + SHIFT + F 即可打開全局搜索框。搜索關鍵詞一點要找一些有特別的，越獨特越好，最好全局唯一。 此外有些做了國際化的項目，直接搜頁面的字段只能搜到國際化配置文件，這個時候就要再用配置文件做第二次搜索了?？梢韵拗埔恍┧阉魑募?。比如在 .vue 中搜索。

公共組件

在開始一個任務之前最好了解項目中有哪些公共組件了，避免重復造輪子，和前輩們寫的不一致。能夠省下不少時間。

package.json 這個文件里面顯示了當前項目使用了那些js包，看了這個文件的內容就知道是什么技術棧了，以及使用技術。 一些用的多的核心包要多去查詢文檔，走在前面。 不要等到用到的時候再去學，比如用到了很多echarts圖表，那就echarts文檔刷起來。

剛開始接觸項目時，需要在短時間里掌握很多知識，這些知識可能但是理解了，或者當時不理解。 而這些得到的知識點，或者疑惑點，盡量都要記錄下來。以備查閱。在學習rancher-ui這個項目的時候， 文字記錄這個習慣確實幫了我很多。而且這些東西沉淀起來，以后可以教導新人，這樣一做績效就上去了，也樹立了在新人中的高大的形象。

一般成型的團隊都有一些沉淀的文檔，像代碼約定，規范，提交規范。多讀兩遍。

第一天下班前可以把自己的疑惑向自己的前輩，或者組長請教。說一下自己的見解。給組長留下一個好的印象，也讓他知道你對項目了解的程度。有哪些方面需要他的幫助。

NAT web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。