7招提升你的前端開(kāi)發(fā)效率

前言

前端工程師其實(shí)是一個(gè)工作很雜的職位，除了要負(fù)責(zé)切圖、寫(xiě)html/css/js外，還要解決一系列的瀏覽器兼容性、網(wǎng)頁(yè)性能優(yōu)化等問(wèn)題，所以提高前端工程師的開(kāi)發(fā)效率是勢(shì)在必行的，也是前端工程化的體現(xiàn)。

對(duì)于開(kāi)發(fā)效率，我個(gè)人理解是

開(kāi)發(fā)效率 = 新增代碼的效率 + 修改代碼的效率 + 維護(hù)代碼的效率

那么如何提高前端開(kāi)發(fā)效率便可以按照前端工程化的理念來(lái)進(jìn)行劃分。下面我就介紹下7個(gè)提高前端開(kāi)發(fā)效率的方法。

前端工程化

方法

1.切圖

切圖是一個(gè)前端最基礎(chǔ)的技能，一般我們使用Photoshop或者FireWorks基本都能搞定設(shè)計(jì)師交付給我們的設(shè)計(jì)圖，但是要提高切圖效率的話就得使用一些訣竅了，比如利用PS里的動(dòng)作來(lái)實(shí)現(xiàn)“一鍵切圖”功能，具體可以看我的這篇文章：www.cnblogs.com/luozhihao/p… ，這里除了切圖外還介紹了其他的實(shí)用方法和工具。

2.編碼

對(duì)于編寫(xiě)代碼部分我們首先要找到一款合適自己的IDE工具，建議不要使用Notepad++或者Dreamweaver，這些工具已經(jīng)不符合前端潮流了，無(wú)法讓自己優(yōu)雅地敲代碼。這里我主要推薦Sublime Text、Atom或者Webstrom，因?yàn)樗鼈兂巳诵曰慕缑婧椭С执蠖鄶?shù)語(yǔ)法的高亮外，還可以安裝各種各樣的插件來(lái)拓展你的IDE工具，下面我主要介紹幾款Sublime Text提高開(kāi)發(fā)效率的插件：

其中Emmet是用于快速編寫(xiě)html/CSS的，比如輸入 ul>li 后按下tab鍵便可以生成一個(gè)ul標(biāo)簽里面包含一個(gè)li標(biāo)簽，其官方文檔為：docs.emmet.io/cheat-sheet…

JSFormat用于格式化JS；CSScomb用于對(duì)樣式屬性進(jìn)行一鍵排序；HTML-CSS-JS Prettify可以一鍵規(guī)范我們的HTML/CSS/JS，甚至JSON格式；SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用于調(diào)用本地調(diào)色板功能。這些工具都非常實(shí)用，一定程度上可以提高我們的編碼效率。

3.自動(dòng)化

說(shuō)到提高開(kāi)發(fā)效率，這里不得不提一些前端的自動(dòng)化工具，畢竟前端自動(dòng)化是目前及未來(lái)的趨勢(shì)，能夠很大程度上縮減前端不必要的工作量，使我們能夠?qū)Ｗ⑶岸吮旧怼?/p>

前端自動(dòng)化

這里我們可以使用NPM來(lái)管理我們的項(xiàng)目包文件；利用webpack來(lái)打包壓縮我們的代碼；利用Node.js來(lái)實(shí)現(xiàn)構(gòu)建本地服務(wù)器；利用Karma、Jasmine來(lái)測(cè)試我們的前端代碼。

用好前端自動(dòng)化工具可以幫助我們處理很多瑣碎的事情，比如一鍵壓縮代碼、圖片，一鍵合并JS，檢測(cè)文件更新等。

4.模塊化

隨著web2.0時(shí)代的到來(lái)，Ajax技術(shù)得到廣泛應(yīng)用，前端代碼日益膨脹，而前端模塊化能夠方便我們對(duì)項(xiàng)目代碼的維護(hù)，進(jìn)行按需加載，從長(zhǎng)遠(yuǎn)角度來(lái)看對(duì)我們提高項(xiàng)目的開(kāi)發(fā)效率同樣大有益處。

