AwesoLynn

接前端面经总结（一）

HTML语义化标签理解

语义化即元素本身穿大了关于标签所包含内容类型的一些信息。如<header>、<nav>、<article>、<aside>、<footer>等，使用语义化标签有利于呈现更好的内容结构，有利于SEO，并提升用户体验，便于团队开发维护，以及方便其他设备解析渲染页面，如屏幕阅读器，移动设备等。

RESTful理解

URL中使用名词定位资源，用HTTP动词（GET,POST,DELETE等）描述操作。

HTTP

http和https

http： 超文本传输协议，一种网络协议，一个客户端和服务器端请求和应答的标准（TCP）。

https：http的安全版，以安全为目标的HTTP通道。即在HTTP下加入SSL层。用于建立一个信息安全通道，来确保数据的传输以及网站的真实性

区别

1. http传输的数据是未加密的，是明文。https传输的数据通过SSL协议进行了加密处理，安全性更高。

2. https需要ca证书，http不需要。

3. http协议的端口是80，https协议的端口为443.

4. http的链接是无状态的，https的链接由SSL和HTTP协议构建。

变量和类型

1. JavaScript规定了几种语言类型

2. JavaScript对象的底层数据结构是什么

3. Symbol类型在实际开发中的应用、可手动实现一个简单的Symbol

JavaScript算法题

获取url中参数

描述

获取 url 中的参数

1. 指定参数名称，返回该参数的值 或者 空字符串

2. 不指定参数名称，返回全部的参数对象 或者 {}

3. 如果存在多个同名参数，则返回数组

4. 不支持URLSearchParams方法

   阅读更多...

好几年没碰算法题，头次打开一脸懵逼。为了面试刷起来，以下为整理：

JavaScript算法题

dom 节点查找

描述

查找两个节点的最近的一个共同父节点，可以包括节点自身

输入描述

oNode1 和 oNode2 在同一文档中，且不会为相同的节点

获取node父节点，可以使用node.parentNode

分析

接结合Vue3-demo项目分析源码（五），完成组件的渲染，结束mounted生命周期。此时可以在页面看到内容了。当添加事件修改数据时，Vue进入组件更新过程。

分析

MVVM模型

接结合Vue3-demo项目分析源码（四），完成组件的创建，包含创建组件实例createComponentInstance和设置组件实例setupComponent两个步骤。整个组件的创建过程涉及到两个生命周期beforeCreated和created，到created才算组件创建完成，此时进入组件的渲染过程。回到mountComponent()方法，查看方法setupRenderEffect()

1
2
3
4
5
6
7
8
9
10
11
12
13

const mountComponent: MountComponentFn = (
    ...
) => {
    //创建组件实例
    const instance: ComponentInternalInstance = (initialVNode.component = createComponentInstance(...))
    ...
    //设置组件实例
    setupComponent(instance)
    ...
    //处理setup方法
    setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense,isSVG, optimized)
    ...
}

接结合Vue3-demo项目分析源码（三），完成了组件的初始化，认识了各种类型的组件、浅层响应式对象即全局api。回到方法setupStatefulComponent()继续组件的创建。

分析

查看文件vue-next/packages/runtime-core/src/component.ts第538行

接结合Vue3-demo项目分析源码（二），创建完App实例，开始创建组件。接上篇mountComponent()方法，调用了createComponentInstance方法创建了一个初始化状态的组件实例instance，接下来就根据组件的定义调用方法setupComponent()设置此组件实例

1
2
3
4
5
6
7
8
9
10
11
12
13

const mountComponent: MountComponentFn = (
    ...
) => {
    //创建组件实例
    const instance: ComponentInternalInstance = (initialVNode.component = createComponentInstance(...))
    ...
    //设置组件实例
    setupComponent(instance)
    ...
    //处理setup方法
    setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense,isSVG, optimized)
    ...
}

接结合Vue3-demo项目分析源码（一），创建完App组件，开始使用mount方法渲染app

分析

mount()

渲染app

查看源码项目vue-next/packages/runtime-dom/src/index.ts中createApp()，其中app.mount被重写了。