今天主要是对之前的复习做了一个整理分类:
跳转语雀,面试资料大全
什么是 DOCTYPE, 有何作用
DOCTYPE 是 HTML(超文本标记语言)文档类型的声明,其全称为 Document Type Declaration。它位于 HTML 文档的顶部,用于指定 HTML 文档所使用的文档类型和版本。DOCTYPE 告诉浏览器如何解析文档,并确保在不同浏览器中以相同的方式呈现页面。
DOCTYPE 的作用主要有以下几点:
指定文档类型和版本: DOCTYPE 声明告诉浏览器使用哪个 HTML 规范来解析页面,以及页面使用的是 HTML 的哪个版本(如 HTML5、HTML 4.01 等)。
触发标准模式: 当浏览器遇到正确的 DOCTYPE 声明时,会进入标准模式(Standards Mode),这意味着浏览器会尽可能按照标准规范来渲染页面,以确保页面在不同浏览器和不同平台上的一致性。
避免怪异模式(Quirks Mode): 如果缺少正确的 DOCTYPE 声明或者 DOCTYPE 声明不完整,浏览器可能会进入怪异模式,这会导致浏览器根据自身的规则解析页面,可能导致页面在不同浏览器上呈现不一致。
验证文档的正确性: DOCTYPE 声明也可以被用来验证 HTML 文档的正确性,因为它指定了文档应该遵循的规范。
因此,DOCTYPE 对于确保 HTML 页面能够在不同的浏览器和平台上以一致的方式呈现非常重要。
HTML5 新特性
HTML5 是 HTML 的最新版本,引入了许多新特性和改进,以提升网页的功能性、交互性和性能。以下是 HTML5 的一些主要新特性:
语义化标签: HTML5 引入了一系列的语义化标签,如
<header>
、<footer>
、<nav>
、<article>
、<section>
等,使得网页的结构更清晰明了,有助于搜索引擎优化和网页可访问性。多媒体支持: HTML5 提供了
<audio>
和<video>
标签,使得在网页中嵌入音频和视频变得更加简单,并且提供了对这些媒体的控制和样式定制的功能。Canvas 绘图: HTML5 的
<canvas>
元素允许开发者使用 JavaScript 在网页上进行动态图形的绘制,包括图表、动画和游戏等。SVG 支持: HTML5 支持 Scalable Vector Graphics(可缩放矢量图形),使得在网页上使用矢量图形变得更加容易,并且图形可以无损地缩放到任意尺寸而不失真。
本地存储: HTML5 引入了 Web Storage API 和 IndexedDB,使得在客户端浏览器中可以方便地存储和管理数据,包括本地存储、会话存储和数据库存储等。
地理定位: HTML5 提供了 Geolocation API,允许网页获取用户的地理位置信息,这对于位置相关的应用和服务非常有用。
拖放功能: HTML5 引入了拖放 API,使得开发者可以轻松地实现网页元素的拖放操作,例如拖动图片到编辑器中进行上传等。
响应式设计支持: HTML5 引入了媒体查询(Media Queries),使得开发者可以根据设备的不同特性(如屏幕尺寸、分辨率等)调整网页的布局和样式,实现响应式设计。
Web Workers: HTML5 提供了 Web Workers API,允许在浏览器中创建后台线程执行 JavaScript 代码,以提高网页的性能和响应性。
WebSocket: HTML5 引入了 WebSocket API,使得在浏览器和服务器之间建立持久的双向通信通道变得更加简单,实现实时的数据交换和推送。
这些新特性使得 HTML5 成为一个更加强大和灵活的网页开发平台,有助于开发出更加功能丰富、性能优越的现代网页应用。
src 和 href 的区别
src
和href
是 HTML 中两个常用的属性,它们分别用于不同的目的,有以下区别:
src (source):
src
通常用于标签,比如<img>
、<script>
、<iframe>
等,用于指定资源的来源,如图像、脚本或者嵌入的文档。- 当浏览器解析到带有
src
属性的标签时,会请求指定路径的资源,并将其嵌入到当前页面中。- 例如:
<img src="image.jpg">
会加载并显示image.jpg
图片。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):
模型(Model): 模型负责处理应用程序的数据逻辑,包括数据的获取、处理和存储等操作。模型通常不直接与视图(View)交互,而是通过控制器(Controller)来实现。
视图(View): 视图负责显示用户界面,并将数据呈现给用户。视图通常是被动的,只负责显示数据,不涉及业务逻辑。
控制器(Controller): 控制器是模型和视图之间的中介,负责接收用户的输入,处理用户的请求,并更新模型或者视图。控制器通常包含了业务逻辑和应用程序流程的控制。
MVVM(Model-View-ViewModel):
模型(Model): 与 MVC 中的模型相似,负责处理数据的获取、处理和存储等操作。
视图(View): 与 MVC 中的视图相似,负责显示用户界面。
视图模型(ViewModel): 视图模型是 MVVM 中的核心,它是视图和模型之间的连接器。视图模型负责将模型的数据转换为视图所需的格式,并提供视图所需的命令和数据绑定。视图模型通常包含了用户界面逻辑和业务逻辑,但不包含具体的视图呈现逻辑。
区别:
数据绑定方式: 在 MVVM 中,视图与视图模型之间通过数据绑定进行连接,当模型的数据发生变化时,视图会自动更新。而在 MVC 中,视图通常通过控制器来获取和更新模型的数据。
视图模型的角色: MVVM 引入了视图模型的概念,使得视图和模型之间的耦合度更低,提高了代码的可维护性和可测试性。
前端框架: MVVM 通常与前端框架(如 Vue.js、Angular、React)结合使用,这些框架提供了强大的数据绑定和组件化能力。而 MVC 是一种通用的软件架构模式,可以应用于各种不同的平台和环境中。
总的来说,MVVM 在前端开发中比较流行,特别是在单页面应用程序(SPA)开发中,而 MVC 则更常见于传统的服务器端应用程序和桌面应用程序开发中。
computed和watch的区别
在Vue.js框架中,
computed
和watch
都是Vue实例的选项,它们都用于响应数据的变化,但它们的用途和工作方式有所不同。Computed 属性
- 缓存性:
computed
属性是基于它们的依赖进行缓存的。只有当计算属性的依赖项发生改变时,计算属性才会重新计算。- 声明式:
computed
属性是声明式的,这意味着你只需要在模板中声明你想要展示的数据,而不需要手动声明数据是如何计算得来的。- 依赖追踪:Vue会自动追踪计算属性所依赖的数据源的变化,当依赖项的值发生变化时,计算属性会自动更新。
- 性能优化:由于计算属性具有缓存性,它们可以避免不必要的计算,从而提高性能。
- 使用场景:当你需要根据多个数据源计算得出一个值时,使用
computed
属性是合适的。Watch 属性
- 监听响应:
watch
属性用于监听Vue实例上的数据变化,当数据变化时执行特定的逻辑。- 执行函数:当被监听的数据发生变化时,
watch
会调用一个函数或方法来进行响应。- 无缓存:与
computed
属性不同,watch
不会进行缓存,每次数据变化都会执行监听的函数。- 复杂逻辑:
watch
可以执行更复杂的逻辑,如执行异步操作或调用其他非计算属性的函数。- 使用场景:当你需要执行一些响应数据变化的复杂操作时,使用
watch
是合适的。总结
使用
computed
属性,当你需要根据响应式数据计算得出一个值,并且这个值在依赖的数据变化时自动更新。使用
watch
属性,当你需要执行一些响应数据变化的操作,尤其是当这些操作需要执行异步任务或复杂逻辑时。选择使用
computed
还是watch
取决于你的具体需求。如果你只是需要一个根据数据变化自动更新的值,那么computed
属性是更好的选择。如果你需要在数据变化时执行一些逻辑,尤其是复杂的或异步的操作,那么watch
属性将更适合。