關於
前言
前端工程師其實是一個工作很雜的職位，除了要負責切圖、寫html/css/js外，還要解決一系列的瀏覽器相容性、網頁效能優化等問題，所以提高前端工程師的開發效率是勢在必行的，也是前端工程化的體現。
對於開發效率，我個人理解是
開發效率 = 新增程式碼的效率 + 修改程式碼的效率 + 維護程式碼的效率
那麼如何提高前端開發效率便可以按照前端工程化的理念來進行劃分。下面我就介紹下7個提高前端開發效率的方法。
方法
1.切圖
切圖是一個前端最基礎的技能，一般我們使用Photoshop或者FireWorks基本都能搞定設計師交付給我們的設計圖，但是要提高切圖效率的話就得使用一些訣竅了，比如利用PS裡的動作來實現“一鍵切圖”功能，具體可以看我的這篇文章：www.cnblogs.com/luozhihao/p… ，這裡除了切圖外還介紹了其他的實用方法和工具。
2.編碼
對於編寫程式碼部分我們首先要找到一款合適自己的IDE工具，建議不要使用Notepad++或者Dreamweaver，這些工具已經不符合前端潮流了，無法讓自己優雅地敲程式碼。這裡我主要推薦Sublime Text、Atom或者Webstrom，因為它們除了人性化的介面和支援大多數語法的高亮外，還可以安裝各種各樣的外掛來擴充你的IDE工具，下面我主要介紹幾款Sublime Text提高開發效率的外掛：
其中Emmet是用於快速編寫html/CSS的，比如輸入 ul>li 後按下tab鍵便可以生成一個ul標籤裡面包含一個li標籤，其官方文件為：docs.emmet.io/cheat-sheet…
JSFormat用於格式化JS；CSScomb用於對樣式屬性進行一鍵排序；HTML-CSS-JS Prettify可以一鍵規範我們的HTML/CSS/JS，甚至JSON格式；SublimeTmpl可以快速新建HTML/CSS/JS檔案; ColorPicker用於呼叫本地調色盤功能。這些工具都非常實用，一定程度上可以提高我們的編碼效率。
3.自動化
說到提高開發效率，這裡不得不提一些前端的自動化工具，畢竟前端自動化是目前及未來的趨勢，能夠很大程度上縮減前端不必要的工作量，使我們能夠專注前端本身。
這裡我們可以使用NPM來管理我們的專案包檔案；利用webpack來打包壓縮我們的程式碼；利用Node.js來實現構建本地伺服器；利用Karma、Jasmine來測試我們的前端程式碼。
用好前端自動化工具可以幫助我們處理很多瑣碎的事情，比如一鍵壓縮程式碼、圖片，一鍵合併JS，檢測檔案更新等。
4.模組化
隨著web2.0時代的到來，Ajax技術得到廣泛應用，前端程式碼日益膨脹，而前端模組化能夠方便我們對專案程式碼的維護，進行按需載入，從長遠角度來看對我們提高專案的開發效率同樣大有益處。
在ES6出來之前應該說前端程式碼本身不具備實現模組的功能，我們必須要使用一些模組化載入器來實現，比如RequireJS、SeaJs等。而隨著ES6的普及，目前像RequireJS、SeaJs這樣的工具已經沒有存在的必要了。所以在基於ES6的開發環境下我建議使用ES6的模組化功能來實現我們的前端模組化。
5.元件化
前端元件化的概念也是由來已久，我們可以通過將我們的程式碼劃分成不同元件來實現功能公用，一個同樣的功能我們可能不用再次編寫相同的程式碼，同時也可以提高前端程式碼的可維護性和清晰度。以下是目前流行的前端框架Vue的單檔案元件的概念圖：
我們可以將公用的元件抽離，將大元件拆分成小元件的形式實現前端元件化，元件與元件之間可以存在父子關係，也可以存在兄弟關係。在Vue的單檔案元件中，一個元件包含了其HTML、CSS、JS的程式碼片段。
6.前後端分離
我曾經寫過一篇關於前後端分離的文章《我們為什麼要嘗試前後端分離》，地址為：www.cnblogs.com/luozhihao/p… 。
前後端分離的專案對提升前端開發效率非常有幫助，因為前端不再需要後臺配置路由、搭建伺服器環境、編寫模板等，這樣一來前端的生產力就會得到很大程度的解放，但是前後端分離的專案有利也有弊，如下圖所示：
最終我們需要根據專案需求衡量利弊來決定是否使用前後端分離的模式。
7.規範與模式
團隊協作離不開編碼規範和開發模式的幫助。遵循編碼規範文件可以幫助我們在團隊開發時提高合作開發的效率。一個團隊遵循一套編碼規範可以使每個人的程式碼寫出一個人的風格，這樣團隊間相互審查、測試、完善功能時會非常高效。下方是一些開源的前端編碼規範文件：
除了編碼規範我們在開發時經常會沿襲了一些已經存在的模式來解決問題，比如當用JS編寫彈框時我們往往會用到單例模式，用CSS編寫動畫時直接套用動畫的常用屬性等，我們不再需要從頭開始思考某一個功能的實現，這就是模式帶來的意義。
結語
當然除了以上7點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。只有將前端無序、繁雜的操作組織起來，利用工具簡化、規範前端流程，才能實現專案構建、開發、維護的一體化。希望本文能夠給初識前端的同學帶來啟發並付諸實踐。
本文對你有幫助？歡迎掃碼加入前端學習小組微信群：
