前端大杂货铺系列《七》

前言

之前是前端踩坑系列，但是我发现除了一些坑之外，自己还有一些知识比较杂的，现在就换个名字接着记录这些前端的坑和知识点

踩过的坑

assign

Object.assign 方法，大家应该都比较熟悉，在 MDN 上的解释是这样的

用于将可枚举属性的值从一个或者多个源对象复制到目标对象，它将返回目标对象

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

可以看到，如果目标对象中拥有和源对象一样的属性，那么源对象的属性将会覆盖目标对象的值

问题就是出在这个位置，我们在使用 Object.assign 的时候，要留意两个对象是否有相同的属性，有相同的属性它们是否有相同的含义，是否可以使用源对象替代目标对象

lodash 的一个小坑

同事分享的一个小坑，在使用 lodash 的 get 方法的时候，如果是空值 '' ，而不是 undefined 的话，就不会取第三个值

let a = {}
a.c = ''
let b = _.get(a, 'c', 33)
let c = a && a.c || 33
console.log(b)      // '',预期结果是33，结果是''
console.log(c)  // 解决方法,输出33

前端全面使用vue，不应该使用zepto或jQuery，更不应该直接操作DOM

首先要明白操作 DOM 的含义，指的是我们会对 DOM 做一些修改或者遍历（遍历 DOM 节点下的子节点），在 Vue 中我们对 DOM 的一些修改，可以通过 v-show 和 v-if 等的操作进行了，还有双向数据绑定的操作，所以不需要修改 DOM。

有个小疑问，就是如果是滚动滑动的一个监听，我们需要拿到DOM，这个算操作DOM么？

offsetTop 返回 0

很可能该元素设置样式 display: none 了！

React 相关

React动态添加 class 类

推荐写法

<div 
  className={`mst-nav-408-wrap ${this.state.tabPosition === 'left'? 'mst-nav-408-wrap-left': ''}`}>
</div>

React 必须使用 setState 方法更新组件的 state
componentDidMount() 方法会在组件已经被渲染到 DOM 中后被运行

我不知道的知识点

利用GitLab API来获取仓库中某个文件的内容[1]

mac电脑终端怎么显示项目树：tree命令的使用[2]安装完成后，输入 tree -L 3 -I "node_modules"，更多命令自行了解

[1]

利用GitLab API来获取仓库中某个文件的内容: https://blog.csdn.net/felix_yujing/article/details/52712925

[2]

mac电脑终端怎么显示项目树：tree命令的使用: https://segmentfault.com/a/1190000009962072