避免重复创建的一点小心得

我们在做项目遇到这样的问题
如果创建了两个重复的东西该咋办
比如这里创建两个重复的标签该咋办

再创建一个一样的tags

我们可以采用3种思路

丢出一个错误让用户自己改

这里我们在创建标签的create方法中

//tagListModel.ts
 create(name:string){
    const x=this.data as string[]
    if(x.indexOf(name)>=0){throw new Error('duplicated')}
    x.push(name)
    this.save()
    return true
  },

整一个重复的错误丢出来
然后在调用的时候

//labels.vue

try她，如果发现有这种问题就警告用户
但是我们通常不会返回一个error，这样不专业

返回一个值

返回值的时候有很多选择，最简单就是返回布尔

返回true/false

//tagListModel.ts
 create(name:string){
    const x=this.data as string[]
    if(x.indexOf(name)>=0){return false}
    x.push(name)
    this.save()
    return true
  },

但是这样的弊端就是会遇到很多问题，你不知道false是什么错

返回一个数字

//tagListModel.ts
 create(name:string){
    const x=this.data as string[]
    if(x.indexOf(name)>=0){return 1}
    x.push(name)
    this.save()
    return 0
  },

这里我们就当返回0是非重复，1则重复
但是这样不够好，因为久而久之就会出现不知道几代表啥的情况，可能注释更新不及时

返回一个字符串

//tagListModel.ts
 create(name:string){
    const x=this.data as string[]
    if(x.indexOf(name)>=0){return ‘duplicated}
    x.push(name)
    this.save()
    return 'success'
  },

这样的好处就是可以清晰的表达返回的值是啥，返回了什么，所以最后选用这个方法
然后在创建时判断一下就好

//labels.vue
  createTag(){
    const name=window.prompt('请输入标签名')
    if(name){
     const message=tagListModel.create(name)
      if(message==='duplicated'){
        window.alert('重复')
      }
    }
  }

但是我思考了一下，会不会有情况是我在model里面拼错单词，比如success写成sucess，然后外面就找不到
所以我去查了ts的文档，发现可以在type里面这样定义

//tagListModel.ts
type TagListModel= {
  create: (name: string) => 'duplicated' | 'sucess'
}
 create(name:string){
    const x=this.data as string[]
    if(x.indexOf(name)>=0){return ‘duplicated}
    x.push(name)
    this.save()
    return 'sucess'
  },

这样别人在外面判断的时候，就不会错了，因为编辑器会提示

错字提醒