前端面试练习24.3.14

今天主要是对之前的复习做了一个整理分类：

跳转语雀，面试资料大全

什么是 DOCTYPE， 有何作用

DOCTYPE 是 HTML（超文本标记语言）文档类型的声明，其全称为 Document Type Declaration。它位于 HTML 文档的顶部，用于指定 HTML 文档所使用的文档类型和版本。DOCTYPE 告诉浏览器如何解析文档，并确保在不同浏览器中以相同的方式呈现页面。

DOCTYPE 的作用主要有以下几点：

1. 指定文档类型和版本： DOCTYPE 声明告诉浏览器使用哪个 HTML 规范来解析页面，以及页面使用的是 HTML 的哪个版本（如 HTML5、HTML 4.01 等）。

2. 触发标准模式： 当浏览器遇到正确的 DOCTYPE 声明时，会进入标准模式（Standards Mode），这意味着浏览器会尽可能按照标准规范来渲染页面，以确保页面在不同浏览器和不同平台上的一致性。

3. 避免怪异模式（Quirks Mode）： 如果缺少正确的 DOCTYPE 声明或者 DOCTYPE 声明不完整，浏览器可能会进入怪异模式，这会导致浏览器根据自身的规则解析页面，可能导致页面在不同浏览器上呈现不一致。

4. 验证文档的正确性： DOCTYPE 声明也可以被用来验证 HTML 文档的正确性，因为它指定了文档应该遵循的规范。

因此，DOCTYPE 对于确保 HTML 页面能够在不同的浏览器和平台上以一致的方式呈现非常重要。

HTML5 新特性

HTML5 是 HTML 的最新版本，引入了许多新特性和改进，以提升网页的功能性、交互性和性能。以下是 HTML5 的一些主要新特性：

1. 语义化标签： HTML5 引入了一系列的语义化标签，如 <header>、<footer>、<nav>、<article>、<section> 等，使得网页的结构更清晰明了，有助于搜索引擎优化和网页可访问性。

2. 多媒体支持： HTML5 提供了 <audio> 和 <video> 标签，使得在网页中嵌入音频和视频变得更加简单，并且提供了对这些媒体的控制和样式定制的功能。

3. Canvas 绘图： HTML5 的 <canvas> 元素允许开发者使用 JavaScript 在网页上进行动态图形的绘制，包括图表、动画和游戏等。

4. SVG 支持： HTML5 支持 Scalable Vector Graphics（可缩放矢量图形），使得在网页上使用矢量图形变得更加容易，并且图形可以无损地缩放到任意尺寸而不失真。

5. 本地存储： HTML5 引入了 Web Storage API 和 IndexedDB，使得在客户端浏览器中可以方便地存储和管理数据，包括本地存储、会话存储和数据库存储等。

6. 地理定位： HTML5 提供了 Geolocation API，允许网页获取用户的地理位置信息，这对于位置相关的应用和服务非常有用。

7. 拖放功能： HTML5 引入了拖放 API，使得开发者可以轻松地实现网页元素的拖放操作，例如拖动图片到编辑器中进行上传等。

8. 响应式设计支持： HTML5 引入了媒体查询（Media Queries），使得开发者可以根据设备的不同特性（如屏幕尺寸、分辨率等）调整网页的布局和样式，实现响应式设计。

9. Web Workers： HTML5 提供了 Web Workers API，允许在浏览器中创建后台线程执行 JavaScript 代码，以提高网页的性能和响应性。

10. WebSocket： HTML5 引入了 WebSocket API，使得在浏览器和服务器之间建立持久的双向通信通道变得更加简单，实现实时的数据交换和推送。

这些新特性使得 HTML5 成为一个更加强大和灵活的网页开发平台，有助于开发出更加功能丰富、性能优越的现代网页应用。

src 和 href 的区别

src 和 href 是 HTML 中两个常用的属性，它们分别用于不同的目的，有以下区别：

1. src (source)：

   • src 通常用于标签，比如 <img>、<script>、<iframe> 等，用于指定资源的来源，如图像、脚本或者嵌入的文档。
   • 当浏览器解析到带有 src 属性的标签时，会请求指定路径的资源，并将其嵌入到当前页面中。
   • 例如：<img src="image.jpg"> 会加载并显示 image.jpg 图片。

2. href (hypertext reference)：

   • href 通常用于超链接 <a> 标签中，用于指定链接目标的 URL 地址。
   • 当用户点击具有 href 属性的链接时，浏览器会跳转到指定的 URL 地址。
   • 例如：<a href="https://www.example.com">Link</a> 创建一个链接，点击该链接会跳转到 https://www.example.com。

