image.png
image.png
image.pngimage.png
image.png

源代码

  1. const EventEmitter = require('events')
  2. const readline = require('readline')
  4. var MuteStream = require('mute-stream') //静默流，字节进入，但它们不会出来
  5. var ms = new MuteStream()
  6. const { fromEvent } = require('rxjs') //它发出来自给定事件目标的特定类型的事件
  7. const option = {
  8.   type: 'list',
  9.   name: 'name',
  10.   message: 'select your name:',
  11.   choices: [
  12.     {
  13.       name: 'vue',
  14.       value: 'vue'
  15.     },
  16.     {
  17.       name: 'react',
  18.       value: 'react'
  19.     },
  20.     {
  21.       name: 'angular',
  22.       value: 'angular'
  23.     }
  24.   ]
  25. }
  27. function Prompt(option) {
  28.   return new Promise((resolve, reject) => {
  29.     try {
  30.       const list = new List(option)
  31.       list.render()
  32.       list.on('exit', answer => resolve(answer))
  33.     } catch (error) {
  34.       reject(error)
  35.     }
  36.   })
  37. }
  39. class List extends EventEmitter {
  40.   constructor(option) {
  41.     super()
  42.     this.name = option.name
  43.     this.message = option.message
  44.     this.choices = option.choices
  45.     this.input = process.stdin
  46.     this.output = ms.pipe(process.stdout)
  47.     this.rl = readline.createInterface({
  48.       input: this.input,
  49.       output: this.output
  50.     })
  51.     this.selected = 0 //选中第几个
  52.     this.height = 0
  53.     this.keyPress = fromEvent(this.rl.input, 'keypress').forEach(this.onKeyPress.apply(this))
  54.     this.haveSelected = false //表示是否选择完毕
  55.   }
  57.   //处理按键
  58.   onKeyPress(keyMap) {
  59.     console.log('keyMap', keyMap)
  60.   }
  61.   //渲染清屏
  62.   render() {
  63.     ms.unmute(this.output) //取消静默
  64.     this.clean()
  65.     this.output.write(this.getContent())
  66.     ms.mute(this.output) //继续静默
  67.   }
  69.   //清屏
  70.   clean() {}
  72.   //界面显示的值
  73.   getContent() {
  74.     if (!this.haveSelected) {
  75.       let title = '\x1B[32m?\x1B[39m \x1B[1m' + this.message + '\x1B[22m\x1B[0m\x1B[0m\x1B[0m\x1B[2m(Use arrow keys)\x1B[22m\n'
  76.       this.choices.forEach((item, index) => {
  77.         if (index === this.selected) {
  78.           if (index === this.choices.length) {
  79.             title += '\x1B[36m> ' + item.name + '\x1B[39m '
  80.           } else {
  81.             title += '\x1B[36m> ' + item.name + '\x1B[39m \n'
  82.           }
  83.         } else {
  84.           if (index === this.choices.length) {
  85.             title += '\x1B[36m  ' + item.name + '\x1B[39m '
  86.           } else {
  87.             title += '\x1B[36m  ' + item.name + '\x1B[39m \n'
  88.           }
  89.         }
  90.       })
  91.       this.height = this.choices.length + 3  //height 作为之后清屏的行数
  92.       return title
  93.     }
  94.   }
  96. Prompt(option).then(answer => {
  97.   console.log('answer', answer)
  98. })

image.png

处理按键

  1. ...
  3. //处理按键
  4.   onKeyPress(keyMap) {
  5.     const key = keyMap[1]
  6.     if (key.name === 'return') {
  7.       this.haveSelected = true
  8.       this.render()
  9.       this.colse()
  10.       this.emit('exit', this.choices[this.selected])
  11.     } else if (key.name === 'down') {
  12.       this.selected++
  13.       if (this.selected > this.choices.length - 1) {
  14.         this.selected = 0
  15.       }
  16.       this.render()
  17.     } else if (key.name === 'up') {
  18.       this.selected--
  19.       if (this.selected < 0) {
  20.         this.selected = this.choices.length - 1
  21.       }
  22.       this.render()
  23.     }
  24.   }
  27. ...

image.png

问题：追加内容，没有清屏

  1. const ansiEscapes = require('ansi-escapes')
  2. ...
  3.   //清屏
  4.   clean() {
  5.     const emptyLines = ansiEscapes.eraseLines(this.height) //擦除整行
  6.     this.output.write(emptyLines)
  7.   }

image.png

最后处理return时

  1. getContent(){
  2.   ...
  3.    const name = this.choices[this.selected].name
  4.       let title = '\x1B[32m?\x1B[39m \x1B[1m' + this.message + '\x1B[22m\x1B[0m\x1B[0m\x1B[0m\x1B[2m' + name + '\x1B[22m\n'
  5.       return title
  6. }

colse关闭静默

  1. ....
  2.   colse() {
  3.     ms.unmute(this.output)
  4.     this.rl.pause()
  5.     this.rl.close()
  6.   }

完整代码

  1. const EventEmitter = require('events')
  2. const readline = require('readline')
  3. const ansiEscapes = require('ansi-escapes')
  4. var MuteStream = require('mute-stream') //静默流，字节进入，但它们不会出来
  5. var ms = new MuteStream()
  6. const { fromEvent } = require('rxjs') //它发出来自给定事件目标的特定类型的事件
  7. const option = {
  8.   type: 'list',
  9.   name: 'name',
  10.   message: 'select your name:',
  11.   choices: [
  12.     {
  13.       name: 'vue',
  14.       value: 'vue'
  15.     },
  16.     {
  17.       name: 'react',
  18.       value: 'react'
  19.     },
  20.     {
  21.       name: 'angular',
  22.       value: 'angular'
  23.     }
  24.   ]
  25. }
  27. function Prompt(option) {
  28.   return new Promise((resolve, reject) => {
  29.     try {
  30.       const list = new List(option)
  31.       list.render()
  32.       list.on('exit', answer => resolve(answer))
  33.     } catch (error) {
  34.       reject(error)
  35.     }
  36.   })
  37. }
  39. class List extends EventEmitter {
  40.   constructor(option) {
  41.     super()
  42.     this.name = option.name
  43.     this.message = option.message
  44.     this.choices = option.choices
  45.     this.input = process.stdin
  46.     this.output = ms.pipe(process.stdout)
  47.     this.rl = readline.createInterface({
  48.       input: this.input,
  49.       output: this.output
  50.     })
  51.     this.selected = 0 //选中第几个
  52.     this.height = 0
  53.     //fromEvent 第二个参数 所关注的事件名称
  54.     this.keyPress = fromEvent(this.rl.input, 'keypress').forEach(this.onKeyPress.bind(this))
  55.     this.haveSelected = false //表示是否选择完毕
  56.   }
  58.   //处理按键
  59.   onKeyPress(keyMap) {
  60.     const key = keyMap[1]
  61.     if (key.name === 'return') {
  62.       this.haveSelected = true
  63.       this.colse()
  64.       this.emit('exit', this.choices[this.selected])
  65.       this.render()
  66.     } else if (key.name === 'down') {
  67.       this.selected++
  68.       if (this.selected > this.choices.length - 1) {
  69.         this.selected = 0
  70.       }
  71.       this.render()
  72.     } else if (key.name === 'up') {
  73.       this.selected--
  74.       if (this.selected < 0) {
  75.         this.selected = this.choices.length - 1
  76.       }
  77.       this.render()
  78.     }
  79.   }
  80.   //渲染清屏
  81.   render() {
  82.     ms.unmute(this.output) //取消静默
  83.     this.clean()
  84.     this.output.write(this.getContent())
  85.     ms.mute(this.output) //继续静默
  86.   }
  88.   //清屏
  89.   clean() {
  90.     const emptyLines = ansiEscapes.eraseLines(this.height) //擦除整行
  91.     this.output.write(emptyLines)
  92.   }
  94.   colse() {
  95.     ms.unmute(this.output)
  96.     this.rl.pause()
  97.     this.rl.close()
  98.   }
  99.   //界面显示的值
  100.   getContent() {
  101.     if (!this.haveSelected) {
  102.       let title = '\x1B[32m?\x1B[39m \x1B[1m' + this.message + '\x1B[22m\x1B[0m\x1B[0m\x1B[0m\x1B[2m(Use arrow keys)\x1B[22m\n'
  103.       this.choices.forEach((item, index) => {
  104.         if (index === this.selected) {
  105.           //选择 则前面加>
  106.           if (index === this.choices.length) {
  107.             //最后一个不换行
  108.             title += '\x1B[36m> ' + item.name + '\x1B[39m '
  109.           } else {
  110.             title += '\x1B[36m> ' + item.name + '\x1B[39m \n'
  111.           }
  112.         } else {
  113.           if (index === this.choices.length) {
  114.             title += '\x1B[36m  ' + item.name + '\x1B[39m '
  115.           } else {
  116.             title += '\x1B[36m  ' + item.name + '\x1B[39m \n'
  117.           }
  118.         }
  119.       })
  120.       this.height = this.choices.length + 3
  121.       return title
  122.     } else {
  123.       const name = this.choices[this.selected].name
  124.       let title = '\x1B[32m?\x1B[39m \x1B[1m' + this.message + '\x1B[22m\x1B[0m\x1B[0m\x1B[0m\x1B[2m' + name + '\x1B[22m\n'
  125.       return title
  126.     }
  127.   }
  128. }
  130. Prompt(option).then(answer => {
  131.   console.log('answer', answer)
  132. })

总结：感觉学会了一种很高级的思想，以前不敢用class ，现在更加勇了。对代码开发也更有逻辑了