0616

工作

• 联调和bug修复：
  • 协议说明阅读：滑动到底部（表示看完协议）后显示下一步，需要写在 接口后面，因为盒子是被内容撑开，内容是在接口完成后填充到 DOM 中的。
• Docker 常用命令学习：
  • 因为是新项目，因此集成环境需要部署，偏偏组长去开会了，我又要联调使用，因此需要自己手动处理，学会了一些命令。
  • 需要自己登陆服务器，手动启动镜像。
  • 学会了几个命令：
    • docker restart imageName 重启镜像
    • docker ps -a 查看所有运行中的镜像
    • docker stop containerName 停止某个镜像服务（需要先停止对应的容器）
    • docker rm containerName 删除某个容器
    • docker-compose up -d imageName 重新构建容器，镜像；类似于重启

任务

• 学习 vue 源码中的发布订阅模式：局部更新原理之一；
• 算法：66. 加一 简单题，有多种方法，我用的是最简单的一种：转成字符串再转成数字加1后转回数组。
• 发布订阅模式疑问：A 和 B ，即 eventBus 所放在的地方不一样，结果 【555】 输出的结果不同，为什么？

// A
let eventBus = {}
function EventBusDispatch() {
  // B 这里的结果和我想的不一样，为什么？
  // let eventBus = {}
  const on = function (type, handler) {
    (eventBus[type] || (eventBus[type] = [])).push(handler)
  }
  const off = function (type, handler) {
    console.log('off--arguments', arguments)
    if (arguments.length === 0) {
      // off() ???
      eventBus = {}
    } else if(arguments.length === 1) {
      // off(type)
      eventBus[type] = []
    } else if (arguments.length === 2) {
      // off(type, handler)
      let fnArr = eventBus[type]
      if (!fnArr || !fnArr.length) return
      // 倒着循环，数组序号不受影响
      for (let i = fnArr.length-1; i >= 0; i--) {
        if (fnArr[i] === handler) {
          fnArr.splice(i, 1)
        }
      }
    }
  }
  const emit = function (type)  {
    console.log('emit---arguments: ', arguments);
    let args = [].slice(arguments, 1)
    let fns = eventBus[type]
    if (!fns) return
    for (let i=0; i<fns.length; i++) {
      fns[i].apply(null, args)
    }
  }
  return {
    // B
    // eventBus,
    on,
    off,
    emit
  }
}

const { on, off, emit } = EventBusDispatch()

const fn1 = () => console.log('fn1')
const fn2 = () => console.log('fn2')
const fn3 = () => console.log('fn3')
on('click', fn1)
on('click2', fn2)
on('click2', fn3)
console.log('eventBus111', eventBus)
emit('click')
off('click2')
console.log('eventBus222', eventBus)

off('click', fn1)

console.log('eventBus333', eventBus)

on('click', fn1)
on('click2', fn2)
on('click2', fn3)

console.log('444---全都有', eventBus)

off()

// ????
console.log('555--全部被删除', eventBus)

反思

明日计划

• 工作：
  • PDP 完善
  • 联调，bug 修复
• 任务：

---

好文推荐

• 搭建前端异常监控系统 通过邮件看到，公司同事分享的文章
• 微前端框架qiankun项目实战（二）--踩坑与部署篇
• 120 行代码帮你了解 Webpack 下的 HMR 机制 实际上就是对 socket 的运用

TODOS

• 周末学习 Nestjs
• 有空学习下 Docker，Nginx，DevOps 相关