前端面试题详解整理99|vuex状态管理，防抖节流，meta标签，闭包，flexbox,

金色的雨570
72 阅读22分钟

9.状态管理的方式除了redux，还有哪些
除了 Redux，还有一些其他流行的状态管理方式，适用于不同的项目需求和开发场景。以下是一些常见的状态管理方式：

  1. MobX：

    • MobX 是一个简单、可扩展且功能强大的状态管理库，它采用了响应式编程的思想，通过观察状态的变化来自动更新相关组件。MobX 非常适合管理中小型项目的状态，它的 API 相对简单，可以帮助开发者更快地构建应用。

  2. Context API：

    • React Context API 是 React 提供的一种用于跨组件传递数据的机制。虽然它不像 Redux 或 MobX 那样提供了统一的状态管理机制，但对于小型应用或组件层次较浅的情况，可以使用 Context API 来管理状态，避免引入额外的状态管理库。

  3. VueX：

    • VueX 是 Vue.js 官方提供的状态管理库，专门用于 Vue.js 应用。它通过集中式存储管理应用的所有组件状态，并提供了一套丰富的工具和规则来管理状态的变化。VueX 在 Vue.js 项目中广泛应用，是构建大型 Vue 应用的首选状态管理方案之一。

  4. Recoil：

    • Recoil 是 Facebook 推出的一个新型 React 状态管理库，它专注于简化复杂状态的管理。Recoil 支持原子化的状态更新和异步操作，提供了一种更直观、更灵活的状态管理方式，适用于大型复杂的 React 应用。

  5. RxJS：

    • RxJS 是一个响应式编程库，它基于观察者模式，通过 Observable 对象来处理异步数据流。虽然 RxJS 并不是专门用于状态管理的库，但它提供了丰富的操作符和工具，可以帮助开发者更好地管理和处理应用的状态变化。

  6. Apollo Client：

    • Apollo Client 是一个用于管理 GraphQL 数据的客户端库，它提供了一套现代化的数据管理解决方案，可以帮助开发者轻松地集成和管理 GraphQL 查询和更新操作。Apollo Client 适用于需要处理复杂数据结构和实现高度可定制性的数据查询和更新的项目。

选择合适的状态管理方式需要考虑项目的具体需求、开发团队的技术栈和经验水平，以及各种方案的优缺点。在实际项目中，可以根据需求灵活地选择和组合多种状态管理方式，或者根据项目的演进逐步调整和优化状态管理方案。

10.如何在项目中选择合适的状态管理方式

在项目中选择合适的状态管理方式取决于项目的规模、复杂度以及开发团队的技术栈和偏好。以下是一些常见的状态管理方式以及它们适用的场景：

  1. React Context API：

    • 适用场景：对于小型应用或组件层次较浅的情况，可以使用 React Context API 来管理状态，它提供了一种轻量级的方式来在组件之间共享数据。

  2. React Hooks：

    • 适用场景：对于简单的状态管理需求，可以使用 React Hooks（如 useState、useReducer 等）来管理组件内部的状态，避免引入额外的状态管理库。

  3. Redux：

    • 适用场景：对于中大型应用或需要在多个组件之间共享状态的情况，Redux 是一种强大的状态管理解决方案。它提供了统一的状态管理机制，可以更好地组织和管理应用的状态，并且具有强大的中间件支持。

  4. MobX：

    • 适用场景：与 Redux 类似，MobX 也是一种状态管理方案，但更加灵活和简洁。它基于响应式编程的思想，通过观察和自动追踪状态的变化来实现状态管理，适用于需要快速构建和维护的项目。

  5. GraphQL：

    • 适用场景：对于需要管理复杂数据结构和实现高度可定制性的数据查询和更新的项目，GraphQL 可以作为一种状态管理方案。它通过定义和执行查询语句来获取和更新数据，提供了更灵活和精细的数据管理能力。

  6. Vuex（Vue.js）：

    • 适用场景：对于 Vue.js 项目，Vuex 是一种专门为 Vue 应用设计的状态管理库。它提供了一种集中式存储管理应用的所有组件的状态，并以相应的规则保证状态只能按照一定的方式进行修改。

选择合适的状态管理方式需要考虑项目的具体需求和团队的技术水平，以及各种方案的优缺点。在实际项目中，可以根据需求灵活地组合使用多种状态管理方式，或者根据项目的演进逐步调整和优化状态管理方案。

作者：洒脱的六边形战士加麻加辣
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

字节前端实习一面

1.项目经历，项目中完成了哪些工作，是从0到1吗

2.介绍一些常用的meta标签

