建站
咨詢
售后
建站咨詢
新聞中心
此文并不是介紹項(xiàng)目的性能的如何優(yōu)化，而是介紹本人在工作中總結(jié)出來(lái)的一些開(kāi)發(fā)經(jīng)驗(yàn)，旨在通過(guò)改善開(kāi)發(fā)習(xí)慣，來(lái)提升工作效率。
成都創(chuàng)新互聯(lián)公司專注于沙市企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),成都商城網(wǎng)站開(kāi)發(fā)。沙市網(wǎng)站建設(shè)公司,為沙市等地區(qū)提供建站服務(wù)。全流程按需開(kāi)發(fā)網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
東北人有個(gè)詞兒特別有意思，叫埋汰。哈哈，不知道諸位老鐵們有沒(méi)有聽(tīng)你們身邊的朋友說(shuō)過(guò)。生活上，我們肯定是不想讓別人嫌棄我們埋汰。同樣，我們的項(xiàng)目也不應(yīng)該“埋汰”。制定一個(gè)優(yōu)秀的項(xiàng)目結(jié)構(gòu)，不僅能讓我們自己看的舒服，在日常的代碼維護(hù)也能夠給我提供極大的便利。所以，工作中總結(jié)了一些前端項(xiàng)目結(jié)構(gòu)的優(yōu)化小建議，獻(xiàn)給諸君。
1.項(xiàng)目目錄優(yōu)化
這個(gè)可能是很多人最不在意的地方了，但這里是影響你開(kāi)發(fā)視覺(jué)效果的關(guān)鍵。
正確利用static文件夾
static，意為靜態(tài)的，就是應(yīng)該將一些固定的資源放入static，比如vue-cli提供的static文件夾，將一些固定的資源，例如404圖片等圖片資源，存放地區(qū)碼的.js文件等。這些資源放在static中，不僅引入起來(lái)方便，而且static中的文件并不會(huì)被webpack處理，能夠進(jìn)一步節(jié)省打包時(shí)間。
應(yīng)該有一個(gè)util工具箱
util，工具，顧名思義這便是一個(gè)存放各種工具函數(shù)的文件夾。項(xiàng)目中難免會(huì)用到重復(fù)的處理函數(shù)，deepClone、floatCheck、moneyFormat等等。用的地方多了，我們每個(gè)頁(yè)面都復(fù)制一遍這些函數(shù)，顯然是不合理的。所以，我們就將這些公共的工具類函數(shù)，統(tǒng)一放到util文件夾下，這樣用的時(shí)候，直接引入即可，修改某一個(gè)函數(shù)的時(shí)候即可統(tǒng)一修改，又可以根據(jù)參數(shù)進(jìn)行特殊處理。
util中根據(jù)函數(shù)功能進(jìn)行合理分類.png
注意，util里面也應(yīng)該根據(jù)函數(shù)功能，進(jìn)行合理分類。所以你的util應(yīng)該是一個(gè)工具箱，而不是一個(gè)工具欄。
注重用文件夾進(jìn)行合理分類
我覺(jué)得閱讀我這篇分享的，肯定有而且還有不少人，在處理文件上存在下面這樣的問(wèn)題
將一個(gè)類別下面的文件全堆到一個(gè)文件夾里.png
可能上面這個(gè)例子還不算太糟糕，文件數(shù)量不多，并且命名格式一致。但如果文件數(shù)量很多，并且命名又不一致的話，可以想象到在進(jìn)行代碼維護(hù)時(shí)，光找目標(biāo)代碼都可能會(huì)花上一段時(shí)間。
所以，建議對(duì)文件像下面這樣按功能進(jìn)行細(xì)分(但要注意分割的細(xì)粒度，適可而止，不能劃分的過(guò)于細(xì)節(jié))，這樣我們?cè)诨剡^(guò)頭來(lái)review代碼時(shí)，根據(jù)文件夾就能鎖定我們的目標(biāo)文件的位置，快速的定位到目標(biāo)。不要怕文件夾多，能提高工作效率才是我們的最終目的。
按功能劃分.png
將請(qǐng)求和接口進(jìn)行統(tǒng)一管理
在每個(gè)項(xiàng)目里，我都會(huì)專門(mén)分出來(lái)一個(gè)這樣的文件夾。僅僅從名字也可以看出來(lái)，這是一個(gè)用來(lái)管理請(qǐng)求的文件夾。
image.png
我會(huì)將所有涉及到http請(qǐng)求的處理，統(tǒng)一放入到http.js中來(lái)管理。比如說(shuō)像下面這樣，將參數(shù)的處理，請(qǐng)求方式的處理等等，封裝在內(nèi)部。暴露出來(lái)一個(gè)方法，使用時(shí)只需要傳入相關(guān)接口、參數(shù)、請(qǐng)求方式即可，其他邏輯處理統(tǒng)統(tǒng)不需要考慮。
image.png
對(duì)于請(qǐng)求接口的管理，我覺(jué)得也有必要提一下。因?yàn)槲矣幸淮卧诮右粋€(gè)項(xiàng)目的時(shí)候，發(fā)現(xiàn)所有請(qǐng)求的api統(tǒng)統(tǒng)硬編碼寫(xiě)在了請(qǐng)求方法里。這真的是寫(xiě)時(shí)一時(shí)爽，修改找半天，費(fèi)了九牛二虎之力才完成了工作。
目前，我對(duì)請(qǐng)求接口的管理呢，是將所有接口都放到了一個(gè)統(tǒng)一的文件中。在調(diào)用相關(guān)接口的時(shí)候，直接從這個(gè)request.js文件中獲取，這樣做的好處首先就是避免了硬編碼這種很讓人忌諱的方式，同時(shí)在一個(gè)接口多出調(diào)用時(shí)，只需要引入一下就可以獲取到，再者就是維護(hù)起來(lái)特別的方便。
image.png
實(shí)際上，說(shuō)是維護(hù)起來(lái)方便，但這也是相對(duì)來(lái)說(shuō)的。當(dāng)接口數(shù)量達(dá)到某一個(gè)量時(shí)，將所有接口放到一個(gè)文件內(nèi)，就顯得有些臃腫(上面圖片的右側(cè)，可以看到密密麻麻的接口)，但這個(gè)問(wèn)題貌似也并不是那么關(guān)鍵。所以，這里具體怎么權(quán)衡可以參考一下上面的第3點(diǎn)。
config文件夾，將你的配置操作搬到這里
(注：上面說(shuō)的config文件夾泛指配置，并不是具體名稱，因?yàn)槭褂胏onfig這個(gè)名稱，很有可能會(huì)跟一些腳手架命名沖突)
無(wú)論應(yīng)用大小，項(xiàng)目的初始化總不能少吧。如果你需要配置很多的選項(xiàng)，像Vue中axios的初始化、請(qǐng)求攔截器、相應(yīng)攔截器，路由的初始化、全局鉤子設(shè)置，還有其他一些基礎(chǔ)的配置等等，我們總不能將這些東西統(tǒng)統(tǒng)放到main.js里面來(lái)吧。所以，就有了下面這個(gè)結(jié)構(gòu)
初始化和配置操作.png
將初始化操作、固定的枚舉值或者其他配置內(nèi)容，放到一個(gè)統(tǒng)一的位置中。這樣會(huì)方便我們?cè)谛薷呐渲脙?nèi)容，尤其是添加新配置的時(shí)候，我們直接就會(huì)有目標(biāo)的去添加相應(yīng)的內(nèi)容。
這里有一個(gè)點(diǎn)，比如項(xiàng)目中兩個(gè)文件都需要引入Vue，那么在每個(gè)文件中都寫(xiě)import Vue from 'vue'，這就會(huì)導(dǎo)致項(xiàng)目在打包時(shí)，會(huì)多引入一次Vue，增加了項(xiàng)目的體積。所以，推薦引入Vue時(shí)，暴露出來(lái)一個(gè)對(duì)Vue的引用export let _Vue = Vue，而不是反復(fù)使用import語(yǔ)法。
2.代碼習(xí)慣
組件命名:/area-selector/area-selector.vue對(duì)比/area-selector/index.vue
項(xiàng)目開(kāi)發(fā)的前期，我采用了前面這種寫(xiě)法，但是后來(lái)我改成了后面這種寫(xiě)法。原因很簡(jiǎn)答，組件文件夾命名已經(jīng)能夠?qū)⒔M件的功能充分表達(dá)出來(lái)了，所以組件完全可以不用重復(fù)這個(gè)描述。并且，使用index.vue這種風(fēng)格，在組件引入時(shí)，可以省略index.vue，如import areaSelector from '/xx/area-selector'。
3.代碼風(fēng)格
拒絕復(fù)制粘貼
魯迅說(shuō)，復(fù)制粘貼是萬(wàn)惡之源。沒(méi)錯(cuò)，在現(xiàn)在的我看來(lái)，復(fù)制粘貼確實(shí)是很多問(wèn)題的源頭。
在寫(xiě)相同的頁(yè)面或者寫(xiě)一份同樣的校驗(yàn)?zāi)_本時(shí)，相信有很多偷懶的老鐵都是直接咔嚓咔嚓的大段大段的復(fù)制粘貼，起碼我身邊就有不少這樣雞賊的同事。看起來(lái)做東西的速度挺快的，但實(shí)際上是在給自己挖坑，因?yàn)榈?**可能連你自己都不知道你的這段代碼到底用在了哪些個(gè)頁(yè)面。一朝需求改，代碼改到哭啊。
我在項(xiàng)目中，通常都會(huì)將需求進(jìn)行簡(jiǎn)單的分析一波。涉及到相同或者類似的內(nèi)容時(shí)，都會(huì)做一下標(biāo)記。那么在開(kāi)發(fā)的過(guò)程中，就會(huì)將公共的內(nèi)容提取出來(lái)，留著復(fù)用。即使出了bug或者調(diào)整了需求，都能夠做到一改皆改，兩個(gè)字效率。
注釋會(huì)讓你記起曾經(jīng)的代碼
關(guān)于代碼注釋，現(xiàn)在存在兩種完全不同的觀點(diǎn)。有相當(dāng)一部分關(guān)于代碼注釋的文章里就認(rèn)為“代碼***的注釋就是沒(méi)有注釋”，或者說(shuō)“代碼才是***的注釋”。但在我看來(lái)，純屬瞎扯淡。真的，不要對(duì)自己的記憶力太樂(lè)觀，自己現(xiàn)在思路非常清晰的代碼，過(guò)一段時(shí)間后，可能真的都回想不到自己當(dāng)初定義的這個(gè)方法到底是干嘛的了。所以，一定要給代碼寫(xiě)一份好的注釋。
《代碼大全》里介紹說(shuō)“一份好的代碼，注釋?xiě)?yīng)該占全部的2/5”。我寫(xiě)的代碼在處理一般問(wèn)題時(shí)，可能也就達(dá)到1/5這種程度，僅作為簡(jiǎn)單注釋。但在處理一些復(fù)雜邏輯的時(shí)候，寫(xiě)的注釋就會(huì)非常多。會(huì)將設(shè)計(jì)的數(shù)據(jù)格式，處理思路，技術(shù)坑等內(nèi)容，很詳細(xì)的記錄下來(lái)。在回頭修改的時(shí)候，根據(jù)注釋就能跳過(guò)很多不需要檢查的代碼。
我的部分代碼注釋.png
細(xì)節(jié)習(xí)慣
說(shuō)到習(xí)慣，這里介紹我的三個(gè)習(xí)慣：
- 合理使用 &&、|| 和三元操作符來(lái)代替if…else
比如將賦值語(yǔ)句修改了使用邏輯運(yùn)算符，就能讓我們的代碼精簡(jiǎn)很多!
- function getValue(value) {
- let res
- if(value){
- res = value
- } else {
- res = -1
- }
- return res
- }
修改為
- function getValue(value) {
- let res = value || -1
- return res
- }
內(nèi)部調(diào)用函數(shù)用“_”來(lái)標(biāo)記
比如將頁(yè)面初始化函數(shù)initPage()修改為_(kāi)initPage()，這樣做并沒(méi)有什么特別突出的好處，但是能讓你清楚哪些方法是代碼內(nèi)部調(diào)用的。
消除魔術(shù)字符串
所謂魔術(shù)字符串，就是指在代碼中采用硬編碼寫(xiě)入得字符串。這樣的魔術(shù)字符串通常會(huì)降低代碼的維護(hù)性，因?yàn)槟阈薷拇a一不小心就可能漏掉了某一個(gè)。
- //消除硬編碼
- let preText = 'hello'
- let nextText = 'world'
- if( xx ) {
- // console.log('hello') //魔術(shù)字符串 維護(hù)性差
- console.log(preText)
- } else {
- // console.log('hello world')
- console.log(preText +' '+ nextText)
- }
OK，以上就是想要分享的內(nèi)容。整片文章內(nèi)容并不是如何的新鮮，但卻都是我從實(shí)際的操作中體驗(yàn)出來(lái)的感悟。一部分是自己的總結(jié)，一部分是對(duì)耳熟能詳?shù)睦碚摰闹匦抡J(rèn)識(shí)。由衷之言，希望可以給你們帶來(lái)一些價(jià)值。
網(wǎng)站標(biāo)題：優(yōu)秀的開(kāi)發(fā)習(xí)慣，我有幾點(diǎn)小建議
分享路徑：http://fisionsoft.com.cn/article/dhecjci.html
