Vue實戰(zhàn)—從目錄結(jié)構(gòu)談可擴展項目架構(gòu)設(shè)計

yankeys 發(fā)布于2019-08-23 16:54 / 2740人閱讀

摘要：好的項目代碼結(jié)構(gòu)會大大提升項目的維護性和可擴展性。多說無益，我這里直接給大家一個示意圖，大家可以按照我給的這個項目結(jié)構(gòu)組織項目。你連文件目錄都設(shè)計不好，我拿什么相信你能設(shè)計出來可擴展的程序

很多人都會用項目腳手架，也會跑hello world，然后再寫寫簡單的todolist。但是再往下深入就難了。比如很多教程和老師都會說，大家要多問一個為什么。其實我想說多問你妹啊。我都不知道問為什么怎么多問？！比如如果我不說，很少有人會去思考和研究為什么vue的項目目錄要如此設(shè)計，這么做好處。

先不說說別的，我們先看看vue的目錄，一圖抵萬言，不墨跡。

好的項目代碼結(jié)構(gòu)會大大提升項目的維護性和可擴展性。同時我們可以提供友好的說明，以便其他成員理解項目和快速定位。

其實有一點比較重要，就是公共組件、工具等同類的文件，放置一起維護會比較好。而且還有個小技巧，我們可以在搭建項目的時候，在 README.md 里面描述下該項目下的代碼和文件結(jié)構(gòu)。

多說無益，我這里直接給大家一個示意圖，大家可以按照我給的這個項目結(jié)構(gòu)組織項目。

這里我強調(diào)兩點，

1.第一點注意每一個組件的大小寫。

2.注意每個組件所用到的圖片的位置。

很多人寫組件的時候被命名或者大小寫或者分隔符弄的暈頭轉(zhuǎn)向，這里我就說說代碼規(guī)范。

代碼規(guī)范其實是團隊合作中最重要的地方，使用相同的代碼規(guī)范，會大大減少我們接手別人代碼時候臥槽的次數(shù)。

好的寫碼習(xí)慣很重要，命名習(xí)慣、適當(dāng)?shù)淖⑨專瑫Υa的可讀性有很大的提升。但是習(xí)慣是每個人都不一樣，所以在此之上，我們需要有這樣統(tǒng)一的代碼規(guī)范。

一些工具可以很好地協(xié)助我們，像 Eslint、Tslint等，加上代碼的打包工具協(xié)助，可以把一些規(guī)范強行標(biāo)準化，來獲取代碼的統(tǒng)一性。還有像 prettier 這樣的工具，能自動在打包的時候幫我們進行代碼規(guī)范化。

除了這些簡單的什么駝峰啊、全等啊、單引雙引等基礎(chǔ)的規(guī)范，其實更重要的是流程規(guī)范。最基礎(chǔ)的是改動公共庫或是公共組件的時候，需要進行 code review。通常我們使用 Git 維護代碼，這樣在合并或是版本控制上有更好的體驗。

但其實最重要的還是溝通，溝通是一個團隊里必不可少同時很容易出問題的地方，要學(xué)會溝通方式、表達方式。

很多人覺得命名了或者項目目錄了這些不重要，非得把復(fù)雜的功能實現(xiàn)出來才牛逼，這才是技術(shù)大牛或者腦袋上閃耀著光環(huán)的架構(gòu)師的范兒。其實，項目的維護所有程序員都需要，而且要想成為一個架構(gòu)師，你寫的代碼別人是否能看得，用著舒服，架構(gòu)是否健壯可擴展，這些是基本功。你連文件目錄都設(shè)計不好，我拿什么相信你能設(shè)計出來可擴展的程序？