Meta 标签是 HTML 中用于提供页面元数据的标签，它们不会直接在页面中显示，但对浏览器和搜索引擎等客户端有重要作用。以下是一些常用的 Meta 标签及其作用：

  1. <meta charset="UTF-8">：

    • 作用：指定文档使用的字符编码，通常设置为 UTF-8，确保页面能够正确地显示各种语言和特殊字符。

  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">：

    • 作用：设置页面在移动设备上的视口（viewport），确保页面在各种设备上以合适的宽度和比例进行显示。

  3. <meta name="description" content="页面描述">：

    • 作用：提供页面的描述，通常用于搜索引擎结果页面（SERP）中显示网页摘要，影响搜索结果的展示。

  4. <meta name="keywords" content="关键词1, 关键词2, ...">：

    • 作用：指定页面的关键词，用逗号分隔多个关键词，有助于搜索引擎更好地理解页面内容。

  5. <meta name="author" content="作者名">：

    • 作用：指定页面的作者或制作者，用于页面的版权声明。

  6. <meta name="robots" content="index,follow">：

    • 作用：指定搜索引擎爬虫的行为，index 表示允许搜索引擎索引页面，follow 表示允许搜索引擎跟踪页面中的链接。

  7. <meta http-equiv="refresh" content="5;url=http://example.com">：

    • 作用：设置页面自动跳转或刷新，5 表示跳转或刷新的时间（秒），url=http://example.com 表示跳转的目标 URL。

  8. <meta name="apple-mobile-web-app-capable" content="yes">：

    • 作用：指定是否启用 Web 应用程序模式（Web App Mode）在 iOS 设备上运行，将网站添加到主屏幕时，是否显示浏览器 UI。

  9. <meta name="apple-mobile-web-app-title" content="标题">：

    • 作用：指定在 iOS 设备上启用 Web 应用程序模式时显示的标题。

  10. <meta name="apple-mobile-web-app-status-bar-style" content="black">：

    • 作用：指定在 iOS 设备上启用 Web 应用程序模式时状态栏的样式，可以设置为 default、black 或 black-translucent。

这些 Meta 标签对于优化页面的 SEO、提高用户体验、适配移动设备等方面都具有重要作用，开发者可以根据实际需求合理地使用这些标签。

3.举例一些H5语义化标签

HTML5 引入了许多语义化标签，这些标签可以更清晰地描述文档结构和内容，提高了文档的可读性和可访问性。以下是一些常见的 HTML5 语义化标签及其用途的示例：

  1. <header>：定义文档或节的页眉，通常包含导航链接、logo 等内容。

    <header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>

  2. <nav>：定义导航链接的区域，包含页面导航链接、目录等内容。

    <nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

  3. <main>：定义文档的主要内容，通常是页面的核心内容。

    <main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</main>

  4. <section>：定义文档的一个区段，通常包含相关的内容，可以是文章、小部件、功能区等。

    <section>
    <h2>公司简介</h2>
    <p>关于公司的简介...</p>
</section>

  5. <article>：定义一个独立的、完整的文章内容，通常包含标题、作者、时间等。

    <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
    <footer>作者：某某 | 发布时间：2022-03-08</footer>
</article>

  6. <aside>：定义与页面主要内容相关的侧边栏内容，通常包含辅助性信息、广告、相关链接等。

    <aside>
    <h3>相关链接</h3>
    <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
        <li><a href="#">链接3</a></li>
    </ul>
</aside>

  7. <footer>：定义文档或节的页脚，通常包含版权信息、联系方式等。

    <footer>
    <p>版权所有 &copy; 2022 公司名称</p>
    <p>联系电话：123-456-7890</p>
</footer>

这些标签的使用有助于提高网页的可读性和可访问性，使代码更具语义化，同时也有利于搜索引擎对网页内容的理解和索引。

4.CSS flex布局

