> For the complete documentation index, see [llms.txt](https://shenjunhong.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shenjunhong.gitbook.io/blog/mian-shi/mei-zu-jing-li/2020.09.22.md).

# 网易二面

A

## 讲一讲你工作的项目 => 有遇到什么难点吗

## qiankun 都具体做了什么

[微前端接入笔记](/blog/mian-shi/mei-zu-jing-li/wei-qian-duan-jie-ru-bi-ji.md)

## css 盒模型 的 padding-top 100px 是以什么为标准的

## 监听用户关闭页面，弹出模态窗怎么实现

## 讲一讲你对 vue 路由的了解 => history 和 hash 路由有什么不同

## 怎么实现 0.1+ 0.2 === 0.3

## 垂直居中的方法有哪几种

## 用过 h5 吗，有遇到什么困难吗

## 讲一讲 call apply bind 的区别

[手写 call, apply 和 bind.js](https://github.com/hoelshen/Blog/blob/master/函数编程题/手写%20call,%20apply%20和%20bind.js)

## props 中 react 和 vue 表现形式是怎样的

## 父子元素 event.target current.target 各是谁

## 手写数组求最小差值

[手写数组求最小差值](https://github.com/hoelshen/Blog/blob/master/函数编程题/手写数组求最小差值.js)

## 讲一下节流和防抖

[节流和防抖](/blog/yuan-ma/yuan-ma-shou-xie-xi-lie/jie-liu-he-fang-dou.md)

## 怎么模拟用户 hover 两秒后事件

## 内联元素 span input img 垂直居中 为什么表现形式不一样

## 组件传值除了 prop 还有什么形式

usecoontext provider consumer

## 讲一讲怎么用 hook 模拟 componentWillMount

## input 原生方式监听 value

## 讲一讲 currentRef 和 useRef 有什么不同 你分别在什么场景下用到

## 讲一下深拷贝和浅拷贝

## 讲一讲 vue 和 react 都是怎么监听 input 事件的

## immutable。js 的实现原理是怎样的

## 性能优化 => Redux 为什么 不能直接 修改值

## 讲一讲 purecomponent 的原理 => shouldComponentUpdate 是怎么做处理的

## 讲一下 type 和 interface 区别

相同点

```ts
都可以描述一个对象或者函数;
interface;
interface User {
  name: string;
  age: number;
}

interface SetUser {
  (name: string, age: number): void;
}

type User = {
  name: string;
  age: number;
};
```

```js
type SetUser = (name: string, age: number)=> void;
都允许拓展（extends）
interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。
interface extends interface
interface Name {
name: string;
}
interface User extends Name {
age: number;
}
 type extends type
type Name = {
name: string;
}
type User = Name & { age: number };
 interface extends type
type Name = {
name: string;
}
interface User extends Name {
age: number;
}
 type extends interface
interface Name {
name: string;
}
type User = Name & {
age: number;
}
type 可以而 interface 不行

type 可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名
type Name = string

// 联合类型
interface Dog {
wong();
}
interface Cat {
miao();
}

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

type 语句中还可以使用 typeof 获取实例的 类型进行赋值

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div
```

```ts
type StringOrNumber = string | number;
type Text = string | { text: string };
type NameLookup = Dictionary<string, Person>;
type Callback<T> = (data: T) => void;
type Pair<T> = [T, T];
type Coordinates = Pair<number>;
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };
 interface 可以而 type 不行
interface 能够声明合并
interface User {
name: string
age: number
}

interface User {
sex: string
}

/_
User 接口为 {
name: string
age: number
sex: string
}
_/
```

## 用过泛型吗

[工具泛型](/blog/ts/gong-ju-fan-xing.md)

## redux

redux 会通过引用来判断前后两次 state 有没有变化

直接修改了 state 对象，然后返回的还是原来的 state 对象（被修改过的）

解决方案：创建新的对象，改变引用（创建新的引用）,新建了一个副本。

```js
Object.assign({}, state, {
  visibilityFilter: action.filter,
});
```

```js
  {...state,  visibilityFilter: action.filter} 
```

Immutable.js 采用了持久化数据结构和结构共享，保证每一个对象都是不可变的，任何添加、修改、删除等操作都会生成一个新的对象，且通过结构共享等方式大幅提高性能。原理参考：

## Event.currentTarget 和 Event.target 的区别

currentTarget 始终是监听事件者，而 target 是事件的真正发出者。

currentTarget: 标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素

这两个方法都是监听事件触发的目标。区别是，event.currentTarget( ) 会返回当前触发事件的元素；

而 event.target( ) 会返回触发事件触发的源头元素。

用法：可以用来监听触发事件的元素是否事件发生的源头元素。这个源头元素指的是，当我点击子元素，虽然父元素的点击事件也会被触发（冒泡机制），但子元素才是事件的源头元素。

```js
	inner: function (e) {
		console.log( '触发了inner 事件'+"  currentTarget:"+e.currentTarget.className)
	},
	middle: function (e) {
		console.log( '触发了middle事件'+"  currentTarget:"+e.currentTarget.className)
	},
	outer: function (e) {
		console.log( '触发了outer事件'+"   currentTarget:"+e.currentTarget.className)
	}

```

target 返回的是当前触发事件的元素，包括冒泡和捕获事件

触发了 inner 事件 currentTarget inner 触发了 middle 事件 currentTarget middle 触发了 outer 事件 currentTarget outer

```js

	inner: function (e) {
		console.log( '触发了inner 事件'+"  target:"+e.target.className)
	},
	middle: function (e) {
		console.log( '触发了middle事件'+"  target:"+e.target.className)
	},
	outer: function (e) {
		console.log( '触发了outer事件'+"   target:"+e.target.className)
	}
```

触发了 inner 事件 target inner 触发了 middle 事件 target inner 触发了 outer 事件 target inner