渐入佳境 - Zong

五一小长假韩国之行取消，入职 1 个月，慢慢的适应起来
尝试开始编写 Vue 代码，与 React 相比也有很多的相似之处，那就两个框架齐头并进吧
頑張れ！

📔 日本語学習計画

截至目前《新版中日交流标准日本语初级上、下》停留在第 3 个单元，学习进度停滞，对书产生抗拒心理，有点回归学校的感觉，词汇量真的好可恶啊啊啊。

争取在未来的日子里赶回来，同时产生变化的是有点喜欢看有字幕的日剧，想更多的通过煲日剧来对日常日语加深影响，要做到不仅会说更要听得懂。

📚 建立自己的前端知识体系

参与部门领域兴趣小组，借此机会来扩充自己的知识体系，尝试不同的领域。我报名了一个跟可视化相关的兴趣小组，我想在此领域做些尝试。当然了，暂时小组还没有开展什么活动……

关于源码阅读计划的继续推进，考虑到我目前接触到的我司技术栈为 Vue ，所以未来我会考虑阅读 Vue 的源码以借此机会进行学习。

接下来，来分享一些踩坑记录，当然了也是一些工作方式和学习经验的积累，希望可以融会贯通了。

先来说说内部 NPM 服务器发包的坑，入职一周的样子，在开发过程中就发现了内部库的 BUG ，借修 BUG 机会来感受发包，可是体验差强人意。

可以说基本问题都是由 Node.js 的版本差异所致，一开始我使用的是 12.x 版本，出现问题后，我尝试在网络上搜索解决方案，将版本降低至 10.x 来解决，当我以为问题解决的时候……噗，并没有。后来在发过包的同事这里才得知，是使用 8.x 版本来发包的，最后问题得以解决。

可以说是路程艰辛坎坷，其实关于公共库，我更希望可以看到有些环境配置来引导我去降级 node 版本，而非以这种惨痛的方式。

这里可以借鉴的地方还是挺多的，比如 React 仓库的 package.json 中：

{
  "devEngines": {
    "node": "8.x || 9.x || 10.x || 11.x || 12.x || 13.x"
  }
}

再遇到的一个问题，其实有关沟通，因为沟通的出入导致一直以为当前开发分支是错误的，并且一直在尝试调试，以至于浪费时间。所以可能更全面的了解项目，和沟通会有助于项目进度的推进，不然在临时支援项目时真的会很苦恼，会感觉每个加入的人都要踩这个坑。当然最后排除疑惑的方法也和沟通没有多大关系，而是借助线上环境的代码检索沟通的出入来最后确定开发分支是正确的，而非自身问题来解决此事，所以工作中多种多样的事情很多，但是更多的沟通会还是可以帮助问题的解决的，应该吧……（当然主要还是想说明利用线上代码来进行校对）

接下来，记录一下修复库的故事，有关 Element 库，因为我司内部库是由这个库迭代魔改的吧……，当遇到一些新的需求，或者现存 BUG 时，我会尝试去看 Element issues 来对内部库进行修复。

比如说一个有关于在 Table 组件下使用 show-overflow-tooltip 参数来实现当内容过长被隐藏时显示 tooltip ，然而问题就在于这个显示的 tooltip 不支持鼠标移入，需求则是需要支持，来看到 #13916 。

// 找到源码中的 handleCellMouseLeave 方法和 handleCellMouseEnter 方法进行替换即可
Object.assign(Table.components.TableBody.methods, {
  handleCellMouseLeave() {
    const tooltip = this.$refs.tooltip
    if (tooltip && tooltip.expectedState) {
      tooltip.setExpectedState(false)
      clearTimeout(tooltip._timeoutLeave)
      tooltip._timeoutLeave = setTimeout(() => {
        if (!tooltip.expectedState) {
          tooltip.handleClosePopper()
        }
      }, 150)
    }
    const cell = getCell(event)
    if (!cell) return

    const oldHoverState = this.table.hoverState || {}
    this.table.$emit(
      'cell-mouse-leave',
      oldHoverState.row,
      oldHoverState.column,
      oldHoverState.cell,
      event
    )
  },
  handleCellMouseEnter(event, row) {
    // console.log('handleCellMouseEnter', this.$refs.tooltip)
    const table = this.table
    const cell = getCell(event)
    const tooltip = this.$refs.tooltip

    if (cell) {
      const column = getColumnByCell(table, cell)
      const hoverState = (table.hoverState = { cell, column, row })
      table.$emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, event)
    }

    // 判断是否text-overflow, 如果是就显示tooltip
    const cellChild = event.target.querySelector('.cell')
    if (!(hasClass(cellChild, 'el-tooltip') && cellChild.childNodes.length)) {
      setTimeout(() => {
        tooltip.setExpectedState(false)
        tooltip.handleClosePopper()
      }, 600)
      return
    }
    // use range width instead of scrollWidth to determine whether the text is overflowing
    // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
    const range = document.createRange()
    range.setStart(cellChild, 0)
    range.setEnd(cellChild, cellChild.childNodes.length)
    const rangeWidth = range.getBoundingClientRect().width
    const padding =
      (parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) +
      (parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0)
    if (
      (rangeWidth + padding > cellChild.offsetWidth ||
        cellChild.scrollWidth > cellChild.offsetWidth) &&
      this.$refs.tooltip
    ) {
      // TODO 会引起整个 Table 的重新渲染，需要优化
      const showTooltip = () => {
        this.tooltipContent = cell.innerText || cell.textContent
        tooltip.referenceElm = cell
        tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none')
        tooltip.doDestroy()
        tooltip.setExpectedState(true)
        this.activateTooltip(tooltip)
      }
      clearTimeout(tooltip._timeoutEnter)
      tooltip._timeoutEnter = setTimeout(() => {
        !tooltip.expectedState && showTooltip()
      }, 500)
    }
  }
})

当然啦，我没有直接替换，考虑到在不影响原有功能的情况下，我追加了一个参数 keep-show-overflow-tooltip 来实现这个需求。默认为关闭，即默认走默认逻辑，若开启则进入此逻辑。

再比如另外一个 BUG ，是 Select 组件在部分电脑上会出现抖动现象，一开始我是没办法自己复现的，当我在 issues 看到只要 Chrome 缩放调整至 110% 以上就可以复现，当时我都惊呆了，查看 DOM 也很明显发现是计算问题，一直在 66px 67px 的变换跳跃……（不抖才怪了）

最后也是看到 #13173 ，采用将 tags.clientHeight 替换为 tags.getBoundingClientRect().height 得以解决问题。

这么一遭下来感觉 Element 确实和 Ant Design 还是有差距的，在看到 Element 上 1k 的 issues 也是倒吸一口凉气，况且这两个都是已关闭的问题。

还在团队中做了《TypeScript 给我们带来了什么》分享，分享后我也回看了我的分享视频，在这次分享中，我依然有些小紧张，分享稿也准备的不是很充分，没有很全面的或者很大的给大家带来我想要的分享，希望在下一次的分享机会我更加努力的去准备，为大家带来更好的内容。

🏇 锻炼身体

自进入我司起，之前制定的日常锻炼小目标开始逐渐没有完成，情有可原，在未来的日子里慢慢重新抓起这些小目标，动起来。每天也只花个 10 分钟左右而已，很轻松啦。