总的来说，src 是用于引入外部资源（如图像、脚本、嵌入的文档等）的属性，而 href 则是用于创建超链接的属性。在使用时需要根据具体的标签和需求选择合适的属性。

MVC和MVVM

MVC（Model-View-Controller）和 MVVM（Model-View-ViewModel）都是常见的软件架构模式，用于组织和管理应用程序的代码。它们分别具有以下特点和区别：

MVC（Model-View-Controller）：

1. 模型（Model）： 模型负责处理应用程序的数据逻辑，包括数据的获取、处理和存储等操作。模型通常不直接与视图（View）交互，而是通过控制器（Controller）来实现。

2. 视图（View）： 视图负责显示用户界面，并将数据呈现给用户。视图通常是被动的，只负责显示数据，不涉及业务逻辑。

3. 控制器（Controller）： 控制器是模型和视图之间的中介，负责接收用户的输入，处理用户的请求，并更新模型或者视图。控制器通常包含了业务逻辑和应用程序流程的控制。

MVVM（Model-View-ViewModel）：

1. 模型（Model）： 与 MVC 中的模型相似，负责处理数据的获取、处理和存储等操作。

2. 视图（View）： 与 MVC 中的视图相似，负责显示用户界面。

3. 视图模型（ViewModel）： 视图模型是 MVVM 中的核心，它是视图和模型之间的连接器。视图模型负责将模型的数据转换为视图所需的格式，并提供视图所需的命令和数据绑定。视图模型通常包含了用户界面逻辑和业务逻辑，但不包含具体的视图呈现逻辑。

区别：

1. 数据绑定方式： 在 MVVM 中，视图与视图模型之间通过数据绑定进行连接，当模型的数据发生变化时，视图会自动更新。而在 MVC 中，视图通常通过控制器来获取和更新模型的数据。

2. 视图模型的角色： MVVM 引入了视图模型的概念，使得视图和模型之间的耦合度更低，提高了代码的可维护性和可测试性。

3. 前端框架： MVVM 通常与前端框架（如 Vue.js、Angular、React）结合使用，这些框架提供了强大的数据绑定和组件化能力。而 MVC 是一种通用的软件架构模式，可以应用于各种不同的平台和环境中。

总的来说，MVVM 在前端开发中比较流行，特别是在单页面应用程序（SPA）开发中，而 MVC 则更常见于传统的服务器端应用程序和桌面应用程序开发中。

computed和watch的区别

在Vue.js框架中，computed和watch都是Vue实例的选项，它们都用于响应数据的变化，但它们的用途和工作方式有所不同。

Computed 属性

1. 缓存性：computed属性是基于它们的依赖进行缓存的。只有当计算属性的依赖项发生改变时，计算属性才会重新计算。
2. 声明式：computed属性是声明式的，这意味着你只需要在模板中声明你想要展示的数据，而不需要手动声明数据是如何计算得来的。
3. 依赖追踪：Vue会自动追踪计算属性所依赖的数据源的变化，当依赖项的值发生变化时，计算属性会自动更新。
4. 性能优化：由于计算属性具有缓存性，它们可以避免不必要的计算，从而提高性能。
5. 使用场景：当你需要根据多个数据源计算得出一个值时，使用computed属性是合适的。

Watch 属性

1. 监听响应：watch属性用于监听Vue实例上的数据变化，当数据变化时执行特定的逻辑。
2. 执行函数：当被监听的数据发生变化时，watch会调用一个函数或方法来进行响应。
3. 无缓存：与computed属性不同，watch不会进行缓存，每次数据变化都会执行监听的函数。
4. 复杂逻辑：watch可以执行更复杂的逻辑，如执行异步操作或调用其他非计算属性的函数。
5. 使用场景：当你需要执行一些响应数据变化的复杂操作时，使用watch是合适的。

总结

使用computed属性，当你需要根据响应式数据计算得出一个值，并且这个值在依赖的数据变化时自动更新。

使用watch属性，当你需要执行一些响应数据变化的操作，尤其是当这些操作需要执行异步任务或复杂逻辑时。

选择使用computed还是watch取决于你的具体需求。如果你只是需要一个根据数据变化自动更新的值，那么computed属性是更好的选择。如果你需要在数据变化时执行一些逻辑，尤其是复杂的或异步的操作，那么watch属性将更适合。