CSS Flexbox（弹性盒子布局）是一种用于在容器中进行布局的模块，它提供了一种更加灵活和高效的方式来排列、对齐和分布子元素。Flexbox 提供了一种相对简单的布局模型，适用于水平和垂直方向的布局需求。以下是 Flexbox 的基本概念和用法：

  1. 容器和子元素：

    • 使用 Flexbox 布局时，将需要进行布局的元素设置为 Flex 容器（Flex Container），并将其子元素设置为 Flex 项目（Flex Items）。
    • 通过设置容器的 display 属性为 flex 或 inline-flex 来定义 Flex 容器，例如：display: flex;

  2. 主轴和交叉轴：

    • 在 Flexbox 布局中，存在主轴（Main Axis）和交叉轴（Cross Axis）两个概念。
    • 主轴是 Flex 容器的主要方向，而交叉轴是与主轴垂直的方向。

  3. 弹性盒子属性：

    • Flex 容器上的属性：
      • flex-direction：设置主轴的方向（row、row-reverse、column、column-reverse）。
      • justify-content：定义在主轴上如何分配额外的空间（flex-start、flex-end、center、space-between、space-around）。
      • align-items：定义在交叉轴上如何对齐每个 Flex 项目（flex-start、flex-end、center、baseline、stretch）。
      • align-content：定义在交叉轴上如何分配多个行或列的空间。
    • Flex 项目上的属性：
      • order：定义 Flex 项目的显示顺序。
      • flex-grow：定义 Flex 项目的放大比例。
      • flex-shrink：定义 Flex 项目的收缩比例。
      • flex-basis：定义 Flex 项目在主轴上的初始大小。
      • flex：同时设置 flex-grow、flex-shrink 和 flex-basis 属性。
      • align-self：覆盖容器的 align-items 属性，为单个 Flex 项目定义交叉轴对齐方式。

  4. Flexbox 布局的应用：

    • 实现水平居中和垂直居中。
    • 实现等高布局。
    • 实现自适应布局。
    • 创建响应式网格布局。
    • 实现复杂的排版需求。

总之，Flexbox 布局提供了一种简单而强大的方式来进行布局，它在响应式设计和网页布局中被广泛应用，能够帮助开发者更轻松地实现各种复杂的布局需求。

5.js中闭包有哪些应用场景

闭包是 JavaScript 中的一个重要概念，它可以帮助我们在函数中创建私有变量，并且可以延长变量的生命周期。以下是一些闭包常见的应用场景：

  1. 模块化开发： 使用闭包可以创建私有作用域，从而实现模块化开发。将函数和变量封装在闭包中，可以避免全局命名冲突，并且提供了更好的代码组织和可维护性。

  2. 封装私有变量和方法： 使用闭包可以创建私有变量和方法，使其在外部不可访问。这样可以隐藏实现细节，提供对外接口，增强了代码的安全性和可靠性。

  3. 实现函数柯里化： 通过闭包可以实现函数的柯里化（Currying），即将一个多参数的函数转换为一系列单参数的函数。这样可以实现更灵活的函数调用方式。

  4. 保存函数的状态： 闭包可以保存函数的状态，使得函数在不同的执行环境中具有不同的行为。这种特性常用于事件处理函数、定时器和回调函数等场景中。

  5. 实现私有成员和特权方法： 闭包可以实现面向对象编程中的私有成员和特权方法。通过闭包可以创建只能被内部方法访问的私有变量，并且可以通过特权方法间接访问和修改这些变量。

  6. 缓存数据： 使用闭包可以缓存函数的计算结果，避免重复计算，提高程序性能。这种技术常用于需要频繁调用的计算密集型任务中。

  7. 实现回调函数： 闭包常用于实现回调函数，将函数作为参数传递给其他函数，在特定的条件下执行。

  8. 实现定时器： 使用闭包可以实现定时器，延迟执行代码或周期性执行代码，例如 setTimeout 和 setInterval 函数。

总之，闭包是 JavaScript 中非常有用的特性，可以用于实现各种功能和解决各种问题，提高了代码的灵活性和可复用性。

6.js如何实现防抖节流

防抖（Debouncing）和节流（Throttling）是用于控制 JavaScript 中频繁触发的函数执行频率的两种常见技术。它们可以帮助减少不必要的函数执行次数，提高性能和用户体验。下面是它们的实现方式：

防抖（Debouncing）：

防抖的原理是在事件触发后等待一段时间，如果在这段时间内没有再次触发该事件，才执行函数，否则就重新开始计时。

