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

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


再创建一个一样的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
<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'
  },

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


错字提醒
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,999评论 4 368
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,102评论 1 302
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,709评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,439评论 0 217
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,846评论 3 294
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,881评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,062评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,783评论 0 205
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,517评论 1 248
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,762评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,241评论 1 264
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,568评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,236评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,145评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,941评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,965评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,802评论 2 275