[命令行动画龟兔赛跑] Node 的语言基础 - JS（ES5/6/7/8）

2案例一： [龟兔赛跑] Node 的语言基础 - JS（ES5[6[7[8） - 图1

  1. 本节目标：【实现一个龟兔赛跑小动画】 - 没有金刚钻，不揽瓷器活，必要的 JS 知识是学习 Node 的第一板斧。

名词概念解释

  • JS 对 JavaScript 的简称，实际意义与 JavaScript 相同
  • JavasScript 通用叫法，代指实现了 ECMAScript 标准的任何语言版本
  • ES 对 ECMAScript 的简称，实际意义与 ECMAScript 相同
  • ECMAScript 欧洲计算机制造商协会 对 Javascript 语言制定的工业标准，随着时间推移版本不断更新，如 ES3/4/5
  • ES2/3/4/5 是语言标准的版本，ES2015/ES2016 是发布标准的年份称谓，如 ES2015/ES6 意义等同
  • ES.Next 代指下一个要推出的语言标准，它永远指向下一个，是动态的

1995 年网景浏览器发布 LiveScript，后来改名 JavaScript，再后来提交 JavaScript 到 ECMA 进行标准化，也就有了官方学名 ECMAScript，只是 ECMAScript 这个名字不怎么讨人喜爱，大家仍然习惯叫 JavaScript。

到如今已过去 20 多年了，按道理说，根据 JavaScript 语言进化的速度，到现在应该有至少十几个 ES 版本出来，然后并没有，原因是标准协会负责定标准，但实际执行标准实现（落地）的是浏览器厂商，每个厂商都夹带私货，对标准也不是全部认同，标准协会自己干活也不怎么接地气，甚至在 1999 年 ES3 ~ 2009 年 ES5 这个黄金十年是停滞不前的，并没有多少群众呼声大的特性加入标准，人生有多少个十年，也不能说它没干活，1999 年还是推出了 ES4，但太过激进这个版本就报废了，没有在厂商落地，直到 2009 年语言标准才有步入正轨，这个停滞的 10 年中标准协会以及厂商的撕逼内幕非常精彩，大家有兴趣可以去扒一扒。

Webpack 中用到的部分语法特性

在 Node 里面自 v6.14.4 之后，就支持了 99% 以上的 ES6 语法特性，在 v10.x 之后，也支持了几乎全部的 ES7/ES2016、ES8/ES2017、ES9/ES2018 的可用语法特性，我们主要关注 ES6/ES2015 中新增的语法特性和部分 ES7/8/9 的语法特性，在小册子我们会使用 Node v10.11.x 的版本来运行一些示例代码。

首先，给大家列一些 Webpack 中用到的语法特性，源码也都是从 Webpack 或者它依赖的模块中扒出来的，如果大家对这里面大部分特性看不懂的，建议参考如下资料系统学习荡平一下 Javascript 的入门门槛，再往下进入到我们的编码环节。

| 语法特性 | 示例 | | —- | —- | | 变量声明

{let 具有块级域，const 通常声明不可变变量} | ```javascript let debugId = 1000 const Compiler = require(‘./Compiler’)

  1.  |
  2. | 
  3.           模板字符串
  4.           <br />
  5.           <br />{字符串的简洁用法，可内嵌函数与变量}
  6.          | ```javascript
  7. let message = `* ${m.identifier()}`
  8. const ma = `${a.message}`

| | 箭头函数

{省略 function 的函数定义} | ```javascript const exportPlugins = (obj, mappings) => {}

  1.  |
  2. | 
  3.           解构赋值
  4.           <br />
  5.           <br />{从目标数组或对象提取特定值}
  6.          | ```javascript
  7. // 从 tapable 模块对象中提取 SyncHook 函数
  8. const {
  9.   SyncHook,
  10. } = require('tapable')

| | rest 参数与扩展运算符

{参数到数组与数组铺开为参数，可以看做互逆} | ```javascript // 多余参数转成一个数组 args[] function(name, …args) { // 把数组以 … 扩展为参数 this.hooks[name.replace(/**/)].call(…args) }

  1.  |
  2. | 
  3.           Symbol 对象
  4.           <br />
  5.           <br />{可生成一个独一无二的值，永不重复}
  6.          | ```javascript
  7. // 原始数据对象
  8. // 接收参数（可选）来生成一个独一无二的值
  9. const MAYBEEND = Symbol('maybeEnd')
  10. const WRITING = Symbol('writing')

| | Set 对象

{一种数据结构，可存任意数据类型，且保证值唯一} | ```javascript // 可接收一个可迭代对象作为参数，构造一个新的 Set 对象 const queue = new Set(this.groupsIterable) // 可接收空参数生成一个 Set 对象 const chunksProcessed = new Set()

  1.  |
  2. | 
  3.           Map 对象
  4.           <br />
  5.           <br />{哈希结构的键值对集合}
  6.          | ```javascript
  7. // 创建一个空集合，交给 fileTimestamps
  8. const fileTs = (compiler.fileTimestamps = new Map())

| | Promise 对象

{管理异步状态的对象，在某个时刻来回调返回异步执行结果} | ```javascript // fs 模块读出文件内容并转成 JSON // 把整个异步过程包装成一个 Promise 返回 return new Promise((resolve, reject) => { require(‘fs’).readFile(filename, (err, content) => { try { var update = JSON.parse(content) } catch (e) { return reject(e) } resolve(update) }) })

  1.  |
  2. | 
  3.           for ... of 循环
  4.           <br />
  5.           <br />{遍历循环所有成员}
  6.          | ```javascript
  7. // 遍历拿到所有该模块的依赖项
  8. for (const dependency of module.dependencies) {}

|

除了上面这些，还有 Class/Async Function/Generator Function 等等许许多多的特性，不再一一列举。

编程练习 - 实现一个命令行龟兔赛跑动画

我们来基于上面的知识结果，可以借助 chalk-animation 模块，来实现一个在命令行的进度条动画 - 龟兔赛跑，先看下效果：

2案例一： [龟兔赛跑] Node 的语言基础 - JS（ES5[6[7[8） - 图2

要实现这样一个效果，思路是很简单的，就是不断的去刷新当前的终端日志就可以了，所以本质上是把字符串按照我们计算的规则，每隔比如 1 秒钟，就刷新一下进度，至于龟兔，控制好它俩在的几个状态就行。

首先是起始状态：

  1. 兔子乌龟|..............................》

其次是兔子超越乌龟，并且兔子停下的状态：

  1. |......乌龟...................兔子.....》

再次是乌龟超越兔子时的状态：

  1. |.........................兔子乌龟.....》

最后是乌龟越过终点的状态：

  1. |.........................兔子.....》乌龟

那我们首先可以用很简陋的代码来实现这个逻辑，让兔子速度是乌龟的 3 倍，等待 2 秒后，它俩开始离开起点，每隔 150 毫秒，就计算下它俩走多远了，也就是速度 x 轮询的次数，比如 450 毫秒后，乌龟走过去了三米，兔子走过去了九米距离，那么第一次写的代码可能就是这样的比较挫的代码：

  1. // 声明 2 个比赛队员
  2. const rabbit = '兔子'
  3. const turtle = '乌龟'
  4. // 声明一坨变量，作为赛道起点终点字符串
  5. const start = '|'
  6. const end = '》'
  7. // 赛道上一米一米的距离，用 . 表示
  8. const pad = '.'
  9. // 速度是 1 米/150 毫秒
  10. const speed = 1
  11. // 赛道一共有 50 米
  12. const steps = 50
  13. // 约定兔子在 42 米的时候停下
  14. const stopAt = 42
  15. // 判断兔子是否停下
  16. let stoped = false
  17. // 默认从 0 开始轮询
  18. let t = 0
  19. // 一个定时器的句柄而已
  20. let timer
  22. // 计算兔子距离终点
  23. const getRabbitLastSteps = () => {
  24.   return steps - t * speed - t * speed * 3
  25. }
  27. // 计算乌龟距离终点
  28. const getTurtleLastSteps = () => {
  29.   return steps - t * speed
  30. }
  32. // 计算龟兔间距
  33. const getGapSteps = () => {
  34.   return stopAt - t * speed
  35. }
  37. // 初始赛道状态
  38. const checkRaceInitState = () => {
  39.   return `${rabbit}${turtle}${start}${pad.repeat(steps)}${end}`
  40. }
  42. // 兔子领先时的赛道状态
  43. const checkRaceState = () => {
  44.   return `${start}${pad.repeat(t * speed)}${turtle}${pad.repeat(t * speed * 3)}${rabbit}${pad.repeat(getRabbitLastSteps())}${end}`
  45. }
  47. // 分情况计算赛道的实时状态
  48. const checkBackRaceState = () => {
  49.   if (getGapSteps() <= 0) {
  50.     if (getTurtleLastSteps() === 0) {
  51.       return `${start}${pad.repeat(stopAt)}${rabbit}${pad.repeat(steps - stopAt)}${end}${turtle}`
  52.     } else {
  53.       return `${start}${pad.repeat(stopAt)}${rabbit}${pad.repeat(t * speed - stopAt)}${turtle}${pad.repeat(getTurtleLastSteps())}${end}`
  54.     }
  55.   } else {
  56.     return `${start}${pad.repeat(t * speed)}${turtle}${pad.repeat(getGapSteps())}${rabbit}${pad.repeat(steps - stopAt)}${end}`
  57.   }
  58. }
  60. // 等待时间，把定时器包装秤一个 Promise
  61. const wait = (sec) => new Promise(resolve => setTimeout(() => resolve(), sec))
  63. // 可以支持特效刷新的命令行日志模块
  64. const chalkWorker = require('chalk-animation')
  65. const initState = checkRaceInitState()
  66. const racing = chalkWorker.rainbow(initState)
  68. const updateRaceTrack = (state) => {
  69.   racing.replace(state)
  70. }
  72. const race = () => {
  73.   timer = setInterval(() => {
  74.     // 判断是否兔子停下
  75.     if (!stoped) {
  76.       if (getRabbitLastSteps() <= (steps - stopAt)) {
  77.         stoped = true
  78.       }
  79.     }
  81.     if (stoped) {
  82.       let state = checkBackRaceState()
  83.       updateRaceTrack(state)
  85.       if (getTurtleLastSteps() === 0) {
  86.         // 乌龟过线后就停止定时器
  87.         clearInterval(timer)
  88.         return
  89.       }
  90.     } else {
  91.       let state = checkRaceState()
  92.       updateRaceTrack(state)
  93.     }
  95.     t++
  96.   }, 150); 
  97. }
  99. // 等待 20 秒再开始启动比赛
  100. wait(2000).then(() => {
  101.   race()
  102. })

在这一坨代码里面，我们用到了箭头函数/Promise/const/let/模板字符串，可以让代码变得清爽一些，并且有了 Promise，可以避免过度的 callback 嵌套，通过这个代码是为了让大家了解到，Nodejs 首先是 JS，其次是 Node，而 JS 里面又有不同时代的 ES 标准，所以大家在学习 Node 之前，是需要花一些时间来了解下 JS 尤其是 ES 最新标准带来的新语法的，比如我们可以增加 class 来把上面的 race function 再抽象下：

  1. const chalkWorker = require('chalk-animation')
  3. class Race extends Object {
  4.   constructor(props = {}) {
  5.     super(props)
  6.     ;[
  7.       ['rabbit', '兔子'],
  8.       ['turtle', '乌龟'],
  9.       ['turtleStep', 0],
  10.       ['rabbitStep', 0],
  11.       ['start', '|'],
  12.       ['end', '》'],
  13.       ['pad', '.'],
  14.       ['speed', 1],
  15.       ['steps', 50],
  16.       ['stopAt', 42]
  17.     ].forEach(elem => {
  18.       const [key, value] = elem
  19.       if (!(key in props)) {
  20.         this[key] = value
  21.       }
  22.     })
  23.   }
  25.   getRaceTrack () {
  26.     const {
  27.       start,
  28.       pad,
  29.       turtle,
  30.       turtleStep,
  31.       rabbit,
  32.       rabbitStep,
  33.       steps,
  34.       end
  35.     } = this
  37.     if (!turtleStep && !rabbitStep) {
  38.       return `${turtle}${rabbit}${start}${pad.repeat(steps)}${end}`
  39.     }
  41.     const [
  42.       [minStr, min],
  43.       [maxStr, max]
  44.     ] = [
  45.       [turtle, turtleStep],
  46.       [rabbit, rabbitStep]
  47.     ].sort((a, b) => a[1] - b[1])
  49.     const prefix = `${pad.repeat((min || 1) - 1)}`
  50.     const middle = `${pad.repeat(max - min)}`
  51.     const suffix = `${pad.repeat(steps - max)}`
  53.     const _start = `${start}${prefix}${minStr}`
  54.     const _end = suffix ? `${maxStr}${suffix}${end}` : `${end}${maxStr}`
  55.     return `${_start}${middle}${_end}`
  56.   }
  58.   updateRaceTrack (state, racing) {
  59.     racing.replace(state)
  60.   }
  62.   updateSteps () {
  63.     if (this.turtleStep >= this.steps) return
  64.     if (this.rabbitStep <= this.stopAt) {
  65.       this.rabbitStep += 3 * this.speed
  66.     }
  67.     this.turtleStep += 1 * this.speed
  68.   }
  70.   race () {
  71.     const initState = this.getRaceTrack()
  72.     const racing = chalkWorker.rainbow(initState)
  73.     let t = 0
  74.     let timer = setInterval(() => {
  75.       if (t <= 6) {
  76.         t += 1
  77.         return
  78.       }
  79.       const state = this.getRaceTrack()
  80.       this.updateRaceTrack(state, racing)
  81.       this.updateSteps()
  82.     }, 150)
  83.   }
  84. }
  86. const proxy = new Proxy(Race, {
  87.   apply (target, ctx, args) {
  88.     const race = new target(...args)
  89.     return race.race()
  90.   }
  91. })
  93. proxy()

除了 class，还增加了一些 rest 参数，解构赋值等，但依然实现过程比较猥琐且过度设计，大家能 Get 到 语法特性能带来一些编程实现方式的差异性 这一点，这一章节的目的就达到了。

思考

基于上面的代码，给大家布置一个作业，如果要实现龟兔赛跑，但可以让兔子停留的位置随机应该怎么实现？