改狀態什麼的，當然也要下指令啊（？

指令

npm help //指令列表
npm new //新增聊天室
npm change name //改名字
npm change style //改對話類型

我現在只有先做改對話類型，而且扣還亂七八糟，能動就好ＸＤＤ剩的會不會做還不知道ＸＤ

目前的做法是在input送出之後做內容判斷，如果內容包含npm開頭，就去判別指令內容這樣，這邊會用到正規表達式，其實很不熟這個，要用的時候才會查

MDN正規表達式

相關的函式

• test 回傳字串內是否含有指定的字元
• match 根據指定的字元回傳符合字串的陣列
• replace 取代符合的字串

可以開一個function專門做這個驗證

commandMatch(str) {
    let re = /^npm\s/
    return re.test(str)
}

也可以直接

/^npm\s/.test(str)

這邊用的正規表達式/^npm\s/，^是符合從起始開始，npm是我們指定要找的文字，\s是空白字元，這樣就可以判別輸入文字一開始是npm ，然後進入指令判斷

流程大概是下圖

判斷是指令之後，再判斷是不是change style

/change\sstyle/.test(str)

是的話，terminal區出現提示，下一次輸入的內容就會去改變對話樣式

我在data()裡多加三個資料去記一些狀態

codeClass: 'codeClassHtml', // 記目前樣式
otherStatus: false, // 記非正常對話發送訊息狀態
guildText: '', // 記terminal提示內容
codeClassMap: { // 目前有哪些對話樣式
  html: 'codeClassHtml',
  func: 'codeClassFunc'
},

修改templete放提示的區塊

<div
  class="commment"
  v-if="otherStatus" // 判斷非聊天狀態時出現提示區
>
  <p>{{ guildText }}</p> // 提示文字
</div>
<div class="msg_input">
  user:project $
  <input
    type="text"
    v-model="msg"
    @keyup.enter="keyHandler"
  />
</div>

接下來的扣有點亂ＸＤ
先讓我把文章趕出來
因為都是input之後的判斷，就會塞在keyHandler裡面

commandMatch(str) { // 判斷是不是指令
    let re = /^npm\s/
    return re.test(str)
  },
  commandList(str) { // 判斷是不是修改style的指令
    if (/change\sstyle/.test(inputStr)) {
      this.guildText = `input new msg style(html,func)` // Terminal要出現的提示文字
      this.otherStatus = true // 改成非聊天狀態
      this.msg = ''
    }
    // ...其他指令判斷
  },
  keyHandler() {
    if (!this.msg) return false // 判斷沒有輸入內容離開

    if (this.otherStatus) { // 判斷非聊天狀態
      if (this.codeClassMap.hasOwnProperty(this.msg.trim())) {
        this.codeClass = this.codeClassMap[this.msg]
      }
      this.msg = ''
      this.otherStatus = false
    } else {
      if (this.commandMatch(this.msg)) {
        // 判斷是不是要進入指令模式
        this.commandList(this.msg)
      } else {
        // 聊天模式發送訊息
        const msg = {
          msg: {
            name: this.loginData.memberName,
            text: this.msg,
            codeClass: this.codeClass, // 改成帶入data
            key: this.newKey()
          },
          channel: {
            channelId: this.channels.now.channelId,
            members: this.channels.now.members
          },
          memberId: this.loginData
        }
        this.$socket.emit('msg', msg)
        this.msg = ''
      }
    }
  },

然後就可以在input開始下指令啦

1. input change style
2. func
3. 成功

今天就做到這啦，上週末只休一天，沒有屯稿了覺得人森很艱難Orz

但寫指令這段真的覺得自己很有事，有沒有這麼無聊！！！ＸＤ