面试题[其它] ​

1. Future ​

1.1 了解的最新的一些前端技术有哪些 ​

1. WebGPU

1.2 Chrome 浏览器最新的技术更新 ​

2. Past ​

2.1 WangEditor 的内核是什么 ​

2.2 小程序和 H5 的区别 ​

小程序与H5深度对比及原理解析

2.3 React 和 Vue 的语法是是如何在小程序中运行的 ​

2.4 什么是 CDN？它的作用是什么？ ​

2.5 tree shaking 是如何做的，commonjs 能用吗 ​

tree shaking 原理

2.6 表单中 input 和 change 事件的区别 ​

在表单处理中，input 事件和 change 事件是两个常用的事件类型，它们之间有一些关键的区别：

1. 触发时机：

   • input：input 事件在用户输入过程中持续触发。每当输入框的内容发生变化时（例如，用户每键入一个字符），input 事件就会被触发。
   • change：change 事件在输入框的内容发生变化并且失去焦点（blur）时触发，或者在某些情况下（如选择框、复选框等）在用户完成选择后立即触发。对于文本框，当用户输入文本后按下回车或点击输入框外部使输入框失去焦点时，change 事件才会被触发。

2. 适用元素：

   • input：主要适用于 <input>, <textarea>, 和一些 <select> 元素（具体取决于浏览器实现）。
   • change：适用于所有表单元素，包括 <input>, <textarea>, <select>, <checkbox>, <radio> 等。

3. 使用场景：

   • input：适用于需要实时处理用户输入的场景，如即时搜索、实时验证等。
   • change：适用于在用户完成输入后需要进行处理的场景，如表单提交前的验证。

4. 示例代码：

   html

   <input type="text" id="myInput" />
   
   <script>  
   document.getElementById('myInput').addEventListener('input', function(event) {  
     console.log('Input event triggered:', event.target.value);  
   });
       
   document.getElementById('myInput').addEventListener('change', function(event) {  
     console.log('Change event triggered:', event.target.value);  
   });
   </script>

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

2.7 mouseover 和 mouseenter 事件的区别 ​

一句话概括： mouseover 会冒泡，mouseenter 不会。

下面具体看一下 mouseover 和 mouseenter 都是鼠标事件，它们的区别在于：

1. 触发条件不同

   • mouseover 在鼠标指针进入元素或元素的子元素时会触发，即当鼠标指针从元素外部移入元素边界时触发；
   • mouseenter 只在鼠标指针进入元素时触发，不会在进入元素的子元素时触发。

2. 事件冒泡不同

   • mouseover 会冒泡，即当鼠标指针从子元素移出到父元素时也会触发；
   • mouseenter 不会冒泡，即只在进入元素时触发，不影响其它元素的事件。

3. 使用场景

   • 如果希望在鼠标进入元素及其子元素时都触发事件，可以使用 mouseover。
   • 如果只想在鼠标进入元素本身时触发事件，可以使用 mouseenter。

4. 示例代码

   javascript

   const parent = document.getElementById('parent');
   const child = document.getElementById('child');
   
   parent.addEventListener('mouseover', () => {
     console.log('Parent mouseover');
   });
   
   parent.addEventListener('mouseenter', () => {
     console.log('Parent mouseenter');
   });
   
   child.addEventListener('mouseover', () => {
     console.log('Child mouseover');
   });
   
   child.addEventListener('mouseenter', () => {
     console.log('Child mouseenter');
   });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   

   当鼠标从父元素移动到子元素时：

   • mouseover 会在子元素和父元素上都触发；
   • mouseenter 只会在最初进入父元素时触发一次

2.8 UTF-8 是什么 ​

UTF-8（8位元，Universal Character Set/Unicode Transformation Format）是针对 Unicode 的一种可变长度字符编码。以下是对 UTF-8 的详细解释：

1. 定义与背景
   • 定义：UTF-8是一种前缀码，可以用来表示Unicode标准中的任何字符。
   • 创建者：Ken Thompson、Rob Pike（罗布·派克）。
   • 创建时间：1992年9月。
   • 标准化：已经标准化为RFC 3629。
2. 特性与优势
   • 与ASCII兼容：UTF-8 编码中的第一个字节仍与 ASCII 相容，这使得原来处理 ASCII 字符的软件无需或只进行少部分修改后，便可继续使用。
   • 可变长度编码：UTF-8 使用1到4个字节为每个字符编码，根据字符的不同，编码长度会有所变化。这种特性使得 UTF-8 能够高效地表示各种字符，包括 ASCII 字符和 Unicode 标准中的其他字符。
   • 广泛应用：由于 UTF-8 的兼容性和高效性，它逐渐成为电子邮件、网页及其他存储或传送文字的应用中优先采用的编码。
