23秋招js面经（2）

⭐说一下Vue2响应式的实现

1. 创建 Vue 实例时，会调用 new Vue()，其中会通过 observe 函数对 data 数据进行观测。
2. 在 observe 函数中，会使用 Object.defineProperty 递归地遍历所有属性，并为每个属性创建对应的 getter 和 setter。
3. 在属性的 getter 中，会进行依赖收集。首先，通过闭包引用一个全局变量 Dep.target，该变量保存当前正在计算的 Watcher 实例。然后，在 getter 中调用 dep.depend() 方法，将当前的 Watcher 添加到依赖集合中。
4. 在属性的 setter 中，当属性的值发生改变时，会触发 setter。在 setter 中，会对新值进行响应式处理（递归调用 observe），并通知相关的依赖进行更新。这一过程通过调用 dep.notify() 实现，dep.notify() 会遍历依赖集合，调用每个依赖的 update 方法，触发相应的更新操作。
5. 在模板编译过程中，解析模板中的指令表达式，对每个指令表达式生成对应的 Watcher 实例。Watcher 实例内部会调用属性的 getter 方法，在 getter 中触发依赖收集的过程，将当前 Watcher 添加到依赖集合中。
6. 当属性的值发生变化时，会触发相应的更新操作。依赖收集过程中收集到的 Watcher 实例会在更新阶段被遍历，并调用其 update 方法来更新视图。

⭐关于跨域

跨域请求是指在浏览器中，当请求的源地址与请求地址的协议、域名、端口号不一致时，会被浏览器的同源策略所限制，这是为了保护用户的信息安全。

1. JSONP（JSON with Padding）：JSONP通过动态创建<script>标签来加载跨域的JS文件，利用HTML的<script>标签可以跨域访问的特性来获取数据。但是，JSONP只支持GET请求，并且需要服务器端的支持。
2. CORS（Cross-Origin Resource Sharing）：CORS是一种现代的跨域解决方案，通过在服务器端设置响应头部，允许客户端跨域访问资源。在前端开发中，可以通过设置服务器的响应头部字段Access-Control-Allow-Origin来允许特定的源进行跨域请求。
3. 代理服务器（Proxy Server）：通过在自己的服务器上设置一个代理服务器，将跨域请求转发到目标服务器，并将目标服务器的响应返回给前端。这种方法需要对服务器进行配置，适用于无法直接修改目标服务器响应头部的情况。
4. WebSocket：WebSocket是一种全双工通信协议，可以在同一域名下使用不同的端口进行跨域通信。通过建立WebSocket连接，可以实现实时通信和跨域数据传输。
5. iframe：通过在页面中嵌入不同域名的<iframe>元素，可以实现跨域请求和数据传输。

⭐请解释一下什么是响应式设计（Responsive Design），以及在开发响应式网站时需要考虑哪些方面，并列举常用方法

响应式设计（Responsive Design）是一种网页设计和开发的方法，旨在使网站能够适应不同设备、屏幕尺寸和浏览器窗口大小，以提供更好的用户体验。响应式设计通过使用灵活的布局、弹性的图像和媒体查询等技术，让网页能够根据用户设备的特性进行自适应和优化。

在开发响应式网站时，需要考虑以下几个方面：

1. 弹性布局：使用相对单位（如百分比、em、rem）而不是固定像素来定义元素的尺寸和布局。这样可以让网页的元素根据屏幕尺寸的变化而自动调整大小和位置。
2. 媒体查询：使用CSS的媒体查询功能来检测设备的特性（如屏幕宽度、触摸支持等），并根据不同的条件应用不同的样式规则。这样可以根据不同设备的屏幕大小和特性来调整网页的布局和样式。
3. 图片优化：针对不同设备加载适当尺寸和分辨率的图片，以减少加载时间和带宽占用。可以使用响应式图片技术，如<img srcset>和<picture>元素来提供多个不同尺寸的图片，并根据设备的屏幕密度和大小选择合适的图片加载。
4. 触摸友好性：优化网页在触摸设备上的交互和操作体验，比如增大可点击区域、使用合适的手势和触摸事件等。
5. 导航菜单：设计合适的导航菜单，以便在小屏幕设备上能够轻松导航和访问各个页面。
6. 测试和调试：在不同设备、不同浏览器和不同分辨率下进行测试和调试，以确保网页在各种情况下都能正常显示和运行。
7. 性能优化：考虑网页加载速度和性能，减少不必要的资源请求和加载，使用压缩和缓存等技术来提高网页的响应速度。

