Vue プロジェクトで考えられる問題と解決策

他のフレームワークと比較して、Vue は修飾されていないコードを生成する可能性が高くなります。Vue のオプションは大きなオブジェクトであるため、js 自体の多くの検出は無効です。たとえば、関数が使用されていない場合は「グレー」になります。テンプレート内のコードプロンプトが減り、ミックスインが増えるなどです。修飾されていないコードに遭遇したとき、ほとんどの人が最初に反応するのは、誰がそんな悪いコードを書いたのかということです。実際、ほとんどの企業のほとんどの人が、少なくとも何らかの悪いコードを書いたことがあるのは普通のことです。修飾されたコードと修飾されていないコードがあり、問題はビジネスロジックを迅速に整理し、新しい要件を繰り返すときにバグが発生するのを防ぐ方法です。十分な余力がある場合は、部分的な再構築が実行され、Shishan コードは段階的に最適化されます。 ;

次に、フロントエンドプロジェクトが不適格である領域を確認します。おそらく次の領域です。

1. ディレクトリが乱雑である

src/
├── App.vue
├── api
├── components
├── constants
├── main.js
├── pages
├── router
├── services
├── utils
│   └── hash.js
└── views

上記のディレクトリを見てください。ビューとページは同様の意味を持ちます。どちらもルートに対応するページを参照します。API とサービスも同様です。どちらもバックエンドインターフェイスのカプセル化を保存します。これらのフォルダーの存在同時には、プロジェクトの初期段階ではそのようなフォルダーが存在しないことを意味します。標準では、誰もが独自の標準に従って開発するため、ページをビューで作成する人もいれば、ページで作成する人もいます。これらのディレクトリのうち、同様の意味を持つディレクトリは 1 つだけ保持されます。

その弊害は、作業を引き継いだ人が、別のページのロジックを見るために頻繁にフォルダーを切り替えることになり、今後自分のページを開発するためにどのフォルダーを使用すればよいか分からなくなり、悪循環に陥ることです。

2. コンポーネントは分割されていません

Vue は、テンプレート、スクリプト、およびスタイルを .vue ファイル内で結合します。これにより、当然のことながら、各 .vue ファイルの行数が非常に多くなり、保守が困難になります。Vue2 の最も明白な問題の 1 つは、数千行です。専門用語で言えば、数万行のコードであっても、単一責任の原則に準拠していません。コンポーネントは 1 つのことだけを実行する必要があり、関数は 1 つのロジックのみを処理し、残りのロジックは他の関数に任せるか、またはコンポーネント; これを常に念頭に置いてください。「SOLID」原則は、クソ山から遠ざかる最初の方法です。

3. 複雑な表現

<div
    class="files"
    :class="{ disabled: !isAllowRead && hasNotPassed && aaa && (bbb || ccc) }"
    @click="toDetail()"
  >
  <a/>
  <b v-if="!isAllowRead && hasNotPassed && aaa && (bbb || ccc)"/>
 </div>

このコードを見ると、無効状態を判断するために多数の演算子が使用されており、ロジックが不明確になっており、同様のロジックに遭遇した場合、以下のコンポーネント b で ctrl を押して cv エンジニアになったこれは正しいです。アプローチとしては、それを判断用の計算属性に組み込み、後で使用するロジックに従って計算属性を分割することです。

<div
        class="files"
        :class="{ disabled: isFileDisabled }"
        @click="toDetail()"
      >
      <a/>
      <b v-if="isFileDisabled"/>
     </div>
     <script>
         export default {
      
      
             // 此处省略...
             computed: {
      
      
              isFileDisabled(){
      
      
                 return !isAllowRead && hasNotPassed && aaa && (bbb || ccc)
              }
             }
         }
     </script>

もちろん、計算されたプロパティ isFileDisabled を複数のプロパティに分割することもできますが、これは主にその後の再利用に依存します。

4. 多数の重複ノード

 <div>
    <span v-for="item in textConfigs" :key="item.valueKey">{
   
   {
      response[item.valueKey]
    }}</span>
  </div>
  
  data() {
    return {
     textConfigs: [
        { label: "性别", valueKey: "name" },
        { label: "年龄", valueKey: "age" },
        { label: "性别", valueKey: "gender" },
        { label: "身高", valueKey: "height" },
        { label: "体重", valueKey: "weight" },
        { label: "爱好", valueKey: "habit" }
      ]
    };
  },

五、そうでない場合はスイッチ

if(!values.username){
    this.$message.error("用户名不能为空")
} else if(!values.password){
    this.$message.error("密码不能为空")
} else if(!values.phoneNumber){
    this.$message.error("手机号不能为空")
} else {
    this.submit();
}

上記のコードはセマンティクスが明確で、十分に書かれていないと言う人もいるかもしれません。ただし、さらに検証条件を追加する必要がある場合、開発者は特定のメソッドに侵入してコードを変更する必要があります。ストラテジモードを使用して最適化した後、検証条件を特定の判定ロジックから切り離すことができます。追加の検証条件が必要な場合は、配列を使用するだけで、直接変更できます。

const validators = [
  { message: "用户名不能为空", required: true, key: "username" },
  { message: "密码不能为空", required: true, key: "password" },
  { message: "手机号不能为空", required: true, key: "phoneNumber" }
];

export default {
  methods: {
    validator(values) {
      const result = validators.some(el => {
        if (el.required && !values[el.key]) {
          this.$message.error(el.message);
          return true;
        }
      });
      return result;
    },
    submit(values) {
      if (this.validator(values)) {
        return;
      }

      // ... 调用接口
    }
  }
};

6. ミックスインの間違った使用

// a.mixin.js
export default {
  data() {
    return {
      username: "",
      password: "",
      age: 18
    };
  },
  created() {
    this.fetchUserInfo();
  },
  methods: {
    fetchUserInfo() {}
  }
};

// b.mixin.js
export default {
    data(){
        return {
            height:'',
            weight:''
        }
    },
    created(){
        this.fetchBodyFat();
    },
    methods:{
        fetchBodyFat(){

        }
    }
}

// c.vue
const DEGREEMAP = {
    doctor:'博士'
}
export default {
    mixins:[a,b],
    data(){
        return {
            degree:DEGREEMAP.doctor
        }
    },
    created(){
        this.log()
    },
    methods:{
        log(){
            if(this.age < 30 && this.height>180 && this.degree===DEGREEMAP.doctor){
                alert("真牛！")
            }
        }
    }
}

ここでは、a と b でデータを提供し、最終的に c.vue で使用します。これにより、変数のカバレッジや出所不明などの問題が発生しやすくなります。vue2 を使用する必要がある場合、この状況は避けられず、コンポーネントの重複を減らすように努めるしかありません。ミックスイン内のデータの結合度。