如何開發中後臺項目

圖片沒法正常顯示，請跳轉到 原文 查看
工做中的你，是否是手上作着後臺系統項目，應對着作不完的需求，以爲作後臺系統是個沒有技術含量的活，技術無法提高，這麼想或許你就錯了，若是能作以到如下幾點，不只能夠提升你的開發效率，還能讓你在組件抽象能力，項目架構能力等方面有很大提升，更能幫助你站在一個全局的高度思考問題，廢話很少說，咱們看看到底應該怎樣作中後臺項目。

一. 通用組件庫

首先，若是團隊的中後臺項目不止一個，那麼多個項目中必定有不少相同或類似的交互和功能，因而乎，搭建一個屬於本身團隊的組件庫就顯得頗有必要了。

以一個VUE項目爲例，咱們開發一個項目，其實就是在開發一個個的組件。而這些組件能夠以下這樣分類。

首先，非通用的組件，在各自的項目中去完成。

而通用組件，能夠根據是否包含業務，分爲強業務的組件和無業務組件。

其中非業務組件，已經有不少優秀的開源庫，像element，iView，咱們能夠拿來直接使用。有時候開源的組件沒法知足咱們的須要，就須要本身造輪子。

其中強業務組件又能夠按照是否將與服務端的數據交互部分封裝在組件內部，分爲純前端組件和通用服務組件。好比獲取省市區，就能夠封裝成通用服務組件，不須要每一個項目再去重複開發，先後端同窗都能節省時間。

哪些是須要抽象出組件的呢？這須要在工做中去發現和挖掘，當評審完一個需求時，要思考是否有以前作過的相同的形態或交互，是否有能夠通用的部分可以抽像，這樣思考久了，就能合理快速的對一個複雜項目進行模塊劃分。在中後臺系統中，可以抽離出來通用的組件有不少，下面以一個最多見的列表頁來分析下。

        能夠先思考幾分鐘再繼續閱讀下面內容，若是你來開發，會抽象出哪些組件。

下面把頁面分爲3部分（如下開源庫以element ui爲例）

第一部分：查詢表單部分

開源庫提供的組件：Input 輸入框，Button 按鈕 ， Select 選擇器， DateTimePicker日期時間選擇器。

須要開發的組件

1. 區間查詢，咱們能夠抽象出一個無業務通用組件 Range

2. 城市選擇，能夠將和服務端的數據交互封裝到組件內，抽象出一個通用服務組件 CitySelect，供全部項目直接使用。

3. 打印組件 Print

4. 將整個查詢表單部分抽象成組件 Search，組件支持更多查詢交互，重置交互，具體查詢條件能夠經過slot傳入。

第二部分: 表格

開源庫提供的組件：Table 表格

須要開發的組件

1. 脫敏操做，點擊查看顯示明文，能夠抽象出通用服務組件 Encrypt。

2. 查看更多的交互能夠抽象出組件 MoreOption

第三部分：分頁

1. 分頁組件 Pagnination, 開源組件庫提供。

除了這些，還能夠把上面三部分當作一個總體，來抽象出一個頁面級別的組件，這個組件由3個組件組合而成： Search 查詢，Table 表格，分頁 Pagination組成，能夠經過配置來控制是否須要查詢和分頁，來適應更多的業務場景。

列表頁組件分析（綠色框爲要抽象的組件）

有了這些組件，開發效率必定會大幅提高！

有了組件還不夠，咱們還須要添加通用的工具和方法到組件庫中，好比埋點上報，獲取url中參數等方法，這些都可以複用，不須要每一個項目中重複實現。

要開發一個組件庫，還有不少事要考慮，如何設計目錄結構，怎麼作好工程化，設計開發以及review代碼的機制，版本更新機制，如何開發出優秀的組件，這些將在後續推送的文章中詳細介紹。

二.通用ui規範

爲了達到能夠定製主題的目的，組件樣式不能使用scoped，最好做爲一個獨立的項目維護，能夠經過gulp或webpack進行獨立編譯，和組件代碼的編譯分離開。爲了樣式不互相污染，能夠採用css的BEM規範。

可使用 sass，less 建立一系列變量，做爲樣式的基礎，在組件開發時，嚴格使用這些變量進行開發，因爲組件庫是依賴開源庫爲基礎進行二次開發的，能夠直接使用組件庫的定義的變量，不知足時再進行補充。

element ui定義的部分變量

須要定製主題時，只需改變變量值，從新編譯代碼便可。

三.構建腳手架

來了新項目你是怎麼作的呢？ 本身搭建從新設計目錄結構？複製老項目刪除業務代碼？若是是後者還好，至少能保證統一的技術方案。若是有一個本身的腳手架，只需一個命令，就能輕鬆建立項目初始化文件，這樣變得優雅了不少。

使用腳手架有什麼優勢呢？首先項目經過命令直接生成，更優雅， 其次初始化的項目相同，保證了多項目的技術方案統一，便於維護。

搭建的腳手架能夠基於現有的腳手架進行拓展，好比，使用vue能夠基於vue-cli初始化的內容去進一步拓展。下面看看腳手架須要包含哪些內容。

1.引入本身搭建的組件庫

1. 最大程度的複用代碼，經過現有組件實現快速開發

2. 新的交互形態，直接抽象出來擴充到組件庫，全部項目複用

2.使用本身的一套統同樣式

1. 樣式問題集中管理，改一次，全部項目受益

2. 能夠定製不一樣的主題

3.使用統一的mock方案

1. 前端項目運行不須要依賴後端服務

2. 開發時，直接使用mock數據進行調試，減小後期和後端的聯調時間

4.統一編碼規範和風格

全部項目使用一套eslint規範，能夠編寫一套本身團隊的規範，也能夠基於社區裏主流的規範去調整，使它更適合你的團隊，如今主流的規範有Airbnb，Standard，Google幾種。

建一個團隊內部規範的npm項目，全部的項目安裝這個npm包，保證團隊代碼規範統一。

5.腳手架集成登陸，權限配置，路由配置，vuex，AJAX請求封裝，不一樣環境配置

把這些內容直接集成到腳手架中，這樣就能夠最快速度進行開發。具體怎麼搭建腳手架將在後面文章中推出......

時刻前端新鮮技術推送,按期前端精品文章分享，關注公衆號有驚喜