后臺(tái)項(xiàng)目做多了就會(huì)發(fā)現(xiàn)，在一個(gè)成熟的后臺(tái)項(xiàng)目中，列表頁面的結(jié)構(gòu)以及邏輯都是相對(duì)固定的，怎樣才能把重復(fù)的這部分提取出來呢

哪些需要提取

項(xiàng)目里用的 UI 庫是 Element UI 。一個(gè)列表頁從 UI 表現(xiàn)來看上至下通常包含這么幾部分：篩選欄，列表，分頁。在 vue 單文件組件中看的話，主要是模板區(qū)和 js 區(qū)，項(xiàng)目里列表頁一般是統(tǒng)一風(fēng)格，所以公共樣式不會(huì)寫在列表組件里。首先模板部分我認(rèn)為是不需要提取出來的，一方面是因?yàn)橛昧?element 表格組件，二次封裝會(huì)使傳值等變的更為復(fù)雜，另一方面是封裝過后在可讀性上有很大的損失

怎么封裝

由于只提取了公共的邏輯，模板部分未有提取，而且每個(gè)列表頁調(diào)用的 api 也不同，選擇采用 mixin 的方式，在 mixin 中定義公共的數(shù)據(jù)變量以及方法，在對(duì)應(yīng)的業(yè)務(wù)單文件組件中引入。mixin 的特性可以在 官方文檔 中了解，通過這種方式優(yōu)點(diǎn)是可以提取公共邏輯，并且可以在混入的地方通過新聲明覆蓋舊聲明的方式重寫；缺點(diǎn)是通過 mixin 引入的內(nèi)容在業(yè)務(wù)頁面是沒法直接看到的，這也是使用 mixin 的主要問題。在項(xiàng)目的協(xié)作開發(fā)，我們采用約定開發(fā)的方式，使用者要了解頁面所使用的 mixin ，這樣可以降低使用 mixin 導(dǎo)致出問題的幾率

成果

通過這樣的方式，將同類業(yè)務(wù)中相同的邏輯抽離出來，列表頁面的邏輯被簡化，后續(xù)的業(yè)務(wù)迭代中只需很少的代碼即可實(shí)現(xiàn)需求，公共的邏輯在 mixin 中統(tǒng)一維護(hù)，提高開發(fā)效率

總結(jié)

上述示例是稍復(fù)雜的應(yīng)用，若只是展示列表，只需重置 data 中的數(shù)據(jù)即可