在ES6出來(lái)之前應(yīng)該說(shuō)前端代碼本身不具備實(shí)現(xiàn)模塊的功能，我們必須要使用一些模塊化加載器來(lái)實(shí)現(xiàn)，比如RequireJS、SeaJs等。而隨著ES6的普及，目前像RequireJS、SeaJs這樣的工具已經(jīng)沒(méi)有存在的必要了。所以在基于ES6的開(kāi)發(fā)環(huán)境下我建議使用ES6的模塊化功能來(lái)實(shí)現(xiàn)我們的前端模塊化。

前端模塊化

5.組件化

前端組件化的概念也是由來(lái)已久，我們可以通過(guò)將我們的代碼劃分成不同組件來(lái)實(shí)現(xiàn)功能公用，一個(gè)同樣的功能我們可能不用再次編寫(xiě)相同的代碼，同時(shí)也可以提高前端代碼的可維護(hù)性和清晰度。以下是目前流行的前端框架Vue的單文件組件的概念圖：

前端組件化

我們可以將公用的組件抽離，將大組件拆分成小組件的形式實(shí)現(xiàn)前端組件化，組件與組件之間可以存在父子關(guān)系，也可以存在兄弟關(guān)系。在Vue的單文件組件中，一個(gè)組件包含了其HTML、CSS、JS的代碼片段。

6.前后端分離

我曾經(jīng)寫(xiě)過(guò)一篇關(guān)于前后端分離的文章《我們?yōu)槭裁匆獓L試前后端分離》，地址為：www.cnblogs.com/luozhihao/p… 。

前后端分離的項(xiàng)目對(duì)提升前端開(kāi)發(fā)效率非常有幫助，因?yàn)榍岸瞬辉傩枰笈_(tái)配置路由、搭建服務(wù)器環(huán)境、編寫(xiě)模板等，這樣一來(lái)前端的生產(chǎn)力就會(huì)得到很大程度的解放，但是前后端分離的項(xiàng)目有利也有弊，如下圖所示：

前后端分離

最終我們需要根據(jù)項(xiàng)目需求衡量利弊來(lái)決定是否使用前后端分離的模式。

7.規(guī)范與模式

團(tuán)隊(duì)協(xié)作離不開(kāi)編碼規(guī)范和開(kāi)發(fā)模式的幫助。遵循編碼規(guī)范文檔可以幫助我們?cè)趫F(tuán)隊(duì)開(kāi)發(fā)時(shí)提高合作開(kāi)發(fā)的效率。一個(gè)團(tuán)隊(duì)遵循一套編碼規(guī)范可以使每個(gè)人的代碼寫(xiě)出一個(gè)人的風(fēng)格，這樣團(tuán)隊(duì)間相互審查、測(cè)試、完善功能時(shí)會(huì)非常高效。下方是一些開(kāi)源的前端編碼規(guī)范文檔：

• codeguide.bootcss.com/

• tguide.qq.com/main/index.…

• cssguidelin.es/

• github.com/adamlu/java…

除了編碼規(guī)范我們?cè)陂_(kāi)發(fā)時(shí)經(jīng)常會(huì)沿襲了一些已經(jīng)存在的模式來(lái)解決問(wèn)題，比如當(dāng)用JS編寫(xiě)彈框時(shí)我們往往會(huì)用到單例模式，用CSS編寫(xiě)動(dòng)畫(huà)時(shí)直接套用動(dòng)畫(huà)的常用屬性等，我們不再需要從頭開(kāi)始思考某一個(gè)功能的實(shí)現(xiàn)，這就是模式帶來(lái)的意義。

結(jié)語(yǔ)

當(dāng)然除了以上7點(diǎn)，對(duì)于前端來(lái)說(shuō)需要提高開(kāi)發(fā)效率的地方還有很多，可謂任重而道遠(yuǎn)。只有將前端無(wú)序、繁雜的操作組織起來(lái)，利用工具簡(jiǎn)化、規(guī)范前端流程，才能實(shí)現(xiàn)項(xiàng)目構(gòu)建、開(kāi)發(fā)、維護(hù)的一體化。希望本文能夠給初識(shí)前端的同學(xué)帶來(lái)啟發(fā)并付諸實(shí)踐。