前端開發(fā)工程師怎樣能表現(xiàn)的不那么“新手沒經(jīng)驗(yàn)”、不那么“培訓(xùn)班出來(lái)的”

xzavier 發(fā)布于2019-08-01 16:25 / 1826人閱讀

摘要：最近看到知乎上面很多討伐培訓(xùn)班的問答文章，不禁想到了我和新手同事合作的一些經(jīng)歷其實(shí)你是培訓(xùn)班出來(lái)還是計(jì)算機(jī)科班畢業(yè)，沒人在乎，關(guān)鍵是你表現(xiàn)出來(lái)的一些問題切切實(shí)實(shí)的對(duì)你的同事或合作伙伴造成了很大困擾，而且這些問題集中在某一部分人身上顯露出來(lái)，

最近看到知乎上面很多討伐培訓(xùn)班的問答、文章，不禁想到了我和新手同事合作的一些經(jīng)歷；

其實(shí)你是“培訓(xùn)班出來(lái)”還是“計(jì)算機(jī)科班畢業(yè)”，沒人在乎，關(guān)鍵是你表現(xiàn)出來(lái)的一些問題切切實(shí)實(shí)的對(duì)你的同事或合作伙伴造成了很大困擾，而且這些問題集中在某一部分人身上顯露出來(lái)，才造成今天這種萬(wàn)眾討伐的局面；

下面分別來(lái)談?wù)勥@些問題以及解決方案：

1、html標(biāo)簽不閉合；
上面有五個(gè)

，下面只有四個(gè)

；
有一次我給新手同事指出這個(gè)問題，同事反駁我說html5是很智能的可以不閉合；我說那是針對(duì)
、，他很不以為然，繼續(xù)我行我素；后來(lái)代碼越寫越多，可能是下面某個(gè)div也沒閉合，在瀏覽器打開之后，該配對(duì)的div沒配對(duì)，不該配對(duì)的div配在了一起，布局全亂了，然后他開始挨個(gè)檢查，浪費(fèi)更多時(shí)間；
解決方案：sublime自帶的就有檢查閉合，如果沒閉合左側(cè)會(huì)出現(xiàn)一個(gè)小灰點(diǎn)，看到就趕緊解決了；

2、整天把新框架掛在嘴邊 (bootstrap reactjs angularjs nodejs)生怕別人不相信他簡(jiǎn)歷上的三年工作經(jīng)驗(yàn)；
有些新手為了顯得自己博學(xué)有經(jīng)驗(yàn)，整天說這個(gè)也會(huì)用那個(gè)也用過；其實(shí)這些新框架的使用范圍沒有那么廣；
我就見過一個(gè)新同事寫的bootstrap，一層套一層，本來(lái)用“col-md-6”柵格就能解決的，他卻連續(xù)套了五六層container panel最后卻用table布了局；把bootstrap用熟練能很大程度提高完成項(xiàng)目的效率和整體協(xié)調(diào)度，但是如果半生不熟亂用，會(huì)給后面的后臺(tái)對(duì)接及前端修改維護(hù)人員造成很大的麻煩；
解決方案：工作兩年之內(nèi)，只要能把原生js和jquery弄熟練就好了，別整天這個(gè)看一點(diǎn)那個(gè)蹭一下；我做前端五年了，一直用原生js和jquery，也沒見哪個(gè)項(xiàng)目掉鏈子；

3、class名稱連接，“減號(hào) -”和“下劃線”混用

有的新手寫完了一段代碼出錯(cuò)了自己查不出來(lái)讓我們幫著查，我們排除半天才發(fā)現(xiàn)class名稱減號(hào)和下劃線混用了；代碼少了還容易看出來(lái)，代碼多了真心不容易看出來(lái)呀，所以養(yǎng)成良好習(xí)慣吧；
解決方案：盡量用“減號(hào) -”（英文減號(hào)，不要弄成中文減號(hào)），不要用“下劃線”；

4、“utf-8”和“gb-2312”混用
很多新手喜歡從網(wǎng)上下載一些“無(wú)人維護(hù)的野代碼”，也不管編碼如何，直接就往項(xiàng)目里加；往小了說會(huì)讓一些中文字符顯示成亂碼；往大了說，有些大項(xiàng)目復(fù)雜頁(yè)面報(bào)錯(cuò)了，查很長(zhǎng)時(shí)間才能查出是你引入的部分編碼有問題，同事不罵你才怪；
解決方案：盡量上github上面找正規(guī)有維護(hù)的代碼，從star和issue上面就能看出來(lái)；

5、瘋狂使用內(nèi)置css

如果你是個(gè)后臺(tái)，著急項(xiàng)目上線，在html標(biāo)簽上加了幾個(gè)內(nèi)置style，這可以理解；
但是你一個(gè)前端開發(fā)工程師，一個(gè)項(xiàng)目全用的內(nèi)置style，你后期打算咋維護(hù)、咋復(fù)用？
解決方案：不要在html標(biāo)簽上出現(xiàn)style=""

6、見圖片就用img標(biāo)簽
css sprite雪碧圖在圖標(biāo)多的頁(yè)面能有效減輕http加載數(shù)；
這些道理都提了很多年了，有些新手還是全用img標(biāo)簽；
解決方案：“小圖標(biāo)”和“不經(jīng)常需要更換的圖片”請(qǐng)用 css sprite

7、瘋狂使用id調(diào)整css
有些新手的css文件里大片對(duì)應(yīng)id的#，一方面id不便于復(fù)用，另一方面寫js和后臺(tái)時(shí)id沖突了咋辦？后臺(tái)為了避免和你的id沖突，不得不加長(zhǎng)id的長(zhǎng)度，后臺(tái)能不罵你？
解決方案：class就完全夠用了，盡量不要用id調(diào)整css樣式

8、css和js全寫進(jìn)html中
這樣很不利于代碼復(fù)用；比如首頁(yè)有一個(gè)圖片輪播，列表頁(yè)也有一個(gè)一模一樣的圖片輪播，如果使用外鏈css、js，只用寫一次就夠了，如果寫到html中，兩個(gè)頁(yè)面的html都要分別寫一次，不利于代碼優(yōu)化，也不方便修改維護(hù)；
解決方案：使用外鏈css、js

9、濫用iframe
隨便一段普通文字都敢用iframe；
我做了五年前端，只在“插入視頻”、“添加百度搜索”時(shí)用過iframe；
解決方案：除非“后臺(tái)明確要求”或者“插入優(yōu)酷視頻時(shí)上面直接提供iframe代碼”，其他時(shí)候不要用這個(gè)標(biāo)簽；

前端工程師們，你們是否也有上面這些問題呢？如果有的話，盡早解決吧，別工作了好幾年還被誤認(rèn)為是新手培訓(xùn)班出來(lái)的，工資咋也漲不上去；