2020.11.25

react 和 vue 区别

react 和 vue 区别

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

vue 通信方式

写一下发布订阅

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

state = {
  index: 1,
};

题一
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 性能优化

数组排序

xss csrf csp

前端网络安全

跨域

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. 链式调用的设计

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 状态

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 优化

HMR 工作原理

webpack HMR

new 函数 和 直接 函数

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

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

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

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

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);