以下是一些常用的技术和方法来实现响应式设计：

1. 媒体查询（Media Queries）：使用CSS的媒体查询功能，根据设备的特性（如屏幕宽度、设备类型等）应用不同的样式。通过设置不同的CSS规则，可以根据设备的宽度、高度、方向等特性来改变布局和样式。
2. 相对单位（例如em和rem）：相对单位可以根据父元素或根元素的大小进行调整。em单位相对于父元素的字体大小，rem单位相对于根元素（通常是html元素）的字体大小。使用这些相对单位可以根据设备的屏幕大小自适应调整元素的大小。
3. 百分比布局：使用百分比作为元素的宽度、高度等属性值，以便根据容器的大小来调整元素的尺寸。
4. 视口单位（例如vw、vh）：视口单位是相对于视口宽度和高度的单位。vw表示视口宽度的百分比，vh表示视口高度的百分比。使用视口单位可以根据屏幕的实际尺寸来调整元素的大小。
5. 弹性盒布局（Flexbox）：弹性盒布局是一种灵活的布局方式，可以使容器中的元素在不同尺寸的屏幕上自动调整位置和大小。
6. 栅格布局（Grid）：网格布局是一种二维布局系统，可以将页面划分为行和列，并指定元素在网格中的位置。通过设置不同的网格模板和位置属性，可以实现灵活的响应式布局。
7. 响应式图片：使用srcset和sizes属性来提供不同尺寸的图片，以适应不同设备的显示需求。
8. 断点（Breakpoints）：根据不同设备的屏幕宽度和布局需求，设置断点来改变页面的布局和样式。

⭐什么是单页面应用（SPA）？它与传统多页面应用相比有什么优势和劣势？

单页面应用（Single Page Application，SPA）是一种Web应用程序的架构模式，它在加载初始HTML页面后，通过JavaScript动态地更新页面的内容，而不需要每次页面切换时重新加载整个页面。

与传统的多页面应用相比，SPA有以下优势：

1. 更好的用户体验：由于SPA使用了异步加载和局部更新的方式，用户在浏览网站时可以享受到更流畅、快速的交互体验，减少了页面刷新的延迟。
2. 较少的网络请求：SPA通常在初始加载时会下载所有所需的JavaScript、CSS和其他静态资源，之后只需要通过API请求数据。相比多页面应用，SPA减少了对服务器的频繁请求，提高了性能。
3. 良好的代码组织：SPA使用组件化的方式组织代码，将页面拆分为多个可重用的组件。这样可以提高代码的复用性、可维护性和可测试性，使开发工作更加高效。

然而，SPA也存在一些劣势：

1. 初始加载较慢：由于SPA需要在初始加载时下载所有所需资源，首次加载时间可能会较长。这对于一些网络条件较差的用户来说可能是一个问题。
2. 对SEO不友好：传统的搜索引擎爬虫通常会根据HTML页面的内容进行索引，而SPA的内容是通过JavaScript动态生成的，对搜索引擎的爬取和索引不太友好。虽然有一些技术可以解决这个问题（如服务器端渲染），但相对复杂。
3. 依赖于JavaScript：由于SPA大量依赖于JavaScript来处理页面逻辑和数据交互，因此如果用户禁用了JavaScript，SPA可能无法正常运行。