# 2022.05.27

题目五：

```js
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：

```js
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

```js
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：

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

// Why not

data: { name: 'a' }

```

\=>

VNode ?

Vue2 响应式原理？

题目一：

腾讯

性能优化？

静态节点替换，按需

可视区域懒加载

```js
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 模式各自优劣与原理。

```js
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");
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shenjunhong.gitbook.io/blog/mian-shi/teng-xun-jing-li/2022.05.27.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.