避免重複定義一樣的內容，把服務協議抽離成配置文件

做者： totoro_MS

需求背景

這周有一個需求，須要在不一樣的頁面添加平臺服務協議，協議目前有2個，之後可能會有更多協議。添加協議的位置是在‘個人->關於’和‘開戶首頁的彈窗’。在‘開戶首頁的彈窗’這個地方會比較麻煩，由於這裏彈窗展現的券商的協議，我要新增平臺的服務協議進來。

解決方法

考慮到要在不一樣的頁面展現協議，在不一樣頁面展現的形式不同，因此沒作成組件的形式。可是又不想在每一個頁面都定義協議的標題和協議跳轉的url。因此個人解決方法是，把協議內容抽離成配置文件。以下

protocols.json
{
    "SERVICE_PROTOCOL": {
        id: 'USER_SERVICE',
        title: '用戶服務協議',
        url: 'https://xxxxx',
    },
    "PRIVATE_PROTOCOL": {
        id: 'PRIV',
        title: '用戶隱私協議',
        url: 'https://xxxxx',
    }
}

使用方法：在須要展現需求的頁面裏面把配置文件import進來

About.vue
<script>
import PROTOCLS from  'protocols.json';
PROTOCOLS.SERVICE_PROTOCOL.id這樣就能訪問到協議的內容
</script>

優勢

1. 經過把協議的內容抽離成配置文件，這樣我就避免了在不一樣的頁面都定義這些協議的相關屬性。DON'T REPEAT YOUR CODE
2. 維護兩個地方的定義比維護一個json文件有風險，就怕修改的時候修改漏了，致使上線展現不統一。

在開戶首頁的彈窗怎麼追加個人新協議內容

彈窗的內容是從另外一個配置文件讀出來的，針對不一樣的券商展現不一樣的協議內容。個人解決方法是，是在讀取配置文件的時候作一個處理，把從protocols.json讀出來後，把數據push(data)到一個新對象，這樣組成一個新的對象，最後在頁面上渲染出來就好。問題就這樣解決。

總結

DON'T REPEAT YOUR CODE。當代碼重複的時候，就想一下怎麼把重複的內容抽離出來。