圖片無法正常顯示，請跳轉到 原文 查看
工作中的你，是不是手上做着后台系統項目，應對着做不完的需求，覺得做后台系統是個沒有技術含量的活，技術沒法提升，這么想或許你就錯了，如果能做以到以下幾點，不僅可以提高你的開發效率，還能讓你在組件抽象能力，項目架構能力等方面有很大提高，更能幫助你站在一個全局的高度思考問題，廢話不多說，我們看看到底應該怎樣做中后台項目。
一. 通用組件庫
首先，如果團隊的中后台項目不止一個，那么多個項目中一定有很多相同或相似的交互和功能，於是乎，搭建一個屬於自己團隊的組件庫就顯得很有必要了。
以一個VUE項目為例，我們開發一個項目，其實就是在開發一個個的組件。而這些組件可以如下這樣分類。
首先，非通用的組件，在各自的項目中去完成。
而通用組件，可以根據是否包含業務，分為強業務的組件和無業務組件。
其中非業務組件，已經有很多優秀的開源庫，像element，iView，我們可以拿來直接使用。有時候開源的組件無法滿足我們的需要，就需要自己造輪子。
其中強業務組件又可以按照是否將與服務端的數據交互部分封裝在組件內部，分為純前端組件和通用服務組件。比如獲取省市區，就可以封裝成通用服務組件，不需要每個項目再去重復開發，前后端同學都能節省時間。
哪些是需要抽象出組件的呢？這需要在工作中去發現和挖掘，當評審完一個需求時，要思考是否有之前做過的相同的形態或交互，是否有可以通用的部分能夠抽像，這樣思考久了，就能合理快速的對一個復雜項目進行模塊划分。在中后台系統中，能夠抽離出來通用的組件有很多，下面以一個最常見的列表頁來分析下。
可以先思考幾分鍾再繼續閱讀下面內容，如果你來開發，會抽象出哪些組件。
下面把頁面分為3部分（以下開源庫以element ui為例）
第一部分：查詢表單部分
開源庫提供的組件：Input 輸入框，Button 按鈕 ， Select 選擇器， DateTimePicker日期時間選擇器。
需要開發的組件
-
區間查詢，我們可以抽象出一個無業務通用組件 Range
-
城市選擇，可以將和服務端的數據交互封裝到組件內，抽象出一個通用服務組件 CitySelect，供所有項目直接使用。
-
打印組件 Print
-
將整個查詢表單部分抽象成組件 Search，組件支持更多查詢交互，重置交互，具體查詢條件可以通過slot傳入。
第二部分: 表格
開源庫提供的組件：Table 表格
需要開發的組件
-
脫敏操作，點擊查看顯示明文，可以抽象出通用服務組件 Encrypt。
-
查看更多的交互可以抽象出組件 MoreOption
第三部分：分頁
-
分頁組件 Pagnination, 開源組件庫提供。
除了這些，還可以把上面三部分看成一個整體，來抽象出一個頁面級別的組件，這個組件由3個組件組合而成： Search 查詢，Table 表格，分頁 Pagination組成，可以通過配置來控制是否需要查詢和分頁，來適應更多的業務場景。
列表頁組件分析（綠色框為要抽象的組件）
有了這些組件，開發效率一定會大幅提升！
有了組件還不夠，我們還需要添加通用的工具和方法到組件庫中，比如埋點上報，獲取url中參數等方法，這些都能夠復用，不需要每個項目中重復實現。
要開發一個組件庫，還有很多事要考慮，如何設計目錄結構，怎么做好工程化，設計開發以及review代碼的機制，版本更新機制，如何開發出優秀的組件，這些將在后續推送的文章中詳細介紹。
二.通用ui規范
為了達到可以定制主題的目的，組件樣式不能使用scoped，最好作為一個獨立的項目維護，可以通過gulp或webpack進行獨立編譯，和組件代碼的編譯分離開。為了樣式不互相污染，可以采用css的BEM規范。
可以使用 sass，less 創建一系列變量，作為樣式的基礎，在組件開發時，嚴格使用這些變量進行開發，由於組件庫是依賴開源庫為基礎進行二次開發的，可以直接使用組件庫的定義的變量，不滿足時再進行補充。
element ui定義的部分變量
需要定制主題時，只需改變變量值，重新編譯代碼即可。
三.構建腳手架
來了新項目你是怎么做的呢？ 自己搭建重新設計目錄結構？復制老項目刪除業務代碼？如果是后者還好，至少能保證統一的技術方案。如果有一個自己的腳手架，只需一個命令，就能輕松創建項目初始化文件，這樣變得優雅了很多。
使用腳手架有什么優點呢？首先項目通過命令直接生成，更優雅， 其次初始化的項目相同，保證了多項目的技術方案統一，便於維護。
搭建的腳手架可以基於現有的腳手架進行拓展，比如，使用vue可以基於vue-cli初始化的內容去進一步拓展。下面看看腳手架需要包含哪些內容。
1.引入自己搭建的組件庫
-
最大程度的復用代碼，通過現有組件實現快速開發
-
新的交互形態，直接抽象出來擴充到組件庫，所有項目復用
2.使用自己的一套統一樣式
-
樣式問題集中管理，改一次，所有項目受益
-
可以定制不同的主題
3.使用統一的mock方案
-
前端項目運行不需要依賴后端服務
-
開發時，直接使用mock數據進行調試，減少后期和后端的聯調時間
4.統一編碼規范和風格
所有項目使用一套eslint規范，可以編寫一套自己團隊的規范，也可以基於社區里主流的規范去調整，使它更適合你的團隊，現在主流的規范有Airbnb，Standard，Google幾種。
建一個團隊內部規范的npm項目，所有的項目安裝這個npm包，保證團隊代碼規范統一。
5.腳手架集成登錄，權限配置，路由配置，vuex，AJAX請求封裝，不同環境配置
把這些內容直接集成到腳手架中，這樣就可以最快速度進行開發。具體怎么搭建腳手架將在后面文章中推出......
時刻前端新鮮技術推送,定期前端精品文章分享，關注公眾號有驚喜
