避免重复定义同样的内容把服务协议抽离成配置文件

作者：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。当代码重复的时候，就想一下怎么把重复的内容抽离出来。