我们在做项目遇到这样的问题
如果创建了两个重复的东西该咋办
比如这里创建两个重复的标签该咋办
我们可以采用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
<script lang="ts">
import Vue from "vue";
import tagListModel from '@/model/tagListModel';
import {Component} from 'vue-property-decorator';
tagListModel.fetch()
@Component
export default class Labels extends Vue{
tags=tagListModel.data
createTag(){
const name=window.prompt('请输入标签名')
if(name){
try{tagListModel.create(name)}catch(error){
if(error.message==='duplicated){
window.alert('重复')}}
}
}
};
</script>
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'
},
这样别人在外面判断的时候,就不会错了,因为编辑器会提示