function debounce(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

使用示例：

const debounceFunc = debounce(() => {
    console.log('Function debounced');
}, 300);

// 当事件触发时调用 debounceFunc
debounceFunc();

节流（Throttling）：

节流的原理是规定一个单位时间，在这个单位时间内，只能触发一次函数执行，如果在单位时间内触发多次，只有一次生效。

function throttle(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        if (!timer) {
            timer = setTimeout(() => {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    };
}

使用示例：

const throttleFunc = throttle(() => {
    console.log('Function throttled');
}, 300);

// 当事件触发时调用 throttleFunc
throttleFunc();

区别：

  • 防抖会等待一定时间后执行函数，如果在这段时间内又触发了事件，则重新计时；
  • 节流会规定一个时间间隔，在这个间隔内只能执行一次函数，多次触发也只执行一次函数。

根据实际需求，选择合适的防抖或节流函数来优化性能。

7.页面如何做移动端适配

移动端适配是确保网页在不同移动设备上（如手机和平板电脑）以及不同屏幕尺寸下都能够良好显示和交互的过程。以下是一些常用的方法和技巧来实现移动端适配：

  1. 使用响应式布局（Responsive Layout）：

    • 使用相对单位（如百分比、vw、vh）来定义元素的尺寸和布局，而不是固定的像素值。
    • 使用媒体查询（Media Queries）来根据设备的屏幕宽度和高度应用不同的 CSS 样式，以适应不同尺寸的设备。
    • 设计弹性布局（Flexbox）或栅格系统，以实现更灵活的布局和对齐方式。

  2. 图像和媒体资源的优化：

    • 使用适当大小和格式的图像，以减少加载时间和带宽消耗。
    • 使用图片响应式设计（Responsive Images）来根据设备屏幕的大小和分辨率动态加载不同尺寸的图像。

  3. 触摸友好的交互设计：

    • 使用大而简单的触摸目标，以便用户在小屏幕上轻松点击或触摸。
    • 避免使用鼠标悬停事件，并考虑使用触摸友好的手势（如滑动、拖动等）来增强用户体验。

  4. 字体和文本排版的优化：

    • 使用相对单位或字体大小缩放技术（如rem、em）来设置字体大小，以便在不同设备上保持一致的可读性。
    • 考虑使用系统字体或Web字体，以确保在不同设备和浏览器上的字体一致性。

  5. 测试和调试：

    • 使用浏览器的开发者工具来模拟不同的设备尺寸和分辨率，进行实时的调试和优化。
    • 在真实的移动设备上进行测试，以确保页面在实际设备上的显示和交互效果。

综上所述，移动端适配涉及到多个方面，包括布局、图像优化、交互设计和字体排版等。通过使用响应式布局和优化技术，可以确保网页在不同移动设备上都能够提供良好的用户体验。

8.对于一个100x200的元素，如何做750px大小的移动端适配
针对移动端适配，你可以考虑使用响应式设计的方法来调整元素的大小和布局，以确保在不同尺寸的设备上都能够获得良好的用户体验。下面是一种可能的解决方案：

  1. 使用 CSS 单位进行适配：

    • 将元素的尺寸和布局样式使用相对单位（如百分比、vw、vh）进行设置，而不是使用固定的像素值。
    • 对于元素的宽度，可以使用百分比来设置，例如 width: 100%，这样元素将会随着视口的大小而自动调整宽度。
    • 对于元素的高度，可以使用 vh（视口高度的百分比）来设置，例如 height: 50vh，这样元素的高度将会占据视口高度的一定比例。

  2. 使用媒体查询进行调整：

    • 使用 CSS 媒体查询来根据设备的屏幕宽度应用不同的样式。你可以针对不同的屏幕尺寸设置不同的样式规则，以适应不同的设备尺寸。
    • 例如，可以在屏幕宽度小于某个阈值时，将元素的宽度设置为固定的像素值，以保证在较小的屏幕上能够显示良好。

  3. 考虑使用弹性布局（Flexbox）或栅格系统：

    • 弹性布局和栅格系统可以帮助你更灵活地管理元素的布局，根据不同的屏幕尺寸和方向进行调整，从而实现更好的移动端适配效果。
    • Flexbox 和栅格系统能够让你更轻松地实现元素的自适应布局和对齐方式，以及在不同屏幕尺寸下的优雅响应。

  4. 测试和优化：

    • 在进行移动端适配时，一定要进行测试，确保页面在不同尺寸和设备上都能够正常显示和操作。
    • 可以使用浏览器的开发者工具或者模拟器来模拟不同设备的屏幕尺寸和方向，进行实时的调试和优化。

综上所述，使用相对单位、媒体查询和弹性布局等技术可以帮助你实现元素在移动端的适配，确保页面在不同设备上都能够呈现出良好的用户体验。

9.栈在前端开发中的应用

栈（Stack）是一种数据结构，具有“后进先出”（Last In, First Out，LIFO）的特性，即最后进入的元素最先被访问或移除。在前端开发中，栈数据结构通常用于处理以下几种情况：

  1. 浏览器历史记录管理：浏览器的前进和后退按钮通常会触发浏览器历史记录的操作，而历史记录可以使用栈数据结构来管理。每当用户浏览新页面时，该页面的 URL 将被推入历史记录栈中，而点击后退按钮则会将当前页面弹出栈顶，以回到上一个页面。

  2. 路由管理：在前端单页面应用（SPA）中，路由管理器（如Vue Router、React Router等）通常使用栈来管理路由状态。当用户访问新页面时，路由信息将被推入栈中，而在导航回前一个页面时，路由信息则从栈中弹出。

  3. 函数调用堆栈：在 JavaScript 中，函数调用堆栈是通过栈数据结构来实现的。当一个函数被调用时，它的上下文（包括参数、局部变量等）将被推入调用堆栈中，而当函数执行完毕时，其上下文将被弹出。这种机制使得函数可以按照正确的顺序执行，并且能够正确处理函数的嵌套调用。

  4. 撤销和重做功能：在一些应用程序中，如文本编辑器或图形绘制工具，可以使用栈来实现撤销（undo）和重做（redo）功能。每当用户执行一个操作时，该操作的状态将被推入栈中，而点击撤销按钮则会从栈顶弹出状态，并执行相应的逆操作。

  5. 括号匹配：在编写代码时，栈可以用来检查括号是否匹配。例如，可以使用栈来检查一个表达式中的括号是否成对出现，并且是否正确嵌套。

总的来说，栈作为一种常见的数据结构，在前端开发中有着广泛的应用，可以用于处理许多与状态管理、导航、操作记录等相关的问题。

10.项目中有没有涉及到大文件和后端的交互
您提到的“大文件”通常指的是较大的文件，例如图像、视频、音频、PDF文档等。在项目中涉及到大文件的情况可能包括：

  1. 文件上传和下载：项目可能需要实现用户上传大文件或者从服务器下载大文件的功能，例如上传图片、视频或其他类型的文件，或者从服务器下载大型数据文件。

  2. 多媒体处理：如果项目中需要处理大型媒体文件，例如对视频文件进行剪辑、转码、压缩等操作，可能需要与后端进行交互来实现这些功能。

  3. 数据传输：如果项目涉及大量数据的传输，例如从后端获取大型数据集或者向后端发送大量数据，可能会涉及到大文件的传输。

在处理大文件时，需要考虑以下几点：

  • 文件分片和断点续传：对于大文件上传，可以考虑将文件分成多个小片段进行上传，以便降低服务器压力并实现断点续传功能。

  • 服务器配置：需要确保服务器端有足够的存储空间和带宽来处理大文件的上传和下载请求。

  • 前端性能优化：对于前端页面，可以通过合理的界面设计和用户体验优化，减少对大文件的直接访问，以提高页面加载速度和性能。

  • 网络传输优化：可以采用压缩算法或者网络传输优化技术，减小文件大小或者提高文件传输速度，从而提升用户体验。

在与后端进行交互时，需要确保服务器端能够有效处理大文件的上传和下载请求，并且采取合适的技术手段来优化传输性能和保障数据安全。

11.VueRouter中hash和history模式的区别

Vue Router 中的 hash 模式和 history 模式是两种路由模式，它们在 URL 结构和浏览器兼容性方面有所不同。

  1. Hash 模式：

    • URL 结构：Hash 模式下，路由器将使用 URL 的哈希部分（#）来管理页面状态，所有路由都会带有 # 符号。
    • 示例：http://example.com/#/about
    • 兼容性：Hash 模式在所有现代浏览器中都有良好的兼容性，包括较老的浏览器。
    • 部署简单：不需要服务器端配置，可以直接在静态服务器上运行。
    • 缺点：URL 中的 # 符号看起来不够美观，且可能对 SEO 产生不利影响。

  2. History 模式：

    • URL 结构：History 模式下，路由器使用浏览器的 History API 来管理页面状态，URL 中不再带有 # 符号，而是使用标准的 URL 路径。
    • 示例：http://example.com/about
    • 兼容性：History 模式在较新的浏览器中有良好的兼容性，但在一些较旧的浏览器中可能不支持。
    • 美观：相比 Hash 模式，URL 更加美观，不含有冗余的 # 符号，更符合用户预期。
    • 需要服务器端配置：History 模式需要服务器端支持，因为它需要在服务器上配置一个 fallback 地址，用于处理404错误时的页面重定向。

总的来说，Hash 模式在兼容性和部署简单性方面有优势，但 URL 不够美观；而 History 模式在 URL 结构上更加美观，但需要服务器端支持，并且在一些旧浏览器中可能存在兼容性问题。因此，在选择路由模式时，需要根据项目的具体情况和需求来决定使用哪种模式。 作者：平民玩家
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

avatar
文章
阅读
粉丝