戦略パターンとは何ですか

それは一緒に、戦略モードで各アルゴリズムパッケージのアルゴリズムのセットを定義し、彼らはお互いを置き換えることができるように。戦略モードは、ポリシーモードとして知られている顧客の利用の変化、のアルゴリズムは独立してできます。戦略モードは、オブジェクトの行動パターンです。

戦略モード短所：

手数料および多型とその他の技術的思想の組み合わせを使用して、Strategyパターンは、効果的な条件select文の多様性を防ぐことができます
戦略モードがオープンクローズ原則のための完全なサポートを提供し、アルゴリズムが別々にパッケージされstrategy、切り替えが容易になって、理解しやすく、拡張しやすいです
戦略モードアルゴリズムはまた、このように多くの重複コピーペーストジョブを避け、システム内の他の場所で撮影することができます
戦略モードではコンテキストの組み合わせの使用は、私が押すために、より軽量な代替を継承しているアルゴリズムを実行する能力を持っている作るために委託し、

短所：

より困難な符号量を書き、これが最も直感的なの欠点であるが、それは本当に欠点ではない、すべての後に、コードのコード品質をどのくらいの量を測定することはできませんします
まず、ポリシーは、プログラムパターンやポリシーオブジェクトのような戦略の数が増加しますが、実際にそれがロジックの山の担当に入れてよりContent良く
第二に、我々は戦略モードを使用する必要があり、あなたはすべて理解しておく必要がありstrategyますが、すべて理解しておく必要があり、strategy適したを選択するように、との違いをstrategy。これは最低限の知識の原則に違反しています

今、私たちは、送信ボタンの前に、検証ルールは以下のとおりである、フォーム検証の要件があります。

アカウントは空にすることはできません
最小パスワード長さ7

最初に私はそう書くことができます

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="账号">
    <el-input v-model="form.account"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="textarea" v-model="form.passowrd"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">登录</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
export default {
  data(){
    return {
      form: {
          account: '',
          passowrd: '' 
        },
    }
  },
  methods:{
    onSubmit(){
      let {account,passowrd} = this.form;
      if(!account){
        this.$message.error('请输入账号')
      }else if(passowrd.length<7){
        this.$message.error('密码长度不能低于7位')
      }else{
        this.$message.success('表单校验成功')
      }
    }
  }
}
</script>

これは、符号化の非常に一般的な方法ですが、それは明らかな欠点があります。

すべてのルールをカバーするためにチェックするif文の多くが含まれています。
検証ルールが変更された場合、我々は変更する必要がonSubmit開閉の原則に違反して、検証ルールを
再利用性の違いアルゴリズム

私たちは、戦略パターンを使用してフォームの検証を再構築してみましょう

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="账号">
    <el-input v-model="form.account"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="textarea" v-model="form.passowrd"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">登录</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
export default {
  data(){
    return {
      form: {
          account: '',
          passowrd: '' 
        },
        strategies:{
          isNoEmpty(data, key){
            return new Promise((resolve,reject)=>{
              if(data[key]){
                resolve()
              }else{
                reject('请输入账号')
              }
            })
          },
          minLength(data,key){
            return new Promise((resolve,reject)=>{
              if(data[key].length<7){
                reject('密码最低不能少于7个字')
              }else{
                resolve()
              }
            })
          }
        }
    }
  },
  methods:{
    onSubmit(){
      let {strategies} = this;
      strategies.isNoEmpty(this.form,'account')
      .then(()=>strategies.minLength(this.form,'passowrd'))
      .then(()=>{
        this.$message.success('表单校验成功')
      }).catch(err=>{
        this.$message.error(err)
      })
    }
  }
}
</script>

シンプルの実現、のは、上記のコードの最適化を入れてみましょうelementフォーム検証

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="账号">
    <el-input v-model="form.account"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="textarea" v-model="form.passowrd"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">登录</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
export default {
  data(){
    return {
      form: {
          account: '',
          passowrd: '' 
        },
        rules:{
          account:[
            {methodName:"isNoEmpty",message:'请输入账号'}
          ], 
          passowrd:[
            {methodName:"isNoEmpty",message:'请输入密码'},
            {methodName:"minLength",length:7,message:'密码最低不能少于7位'}
          ],
        },
        strategies:{
          minLength(val,err,length){
              if(val.length<length){
                return err;
              }
          },
          isNoEmpty(val,err){
            if(!val){
              return err;
            }
          }
        }
    }
  },
  methods:{
    strategiesFun(data){
      let {strategies,rules} = this;
      let err = []
      for(let key in data) {
        rules[key].forEach(item=>{
          let _err = strategies[item.methodName](data[key],item.message,item.length);
          _err && err.push(_err);
        });
      }
      return new Promise((resolve,reject)=>{
        err.length ? reject(err[0]) : resolve()
      })
    },
    onSubmit(){
      this.strategiesFun(this.form)
      .then(()=>{
        this.$message.success('表单校验成功')
      }).catch(err=>{
        this.$message.error(err)
      })
    }
  }
}
</script>

例えば、1日には、新たな需要は、我々は唯一の必要な5桁の口座番号の長さよりも小さい必要としない追加rulesの行に検証ルールオブジェクトを追加します

rules:{
  account:[
    {methodName:"isNoEmpty",message:'请输入账号'},
    {methodName:"minLength",length:5,message:'账号最低不能少于5位'}
  ], 
  passowrd:[
    {methodName:"isNoEmpty",message:'请输入密码'},
    {methodName:"minLength",length:7,message:'密码最低不能少于7位'}
  ],
},

簡単な実装要素のフォーム検証ポリシーベースのモード

戦略パターンとは何ですか

私たちは、戦略パターンを使用してフォームの検証を再構築してみましょう

おすすめ