> 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.11.25.md).

# 2020.11.25

### react 和 vue 区别

[react 和 vue 区别](/blog/mian-shi/zhen-dui-zi-jie/react-mian-shi-zhun-bei.md)

vue 实现双向绑定 watch computed this.nextTick()

vue 通信方式

### 写一下发布订阅

\[{ key: \[fn, fn, fn] }]

###

```js
state = {
  index: 1,
};
```

```js
题一
componentDidMount(){
    this.setState({
        index:this.state.index+1
    })
    console.log('state',this.state.index)
}
题二
componentDidMount(){
    setTimeout(()=>{
        this.setState({
            index:this.state.index+1
        })
        console.log('state',this.state.index)
    },0)
}

题三
componentDidMount(){
    this.setState({
        index:this.state.index+1
    },()=>{
        console.log(this.state.index)
    })
    this.setState({
        index:this.state.index+1
    },()=>{
        console.log(this.state.index)
    })
}
```

### react 事件机制

### react 性能优化

[react 性能优化](/blog/mian-shi/zhen-dui-zi-jie/react-mian-shi-zhun-bei.md)

### 数组排序

### xss csrf csp

[前端网络安全](/blog/za-wen/qian-duan-wang-luo-an-quan.md)

### 跨域

###

```js
function a(test) {
  console.log(test);
}
var b = a.bind(this, "xxx");
var c = b.bind(this, "lll");
c();
```

总结: bind 方法可以绑定 this 和参数，但一旦参数被绑定，后续的 bind 调用不会覆盖已经绑定的参数。

在这段代码中，c() 最终调用的是 a('xxx')，因此输出是 xxx。

var calc = generatorCalc(); calc(1); calc(2)(3); calc() // 6 实现 generatorCalc

1. 命名规范
2. 类数组 与数组 的转化的问题
3. 扩展运算符的使用
4. 链式调用的设计

###

```js
console.log("script start");

async function async1() {
  await async2();
  console.log("async1 end");
}

async function async2() {
  console.log("async2 end");
}

async1();

setTimeout(() => {
  console.log("setTimeout");
}, 0);

new Promise((resolve, reject) => {
  console.log("promise start");
  resolve();
})
  .then(() => console.log("promise1"))
  .then(() => console.log("promise2"));

console.log("script end");
```

同步代码 总是最先执行。

微任务（如 Promise.then、await 后面的代码）会在同步代码执行完毕后立即执行。

宏任务（如 setTimeout）会在微任务队列清空后执行。

### Promise 状态

```js
new Promise(function (res, rej) {
  res(2);
  console.log("xxx");
})
  .then(
    function () {
      // 处理 resolve 的传入值
      return 6;
    },
    function () {
      //??
    }
  )
  .then(function () {})
  .catch();
```

一个 Promise

### 适配问题

1. 全局滚动与弹窗的问题（没有遇到）
2. 兼容性要求 > Android 8.0 css 特性兼容性要求 currentCorlor 变量

css less 哪些能力

* 变量
* 嵌套

跑马灯的组件

* 无限循环滚动

### webpack 性能优化方面

[webpack 优化](https://github.com/hoelshen/Blog/blob/master/源码/webpack/webpack常用优化.md)

### HMR 工作原理

[webpack HMR](https://github.com/hoelshen/Blog/blob/master/源码/webpack/webpack热更新原理.md)

### new 函数 和 直接 函数

当作为未绑定对象被调用时，this 默认指向全局上下文或者浏览器中的 window 对象。然而，如果函数在严格模式下被执行，上下文将被默认为 undefined

当通过 new 一个对象的实例的方式来调用一个函数的时候，this 的值将被设置为新创建的实例

```js
function foo() {
  console.log(this);
}

foo(); // window
new foo(); // foo{}
```

```js
function generatorCalc() {
  let sum = 0;
  function calc(...args) {
    if (args.length === 0) {
      return sum;
    }
    sum += args.reduce((a, b) => a + b, 0);
    return calc;
  }

  return calc;
}

var calc = generatorCalc();
calc(1);
calc(2)(3);
```