同じ内容を繰り返し定義しないで、サービスプロトコルをプロファイルに抽出します.

作者: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

import PROTOCLS from  'protocols.json';
PROTOCOLS.SERVICE_PROTOCOL.id            

メリット

プロトコルの内容をプロファイルに抽出することで、これらのプロトコルに関するプロパティを異なるページで定義することを回避できます.DON'T REPEAT YOUR CODE

メンテナンスの2つの場所の定義は、1つのjsonファイルをメンテナンスするよりもリスクがあり、修正時に修正が漏れ、オンライン展示が統一されていないことを恐れています.

口座開設のトップページの弾窓でどのように私の新しい協議内容を追加しますか?

弾窓の内容は別のプロファイルから読み出され、異なる証券会社に対して異なるプロトコルの内容が表示されます.私の解決策は、プロファイルを読み込むときにprotocolsから処理することです.jsonが読み込んだ後、データpush(data)を新しいオブジェクトに送り、新しいオブジェクトを構成し、最後にページでレンダリングすればいいです.問題はこのように解決する.

まとめ

DON'T REPEAT YOUR CODE.コードが重複すると、重複する内容をどのように抽出するかを考えます.