2022.05.27

题目五：

class Observer {
  constructor(data) {
    this.defineReactive(data);
  }

  defineReactive(data) {
    Object.keys(value).forEach((key) => {
      reactive(value, key, value[key]);
    });
  }
  reactive(obj, key, val) {
    // 补充
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function () {
        console.log(`get key: ${key} val: ${val}`);
        return val;
      },
      set: function () {
        console.log(`set key: ${key} val: ${newVal}`);
        // 还记得我们上面讨论的闭包么
        // 此处将新的值赋给val，保存在内存中，从而达到赋值的效果
        val = newVal;
      },
    });
  }
}

const data = {
  info: {
    name: "lily",
  },
};

new Observer(data);

/**

• 执行下面这个代码需要打印以下日志

• get info

• set name = lucy

*/

data.info.name = 'lucy'

/**

• 执行下面这个代码需要打印以下日志

• set info = 2

*/

data.info = 2

题目 2：

function Foo(){
  this.getValue = function(){
    console.log(2)
  }
}

Foo.prototype.getValue = function(){
  console.log(3)
}
function Foo2(){}
  Foo2.getValue = function(){
  console.log(5)
}
// Foo2.prototype = Foo.prototype
Foo2.prototype = new Foo();
var obj2= new Foo2();
obj2.getValue()

---

// Foo2 指向 Foo // 3 // Foo2 = Object.create(Foo);

题目三： // 改造这个方法，使其支持 timeout

async function request(url, options) {

  const {timeout = 1000, ...restOptions} = options

  const rsp = await fetch(url, restOptions)

  return rsp

}

request('http://127.0.0.1:1337', {timeout: 1})

.then(console.log)

.catch(console.error) // timeout 后会到这里

Promise

-----------------------
async function request(url, options) {

  const {timeout = 1000, ...restOptions} = options
  let flag  = true;
  currentTime = new Date();
    if(currentTime  + timeout > lastTime){
        flag = false
    }
  return new Promise((reslove, reject) => {
        if(flag == true){
            const rsp = await fetch(url, restOptions)
            reslove(rsp)
        } else {
            reject('错误')
        }
  })
}

request('http://127.0.0.1:1337', {timeout: 1})
.then(console.log)
.catch(console.error) // timeout 后会到这里

题目 4：

data() {
  return { name: 'a' }
}

// Why not

data: { name: 'a' }

=>

VNode ?

Vue2 响应式原理？

题目一：

腾讯

性能优化？

静态节点替换，按需

可视区域懒加载

function isInViewPortOfOne(el) {
  // viewPortHeight 兼容所有浏览器写法
  const viewPortHeight =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;
  const offsetTop = el.offsetTop;
  const scrollTop = document.documentElement.scrollTop;
  const top = offsetTop - scrollTop;
  console.log("top", top);
  // 这里有个+100是为了提前加载+ 100
  return top <= viewPortHeight + 100;
}

富文本性能优化？

插入腾讯文档

魅族

微前端？

子应用资源

响应头

Access-Control-Allow-Origin: * // 用来做什么？

两个算法：一个二叉树的 DFS，一个匹配小中大括号的。给出几十万列表数据的优化方案。hash 与 history 模式各自优劣与原理。

console.log("1");
async function async1() {
  console.log("2");
  await async2();
  console.log("3");
}
async function async2() {
  console.log("4");
}
setTimeout(function () {
  console.log("5");
  new Promise(function (resolve) {
    console.log("6");
    resolve();
  }).then(function () {
    console.log("7");
  });
});
async1();
new Promise(function (resolve) {
  console.log("8");
  resolve();
}).then(function () {
  console.log("9");
});
console.log("10");