2022.8.19 卡伦特面试

一家甲方小公司，也是有做了一个简单的前端题，面试官看着做，这样感觉稍微比八股文考验了个人的技术吧，之前有些外包只面八股文，那些就是看了就会不看就一点不会，只是考验了背书能力而已。 另外这面试官还是挺有诚意。

难度: 中等偏下

我百度加上自己理解尝试写的答案，有些不太会，不对的请指正

写程序，模拟百度搜索，边写边聊一些问题

类似于之前面试中的实现百度的搜索下拉框。

上述搜索栏中，如果先输入两个字符发送异步请求，再输入三个字母发送异步请求，但是两个字符的请求比三个字符的请求花时间更长，即前面的请求把后面的覆盖掉了，怎么解决这个问题？

可以使用JavaScript中内置的AbortController，获取其中的signal对象并传入fetch中，当调用新请求时就可以使用abort()取消掉之前的请求

// 创建一个新的AbortController实例
const controller = new AbortController();
// 获取signal对象
const { signal } = controller;
// 发起一个fetch请求，并将signal作为选项传递给fetch
fetch(url, { signal })
// 在需要中止请求的时候，调用abort方法
controller.abort();

讲讲ts中的泛型

在定义类和函数的时候可以用尖括号设置泛型，在new的时候把具体类型传入，这样一来对数据起到一个限制作用

React和原生js的区别

我觉得最大的区别就是React使用了虚拟dom，每次渲染的时候减少了重绘次数，这样节省了内存，提升了加载速度. 而真实dom的元素体积较大，不轻易使用js加载页面
其次React框架里面只有一个div是html，其余所有内容都由js生成
最后React是基于组件的，提升了代码的复用性

为什么虚拟dom能提升效率？

1.虚拟dom节点体积很小，因此比较虚拟dom会比比较真实dom需要更少的内存。
2.由于diff算法只更新存在差异的节点，不修改其他节点，极大程度上做到了节点复用，减少了重排次数。

在双向数据绑定的框架中，是怎么改变视图的？

运用监听器监听模型，并且劫持模型中每个属性的getter和setter，如果模型中有数据变化就通知所有订阅者，由订阅者改变视图。
在视图上绑定事件，视图可以直接改变模型

你们内部自己的框架具有哪些功能？

.
.

更新： 2022.8.22 二面

这二面是真的难啊，由技术总监亲自面试，应该涉及到系统设计的内容，我一点也不会，自认技不如人，甘拜下风，求大佬们教教。

之前做的食谱卡片，用到了哪几个组件实现，组件的模型是什么样的？

.

大多数聊天软件中的对话功能，以及消息撤回功能，可能会用到哪些API？

.

在这个图片中有abcd四个点的位置，以及直线ac和直线bd，请设计一个方案，找出两条直线的交点位置，并且确定两条直线的夹角是否为57度

.