3. 编码规则与字节结构
   • ASCII字符：一个 US-ASCII 字符只需1字节编码（Unicode 范围由U+0000~U+007F），且 UTF-8 表示与 ASCII 字符表示是一样的。
   • 其他字符：
     • 带有变音符号的拉丁文、希腊文、西里尔字母、亚美尼亚语、希伯来文、阿拉伯文、叙利亚文等字母，需要2字节编码（Unicode 范围由 U+0080~U+07FF）。
     • 其他语言的字符（包括中日韩文字、东南亚文字、中东文字等）包含了大部分常用字，使用3字节编码。
     • 其他极少使用的语言字符使用4字节编码。
   • 字节结构：UTF-8 编码字符的字节结构具有特定的标记位集，用于指示字符的编码长度和字节顺序。例如，表示非 ASCII 字符的多字节串的第一个字节总是在0xC0到0XFD的范围里，并指出这个字符包含多少个字节；而多字节串的其余字节都在0x80到0xBF范围里。
4. 应用场景与意义
   • 网页与电子邮件：UTF-8 是网页和电子邮件中常用的字符编码，因为它能够支持多种语言的字符显示，使得同一页面可以显示中文简体、繁体及其他语言（如日文、韩文）等。
   • 数据存储与传输：由于 UTF-8 的兼容性和高效性，它也被广泛应用于数据存储和传输领域，如数据库存储、文件传输等。

综上所述，UTF-8 是一种功能强大且广泛应用的字符编码方式，它支持 Unicode 标准中的所有字符，并与 ASCII 编码兼容，为各种语言的字符显示和数据存储提供了有力的支持。

2.9 Polyfills ​

2.10 MVVM、MVC 和 MVP 模式的区别 ​

MVVM（Model-View-ViewModel）、MVC（Model-View-Controller）和 MVP（Model-View-Presenter）是三种不同的软件架构模式，虽然它们的目标都是实现一种分离关注点的结构，但它们之间存在显著的差异。

1. MVC 模式：
   • Model：数据层，负责与数据库或远程服务器交互，存取和操作数据。
   • View：视图层，负责用户界面的呈现。它不包含任何业务逻辑，仅显示从 Model 获得的数据。
   • Controller：控制器层，协调 Model 和 View，处理用户输入并更新 Model 和 View。
2. MVP 模式：
   • Model：与 MVC 中相同，负责数据的管理。
   • View：与 MVC 中相同，负责显示内容。
   • Presenter：充当中介者，从 Model 获取数据并更新 View，而且能够处理复杂的逻辑，减轻 View 的负担。
3. MVVM 模式：
   • Model：与 MVC 和 MVP 中相同，负责数据的管理。
   • View：与 MVC 和 MVP 中相同，负责显示内容。
   • ViewModel：负责将 Model 和 View 连接起来。通过数据绑定，View 自动更新以响应一切 Model 的变化，从而显著简化了代码量。
4. 总结：
   • MVC：
     • 更适用于传统的服务器渲染应用。
     • 最早提出的设计模式之一，广泛应用于 Web 开发，如传统的 Java EE、ASP.NET 应用中。典型的例子是使用 Spring MVC 框架进行 Java Web 开发，View 层通常使用 JSP 或 Thymeleaf。
   • MVP：
     • 适用于 Web 应用和桌面应用，但逻辑较为复杂。
     • 在 Android 开发中使用较多。在 Android 中，由于 Activity 和 Fragment 既承担了逻辑又负责了 UI 渲染，使用 MVP 模式可以通过 Presenter 来分离这些责任，使得代码更易维护和测试。
   • MVVM：
     • 非常适合前端框架如 Vue、React、Angular，能够更好地处理 UI 绑定和状态管理。
     • 不仅在 Vue 中使用，而且在其他现代前端框架如 Angular 和 React（虽然更偏向于 Flux/Redux 架构）中也有类似的实现。MVVM 使得开发者可以专注于业务逻辑和数据流，框架会处理具体的 DOM 操作和视图更新。Vue 提供了简洁的双向数据绑定，Angular 则使用了复杂的依赖注入和数据绑定，而 React 虽然采用单向数据流，但通过 Hooks、Context API 也能实现类似 MVVM 的效果。
5. 在 Vue 框架中，采用的是 MVVM 模式：
   • Model：数据状态（在 Vue 中通过 data 属性定义）。
   • View：模板（在 Vue 中通过 HTML、模板语法和 插值）。
   • ViewModel：Vue 实例，它连接了 Model 和 View，通过双向数据绑定（Vue 的核心功能之一）使得 View 会自动更新以响应 Model 的变化。