7招提高你的前端開發效率

時間 2019-11-05

標籤提高前端開發效率简体版

原文原文鏈接

關於

首發地址：微信公衆號——前端呼啦圈（Love-FED）
個人博客：勞卜的博客
知乎專欄：前端呼啦圈

前言

前端工程師實際上是一個工做很雜的職位，除了要負責切圖、寫html/css/js外，還要解決一系列的瀏覽器兼容性、網頁性能優化等問題，因此提升前端工程師的開發效率是勢在必行的，也是前端工程化的體現。javascript

對於開發效率，我我的理解是css

開發效率 = 新增代碼的效率 + 修改代碼的效率 + 維護代碼的效率html

那麼如何提升前端開發效率即可以按照前端工程化的理念來進行劃分。下面我就介紹下7個提升前端開發效率的方法。前端

方法

1.切圖

切圖是一個前端最基礎的技能，通常咱們使用Photoshop或者FireWorks基本都能搞定設計師交付給咱們的設計圖，可是要提升切圖效率的話就得使用一些訣竅了，好比利用PS裏的動做來實現「一鍵切圖」功能，具體能夠看個人這篇文章：www.cnblogs.com/luozhihao/p… ，這裏除了切圖外還介紹了其餘的實用方法和工具。java

2.編碼

對於編寫代碼部分咱們首先要找到一款合適本身的IDE工具，建議不要使用Notepad++或者Dreamweaver，這些工具已經不符合前端潮流了，沒法讓本身優雅地敲代碼。這裏我主要推薦Sublime Text、Atom或者Webstrom，由於它們除了人性化的界面和支持大多數語法的高亮外，還能夠安裝各類各樣的插件來拓展你的IDE工具，下面我主要介紹幾款Sublime Text提升開發效率的插件：webpack

其中Emmet是用於快速編寫html/CSS的，好比輸入 ul>li 後按下tab鍵即可以生成一個ul標籤裏面包含一個li標籤，其官方文檔爲：docs.emmet.io/cheat-sheet…git

JSFormat用於格式化JS；CSScomb用於對樣式屬性進行一鍵排序；HTML-CSS-JS Prettify能夠一鍵規範咱們的HTML/CSS/JS，甚至JSON格式；SublimeTmpl能夠快速新建HTML/CSS/JS文件; ColorPicker用於調用本地調色板功能。這些工具都很是實用，必定程度上能夠提升咱們的編碼效率。github

3.自動化

說到提升開發效率，這裏不得不提一些前端的自動化工具，畢竟前端自動化是目前及將來的趨勢，可以很大程度上縮減前端沒必要要的工做量，使咱們可以專一前端自己。web

這裏咱們可使用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… 。
先後端分離的項目對提高前端開發效率很是有幫助，由於前端再也不須要後臺配置路由、搭建服務器環境、編寫模板等，這樣一來前端的生產力就會獲得很大程度的解放，可是先後端分離的項目有利也有弊，以下圖所示：