第 0003 题：webpack 中 loader 和 plugin 的区别是什么

loader 它是一个转换器，将 A 文件进行编译成 B 文件，比如：将 A.less 转换为 A.css，单纯的文件转换过程。
plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务

公司：平安

hexo 报错

1

Error: Cannot find module './build/Release/DTraceProviderBindings'

解决办法 on google

google之后发现被这个问题困扰的小伙伴还真不少，网上最靠谱的解决办法是：

1

$ npm install hexo --no-optional

的确很多小伙伴执行上面的命令之后都解决了报错的问题，但也有很多小伙伴跟我一样执行后没有任何效果，我甚至尝试了卸载后重装的方式：

1
2

$ npm uninstall hexo
$ npm install hexo --no-optional

可是依旧没有效果。
其实 hexo 暂时并没有用到 dtrace-prodider ，仅仅是报错而已，hexo 的命令还是能执行，但对于强迫症来说，简直无法忍受。

我的解决办法
一番折腾之后，我找到了适合我的解决办法，重装 hexo-cli，如果命令行报没权限错误，请记得前面加 sudo :

1
2

$ npm uninstall hexo-cli -g
$ npm install hexo-cli -g

再来执行 hexo 命令果然没有报错信息了:D

由于项目需求，悬浮框内容较多，会出现悬浮框(tooltip)很长或者很宽的现象，而太长了，就会被 Echarts 溢出隐藏了，所以需要自定义定位需求

需求描述：鼠标悬浮在左侧某一个点时，悬浮框悬停在点的右侧；鼠标悬停在右侧某一个点时，悬浮框悬停在点的左侧。

首先明确一点，我们需要借助 tooltip.position 属性。理想的思路是我们在回调函数中获取鼠标每次悬停的坐标，然后再判断这个坐标是否处于此容器(也就是这个Echarts图表)的左侧或者右侧；判断命中后我们再改变 tooltip 的位置，并返回给函数。

防止自己忘掉 React 的一些生命周期方法，方便自己回忆和查阅。

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。

当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。

1
2
3
4
5
6

componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

你也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语件里，正如上述的例子那样进行处理，否则会导致死循环。它还会导致额外的重新渲染，虽然用户不可见，但会影响组件性能。不要将 props “镜像”给 state，请考虑直接使用 props。

padding 配合 background-clip 属性，可以制作一些特殊形状：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/*三道杠*/
.icon1 {
  box-sizing: border-box;
  display: inline-block;
  width: 12px;
  height: 10px;
  padding: 2px 0;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: currentColor; /*注意如果此处背景颜色属性用缩写的话，需要放到其他背景属性的前面，否则会覆盖前面的属性值（此处为background-clip）为默认值*/
  background-clip: content-box;
}

/*双层圆点*/
.icon2 {
  display: inline-block;
  width: 12px;
  height: 12px;
  padding: 2px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background-color: currentColor;
  background-clip: content-box;
}

实时预览如下：（currentColor 是 css 中为数不多的变量，指当前文字的颜色值，非常好用）

第 0001 题：请写出如下代码的打印结果

1
2
3
4
5
6
7
8
9

var name = 'Tom';
(function() {
    if (typeof name == 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

公司：京东

变量提升（hoisting）

var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined

注释

文件顶部的注释，包括描述、作者、日期

1
2
3
4
5

/**
 * @description xxxxxx
 * @author chengfeng
 * @since 19/05/21
 */

模块的注释

1
2
3
4
5
6

/**
 * 拷贝数据
 * @param  {*}  data   要拷贝的源数据
 * @param  {boolean} [isDeep=false] 是否深拷贝，默认浅拷贝
 * @return {*}         返回拷贝后的数据
 */

业务代码注释

1

/*业务代码注释*/

变量注释

1
2
3
4
5
6
7
8

interface IState {
  // 名字
  name: string;
  // 电话
  phone: number;
  // 地址
  address: string;
}

Next 主题官网

Hexo 博客官网

简介

Markdown 是一种轻量级标记语言，它用简洁的语法代替排版，使我们专心于码字。它的目标是实现易读易写，成为一种适用于网络的书写语言。同时，Markdown 支持嵌入 html 标签。
注意：Markdown 使用 #、+、* 等符号来标记， 符号后面必须跟上至少1个空格才有效！