前端面试第 71 期 - 2024.10.26 更新前端面试问题总结（20道题）

2024.10.18 - 2024.10.26 更新前端面试问题总结（20道题）
获取更多面试相关问题可以访问
github 地址: github.com/pro-collect…
gitee 地址: gitee.com/yanleweb/in…

目录：

初级开发者相关问题【共计 7 道题】

1026. package.json 里面，表示导出包内容的配置有哪些【热度: 260】【web应用场景】
1027. html 里面哪些是块级元素， 哪些是行内元素【热度: 160】【web应用场景】
1028. HTML 中有哪些语义化标签【热度: 32】【web应用场景】
1029. CSS 如何实现固定长宽比的元素【热度: 546】【CSS】
1030. Javascript 数组中有那些方法可以改变自身，那些不可以【热度: 307】【web应用场景】
1031. 事件委托是什么概念， 有何适用场景【热度: 265】【JavaScript】
1032. Object.keys 与 Object.getOwnPropertyNames() 有何区别【热度: 210】【JavaScript】

中级开发者相关问题【共计 8 道题】

1017. 前端工程里面，如何检测并避免循环依赖【热度: 359】【工程化】
1018. eslint 该如何配置【热度: 487】【工程化】
1019. eslint 有哪些实用的插件， 该如何配置【热度: 488】【工程化】
1020. 闭包有哪些使用场景，请举例【热度: 679】【JavaScript】【出题公司: 小米】
1021. 如何使用 node 做一个全局命令行工具【热度: 141】【Nodejs】【出题公司: 阿里巴巴】
1022. 什么是 semver 规范，~1.2.3 与 ^1.2.3 的版本号范围是多少【热度: 233】【Nodejs】【出题公司: 腾讯】
1023. npm install 之后需要执行一些处理工作，应该如何处理【热度: 162】【web应用场景】【出题公司: PDD】
1024. flex 布局中 align-content 与 align-items 有何区别【热度: 106】【web应用场景】

高级开发者相关问题【共计 5 道题】

1020. eslint 如何集成到 webpack【热度: 488】【工程化】

1021. 如何定制化开发一个 eslint 插件， 功能是实现提示检验某一个项目里面的字符串error【热度: 10】【工程化】

1022. JS 浏览器事循环有哪些使用案例？【热度: 526】【JavaScript】【出题公司: 腾讯】

1023. 前端应用 CICD 有哪些方式实现【热度: 120】【工程化】【出题公司: 京东】

1024. 如何保证项目质量【热度: 784】【web应用场景】

初级开发者相关问题【共计 7 道题】

1026. package.json 里面，表示导出包内容的配置有哪些【热度: 260】【web应用场景】

在package.json文件中，与导出包内容相关的主要配置有以下几个：

一、main字段

1. 作用：

   • 指定当你的包被引入时，模块系统应该加载的主要入口文件。
   • 对于 CommonJS 和 ES6 模块系统，这个文件将作为默认的入口点。

2. 示例：

   • "main": "dist/index.js"表示当你的包被引入时，会加载dist目录下的index.js文件作为主要入口。

二、module字段

1. 作用：

   • 专门为 ES6 模块系统指定入口文件。
   • 一些现代的构建工具和环境（如 Webpack、Rollup 等）会优先使用这个字段来确定 ES6 模块的入口点。

2. 示例：

   • "module": "esm/index.js"表示对于支持 ES6 模块的环境，会加载esm目录下的index.js文件。

三、exports字段（在 Node.js 12+ 和一些现代构建工具中支持）

1. 作用：

   • 提供了一种更灵活的方式来指定包的不同入口点，可以根据不同的模块系统和环境来导出不同的文件。
   • 可以同时为 CommonJS、ES6 模块、不同的子路径等指定特定的入口文件。

2. 示例：

   • "exports": {
       ".": {
         "import": "./esm/index.js",
         "require": "./cjs/index.js"
       },
       "./submodule": {
         "import": "./esm/submodule.js",
         "require": "./cjs/submodule.js"
       }
     }
     

• 在这个例子中，对于根路径（.），如果是 ES6 模块环境，会加载./esm/index.js；如果是 CommonJS 环境，会加载./cjs/index.js。对于./submodule子路径，也分别指定了不同模块系统的入口文件。

这些配置允许你控制包的导出内容和入口点，以便其他开发者能够正确地引入和使用你的包。根据你的项目结构和目标环境，可以选择合适的配置来确保包的可维护性和兼容性。

1027. html 里面哪些是块级元素， 哪些是行内元素【热度: 160】【web应用场景】

关键词：html 标签元素

在 HTML 中，元素可分为块级元素和行内元素。

一、块级元素

1. 特点：

   • 独占一行，在页面中垂直布局。
   • 可以设置宽度、高度、外边距（margin）和内边距（padding）等属性。
   • 即使不设置宽度，也会自动占据整行的宽度。

2. 常见的块级元素有：

   • <div>：通用的块级容器元素，可用于划分页面的不同部分。
   • <p>：段落元素，用于包含文本段落。
   • <h1>到<h6>：标题元素，用于表示不同级别的标题。
   • <ul>和<ol>：无序列表和有序列表元素。
   • <li>：列表项元素，用于包含在<ul>或<ol>中。
   • <blockquote>：引用块元素，用于引用大段文本。
   • <form>：表单元素，用于包含表单控件。
   • <table>：表格元素，用于创建表格结构。

二、行内元素

1. 特点：

   • 不会独占一行，多个行内元素可以在同一行内水平排列。
   • 宽度和高度由内容决定，不能直接设置宽度和高度。
   • 可以设置内边距和外边距，但上下边距的效果可能与块级元素不同。

2. 常见的行内元素有：

   • <span>：通用的行内容器元素，可用于包裹文本或其他行内元素。
   • <a>：链接元素，用于创建超链接。
   • <img>：图像元素，用于插入图片。
   • <strong>和<em>：强调元素，分别用于表示强烈强调和强调的文本。
   • <input>：输入框元素，用于表单中的用户输入。
   • <button>：按钮元素，用于触发特定的操作。
   • <label>：标签元素，通常与表单控件关联。

此外，还有一些元素具有特殊的显示特性，既可以表现为块级元素，也可以表现为行内元素，例如<li>元素在某些情况下可以作为块级元素显示，也可以通过 CSS 设置为行内元素显示。通过 CSS 的display属性，可以改变元素的默认显示方式，将块级元素转换为行内元素，或将行内元素转换为块级元素。

1031. HTML 中有哪些语义化标签【热度: 32】【web应用场景】

关键词：html 语义化标签

在 HTML 中，语义化标签是具有明确含义的标签，它们可以更好地描述网页的结构和内容，提高代码的可读性、可维护性以及对搜索引擎的优化。以下是一些常见的语义化标签：

一、文档结构相关标签

1. <header>：

   • 定义文档的页眉部分，通常包含网站的标志、导航栏、搜索框等。
   • 例如：

     <header>
       <h1>My Website</h1>
       <nav>
         <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
         </ul>
       </nav>
     </header>
     

2. <nav>：

   • 用于定义导航链接的部分，可以包含网站的主要导航菜单、侧边栏导航等。
   • 例如：

     <nav>
       <ul>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </nav>
     

3. <footer>：

   • 定义文档的页脚部分，通常包含版权信息、联系方式、相关链接等。
   • 例如：

     <footer>
       <p>Copyright © 2024. All rights reserved.</p>
     </footer>
     

4. <main>：

   • 表示文档的主要内容部分，每个页面应该只有一个<main>元素。
   • 例如：

     <main>
       <article>
         <h2>Article Title</h2>
         <p>Article content goes here.</p>
       </article>
     </main>
     

二、内容组织相关标签

1. <article>：

   • 表示一个独立的、完整的内容块，如一篇博客文章、新闻报道、论坛帖子等。
   • 例如：

     <article>
       <h2>News Article</h2>
       <p>Article text here.</p>
     </article>
     

2. <section>：

   • 用于对页面内容进行分组和划分，通常包含一个主题相关的内容块。
   • 例如：

     <section>
       <h2>Section Title</h2>
       <p>Section content goes here.</p>
     </section>
     

3. <aside>：

   • 表示与主要内容相关但可以独立存在的侧边栏内容，如广告、相关链接、注释等。
   • 例如：

     <main>
       <article>
         <h2>Main Article</h2>
         <p>Article content.</p>
       </article>
       <aside>
         <h3>Related Links</h3>
         <ul>
           <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
         </ul>
       </aside>
     </main>
     

三、文本内容相关标签

1. <h1>到<h6>：

   • 标题标签，用于表示不同级别的标题，<h1>为最高级别，<h6>为最低级别。
   • 例如：

     <h1>Main Title</h1>
     <h2>Subtitle</h2>
     

2. <p>：

   • 段落标签，用于包含文本段落。
   • 例如：

     <p>This is a paragraph of text.</p>
     

3. <strong>和<em>：

   • <strong>用于表示强烈强调的文本，通常显示为粗体。<em>用于表示强调的文本，通常显示为斜体。
   • 例如：

     <p>This is <strong>very important</strong> text. And this is <em>emphasized</em> text.</p>
     

4. <blockquote>：

   • 引用块标签，用于引用大段的文本内容。
   • 例如：

     <blockquote>
       <p>“This is a long quote from someone.”</p>
     </blockquote>
     

5. <q>：

   • 短引用标签，用于引用简短的文本内容，通常会自动加上引号。

   • 例如：

     <p>He said, <q>Hello!</q></p>
     

1032. CSS 如何实现固定长宽比的元素【热度: 546】【CSS】

关键词：固定长宽比

在 CSS 中，可以通过以下几种方式实现固定长宽比的元素：

一、使用 padding 实现

1. 原理：

   • 利用元素的padding属性以百分比形式设置时是相对于父元素宽度的特点，通过设置padding-top或padding-bottom来实现固定的长宽比。

2. 示例代码：

   <div class="aspect-ratio-box">
     <!-- 这里可以放置内容 -->
   </div>
   

   .aspect-ratio-box {
     width: 100%;
     position: relative;
     padding-top: 56.25%; /* 16:9 的长宽比，9/16 = 0.5625，即 56.25% */
   }
   .aspect-ratio-box > * {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }
   

   • 在这个例子中，设置了一个容器元素，通过padding-top为56.25%实现了 16:9 的长宽比。容器内的子元素通过绝对定位填充整个容器。

二、使用伪元素和vw单位实现

1. 原理：

   • 利用伪元素::before或::after，并设置其content属性为空，通过设置其height或width为相对于视口宽度（vw单位）的百分比来实现固定长宽比。

2. 示例代码：

   <div class="aspect-ratio-box-vw">
     <!-- 这里可以放置内容 -->
   </div>
   

   .aspect-ratio-box-vw {
     width: 100%;
     position: relative;
   }
   .aspect-ratio-box-vw::before {
     content: "";
     display: block;
     padding-top: 56.25%; /* 16:9 的长宽比 */
   }
   .aspect-ratio-box-vw > * {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }
   

   • 这个方法与第一种类似，但是使用了伪元素和padding-top相对于视口宽度的特点来实现长宽比。

三、使用 CSS Grid 实现

1. 原理：

   • 通过 CSS Grid 布局，设置一个网格容器，并定义其中一个维度的大小，然后让另一个维度自动填充以实现固定长宽比。

2. 示例代码：

   <div class="aspect-ratio-grid">
     <!-- 这里可以放置内容 -->
   </div>
   

   .aspect-ratio-grid {
     width: 100%;
     height: 0;
     padding-bottom: 56.25%; /* 16:9 的长宽比 */
     display: grid;
   }
   .aspect-ratio-grid > * {
     grid-row: 1;
     grid-column: 1;
   }
   

   • 在这个例子中，设置容器的padding-bottom为56.25%来实现 16:9 的长宽比，然后使用 CSS Grid 布局将子元素放置在网格的第一个单元格中。

1034. Javascript 数组中有那些方法可以改变自身，那些不可以【热度: 307】【web应用场景】

关键词：数组改变自身

在 JavaScript 中，数组的方法可以分为两类：改变自身的方法和不改变自身的方法。

一、改变自身的方法

1. push()：在数组末尾添加一个或多个元素，并返回新的数组长度。
2. pop()：删除数组的最后一个元素，并返回这个元素。
3. shift()：删除数组的第一个元素，并返回这个元素。
4. unshift()：在数组开头添加一个或多个元素，并返回新的数组长度。
5. splice()：通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。
6. sort()：对数组的元素进行排序，并返回排序后的数组。默认按照字符串编码的顺序进行排序。
7. reverse()：反转数组中的元素顺序，并返回反转后的数组。

二、不改变自身的方法

1. concat()：返回一个新数组，这个新数组是由调用该方法的数组和其他数组或值连接而成。

2. slice()：返回一个新的数组，包含从原数组中提取的元素。可以指定起始位置和结束位置（不包括结束位置的元素）。

3. indexOf()：返回在数组中首次出现的指定元素的索引，如果不存在则返回 -1。

4. lastIndexOf()：返回在数组中最后一次出现的指定元素的索引，如果不存在则返回 -1。

5. includes()：判断数组是否包含指定的元素，返回一个布尔值。

6. join()：将数组的所有元素连接成一个字符串，并返回这个字符串。可以指定连接元素的分隔符。

1035. 事件委托是什么概念， 有何适用场景【热度: 265】【JavaScript】

关键词：事件委托概念

事件委托（Event Delegation）是一种利用事件冒泡机制，将事件处理程序添加到父元素上，通过判断事件的目标元素来处理子元素事件的方法。

一、事件委托的原理

当一个事件在 DOM 元素上触发时，它会从最具体的目标元素开始向上冒泡，经过它的祖先元素，直到到达文档的根元素。事件委托利用这个特性，将事件处理程序添加到一个较高层次的父元素上，而不是为每个子元素单独添加事件处理程序。当事件在子元素上触发时，它会冒泡到父元素，父元素上的事件处理程序可以通过检查事件的目标元素来确定是否应该处理该事件。

二、事件委托的适用场景

1. 动态生成的元素

   • 当页面中有大量动态生成的元素时，如果为每个元素单独添加事件处理程序，会非常低效，因为每次生成新元素都需要重新添加事件处理程序。而使用事件委托，只需要在父元素上添加一个事件处理程序，就可以处理所有子元素的事件，无论子元素是在页面加载时就存在还是在后续动态生成的。

   • 例如，在一个列表中，当用户点击列表项时需要执行某个操作。如果列表项是动态生成的，使用事件委托可以避免为每个列表项单独添加点击事件处理程序。

2. 减少内存占用和提高性能

   • 为大量元素添加事件处理程序会占用较多的内存，并且可能会影响页面的性能。事件委托可以减少事件处理程序的数量，从而降低内存占用和提高性能。
   • 例如，在一个包含大量按钮的页面中，如果为每个按钮都添加一个点击事件处理程序，会消耗较多的内存。而使用事件委托，只需要在按钮的父元素上添加一个点击事件处理程序，就可以处理所有按钮的点击事件。

3. 统一处理相似元素的事件

   • 当有多个相似的元素需要处理相同的事件时，可以使用事件委托将它们的事件处理程序统一添加到一个父元素上，这样可以简化代码并提高可维护性。

   • 例如，在一个表格中，所有的单元格都需要处理点击事件，可以将点击事件处理程序添加到表格元素上，然后根据点击的目标单元格进行相应的处理。

1036. Object.keys 与 Object.getOwnPropertyNames() 有何区别【热度: 210】【JavaScript】

Object.keys()和Object.getOwnPropertyNames()都是用于获取对象自身属性名的方法，但它们之间存在一些区别：

一、返回值类型

1. Object.keys()：

   • 返回一个由对象自身可枚举属性名组成的数组。
   • 可枚举属性是指那些可以通过for...in循环遍历到的属性。

2. Object.getOwnPropertyNames()：

   • 返回一个由对象自身所有属性名组成的数组，无论属性是否可枚举。

二、可枚举性处理

1. Object.keys()：

   • 只返回可枚举属性的名称。如果一个属性被设置为不可枚举，它将不会出现在Object.keys()的返回结果中。
   • 例如，使用Object.defineProperty()定义的不可枚举属性不会被包含在Object.keys()的结果中。

2. Object.getOwnPropertyNames()：

   • 返回所有属性的名称，包括可枚举和不可枚举的属性。
   • 这使得它在需要获取对象的所有属性，无论其可枚举性如何时非常有用。

三、示例

1. 以下是一个使用Object.keys()和Object.getOwnPropertyNames()的示例：

const obj = {
  property1: "value1",
  property2: "value2",
};

Object.defineProperty(obj, "nonEnumerableProperty", {
  value: "value3",
  enumerable: false,
});

console.log(Object.keys(obj)); // ['property1', 'property2']
console.log(Object.getOwnPropertyNames(obj)); // ['property1', 'property2', 'nonEnumerableProperty']

在这个例子中，Object.keys()只返回了可枚举的属性property1和property2，而Object.getOwnPropertyNames()返回了所有属性，包括不可枚举的nonEnumerableProperty。

中级开发者相关问题【共计 8 道题】

1017. 前端工程里面，如何检测并避免循环依赖【热度: 359】【工程化】

关键词：循环依赖检测

在前端工程中，可以通过以下方法检测并避免循环依赖：

一、检测循环依赖

1. 手动审查代码：

   • 仔细检查项目中的模块导入关系。查看每个模块的导入语句，确定是否存在一个模块被另一个模块导入，而后者又反过来导入前者的情况。
   • 对于大型项目，可以使用工具辅助手动审查，如代码编辑器的搜索功能或一些专门的代码分析工具，来快速查找可能的循环依赖。

2. 使用静态分析工具：

   • 有一些静态分析工具可以帮助检测循环依赖。例如，ESLint 的插件eslint-plugin-import可以配置规则来检测模块之间的循环依赖。
   • 使用这些工具可以在开发过程中自动检测循环依赖，并给出明确的错误提示，帮助开发者及时发现和修复问题。

二、避免循环依赖

1. 优化模块设计：

   • 重新审视项目的模块结构，确保模块之间的依赖关系清晰且单向。避免设计出相互依赖的模块结构。
   • 例如，如果模块 A 和模块 B 相互依赖，可以考虑将它们共同依赖的部分提取出来，创建一个新的模块 C，然后让 A 和 B 分别依赖于 C，而不是直接相互依赖。

2. 采用依赖注入：

   • 依赖注入是一种设计模式，可以帮助减少模块之间的直接依赖。通过将依赖项作为参数传递给函数或构造函数，可以在运行时动态地注入依赖项，而不是在模块内部直接导入它们。
   • 这样可以降低模块之间的耦合度，减少循环依赖的可能性。

3. 延迟加载：

   • 在某些情况下，可以使用延迟加载（lazy loading）来避免循环依赖。延迟加载是指在实际需要的时候才加载模块，而不是在应用程序启动时就加载所有模块。
   • 例如，可以使用动态导入（dynamic import）来实现延迟加载。这样可以避免在模块加载时立即出现循环依赖的问题，因为模块只有在需要的时候才会被加载。

4. 建立清晰的模块边界：

   • 每个模块应该有明确的职责和功能范围。避免模块之间的职责重叠，这样可以减少模块之间的相互依赖。

   • 同时，尽量保持模块的独立性，使得模块可以独立开发、测试和维护。

1018. eslint 该如何配置【热度: 487】【工程化】

关键词：eslint 配置

在前端项目中，配置 ESLint 可以帮助你保持代码风格的一致性和提高代码质量。以下是配置 ESLint 的一般步骤：

一、安装 ESLint

1. 首先，确保你已经安装了 Node.js 和 npm（或 yarn）。

2. 在项目目录中，使用以下命令安装 ESLint：

   • 使用 npm：npm install eslint --save-dev
   • 使用 yarn：yarn add eslint --dev

二、初始化 ESLint 配置

1. 在项目根目录下，运行以下命令来初始化 ESLint 配置：

   • npx eslint --init

   这个命令会引导你通过一系列问题来生成一个基本的 ESLint 配置文件。你可以根据项目的需求选择不同的选项，例如：

   • 选择编程语言（JavaScript、TypeScript 等）。
   • 选择代码运行的环境（浏览器、Node.js 等）。
   • 选择风格指南（例如，Airbnb、Standard 等）。

2. 回答完问题后，ESLint 会在项目根目录下生成一个.eslintrc.*文件（可能是.eslintrc.js、.eslintrc.json或.eslintrc.yaml等，具体取决于你的选择）。

三、配置文件选项详解

1. 解析器（Parser）：

   • 根据你使用的编程语言，可能需要指定一个解析器。例如，对于 TypeScript 项目，你可以使用@typescript-eslint/parser。
   • 在.eslintrc.*文件中，可以这样配置：

   module.exports = {
     parser: "@typescript-eslint/parser",
   };
   

2. 插件（Plugins）：

   • ESLint 插件可以提供额外的规则和功能。例如，@typescript-eslint/eslint-plugin是用于 TypeScript 的插件。
   • 配置插件如下：

   module.exports = {
     plugins: ["@typescript-eslint"],
   };
   

3. 规则（Rules）：

   • 规则用于定义代码的风格和质量要求。每个规则都有一个可配置的选项，可以设置为off（关闭规则）、warn（警告）或error（错误）。
   • 例如，以下配置禁止使用未声明的变量，并要求使用分号：

   module.exports = {
     rules: {
       "no-undef": "error",
       semi: ["error", "always"],
     },
   };
   

4. 环境（Environments）：

   • 指定代码运行的环境，以便 ESLint 可以正确地识别全局变量和内置模块。
   • 例如，如果你的代码在浏览器中运行，可以配置browser环境：

   module.exports = {
     env: {
       browser: true,
     },
   };
   

四、在项目中使用 ESLint

1. 命令行使用：

   • 可以在命令行中使用eslint命令来检查项目中的文件。例如：
   • npx eslint.将检查当前目录下的所有文件。

2. 集成到编辑器：

   • 许多代码编辑器都有 ESLint 插件，可以在编辑代码时实时显示错误和警告。
   • 配置编辑器的 ESLint 插件，使其使用项目中的.eslintrc.*文件进行代码检查。

3. 集成到构建工具：

   • 可以将 ESLint 集成到构建工具（如 Webpack、Gulp 等）中，以便在构建过程中自动检查代码。

   • 例如，对于 Webpack，可以使用eslint-webpack-plugin插件来集成 ESLint。

1019. eslint 有哪些实用的插件， 该如何配置【热度: 488】【工程化】

关键词：eslint 配置

ESLint 有很多实用的插件，可以帮助提高代码质量和开发效率。以下是一些常见的 ESLint 插件及配置方法：

一、常见插件介绍

1. eslint-plugin-import：

   • 作用：用于检查和规范导入语句。可以确保导入路径的正确性、防止重复导入、检查导入顺序等。
   • 例如，它可以检测未使用的导入、循环导入等问题，并给出相应的错误提示。

2. eslint-plugin-vue：

   • 作用：专门为 Vue.js 项目设计的插件。可以检查 Vue 单文件组件（.vue文件）中的模板、脚本和样式部分的代码规范。
   • 例如，它可以检测模板中的错误使用的指令、脚本中的未定义变量等问题。

3. eslint-plugin-prettier：

   • 作用：将 Prettier 的代码格式化规则集成到 ESLint 中，确保代码在风格上的一致性。
   • 例如，它可以自动修复代码的缩进、空格、换行等格式问题，使代码更加美观易读。

4. eslint-plugin-jsx-a11y：

   • 作用：用于检查 React 和 Vue 等框架中的 JSX 代码的可访问性问题。
   • 例如，它可以检测图像是否缺少替代文本、表单元素是否有正确的标签等问题，以提高应用的可访问性。

二、配置方法

1. 安装插件：

   • 使用 npm 或 yarn 安装所需的插件。例如，安装eslint-plugin-import插件：

     npm install eslint-plugin-import --save-dev
     

   • 或者使用 yarn：

     yarn add eslint-plugin-import --dev
     

2. 创建.eslintrc文件：

   • 在项目根目录下创建一个.eslintrc文件，用于配置 ESLint。

3. 配置插件：

   • 在.eslintrc文件中，添加插件的名称到plugins数组中，并在rules对象中配置相应的规则。
   • 例如，配置eslint-plugin-import插件：

     {
       "plugins": ["import"],
       "rules": {
         "import/no-unresolved": "error",
         "import/order": [
           "error",
           {
             "groups": ["builtin", "external", "internal"],
             "pathGroups": [
               {
                 "pattern": "vue",
                 "group": "external",
                 "position": "before"
               }
             ],
             "pathGroupsExcludedImportTypes": [],
             "alphabetize": {
               "order": "asc",
               "caseInsensitive": true
             }
           }
         ]
       }
     }
     

   • 上述配置中，plugins数组中添加了import插件，rules对象中配置了两个规则：import/no-unresolved用于检查导入的模块是否存在，import/order用于规范导入的顺序。

4. 集成到开发流程中：

   • 根据你的开发环境和工具，将 ESLint 集成到你的开发流程中。例如，在 VS Code 中，可以安装 ESLint 扩展，并在设置中配置自动修复和实时检查。

1022. 闭包有哪些使用场景，请举例【热度: 679】【JavaScript】【出题公司: 小米】

关键词：闭包使用场景

闭包在 JavaScript 中有很多实用的使用场景，以下是一些主要的场景：

一、数据隐藏和封装

1. 保护变量：

   • 闭包可以创建一个私有作用域，将变量封装在函数内部，防止外部直接访问和修改。只有通过特定的函数接口才能访问和操作这些变量。

   • 例如：

     function createCounter() {
       let count = 0;
       return {
         increment() {
           count++;
         },
         getCount() {
           return count;
         },
       };
     }
     
     const counter = createCounter();
     counter.increment();
     console.log(counter.getCount()); // 1
     

   • 在这个例子中，count变量被封装在createCounter函数内部，外部无法直接访问，只能通过返回的对象上的方法来操作count。

2. 模拟私有方法：

   • 在面向对象编程中，可以使用闭包来模拟私有方法。私有方法只能在对象内部被访问，外部无法直接调用。

   • 例如：

     const myObject = (function () {
       let privateVariable = 0;
     
       function privateMethod() {
         privateVariable++;
         console.log(privateVariable);
       }
     
       return {
         publicMethod() {
           privateMethod();
         },
       };
     })();
     
     myObject.publicMethod(); // 1
     

   • 在这个例子中，privateMethod和privateVariable只能在内部函数中被访问，外部通过调用publicMethod间接访问了私有方法。

二、函数柯里化（Currying）

1. 逐步参数化：

   • 闭包可以用于实现函数柯里化，将一个多参数的函数转换为一系列单参数的函数。每次调用只接受一部分参数，并返回一个新的函数，直到所有参数都被提供。

   • 例如：

     function add(a) {
       return function (b) {
         return function (c) {
           return a + b + c;
         };
       };
     }
     
     const addFiveAndSixAndSeven = add(5)(6)(7);
     console.log(addFiveAndSixAndSeven); // 18
     

   • 在这个例子中，add函数通过闭包逐步接受参数，最后返回一个计算结果。

2. 灵活的参数传递：

   • 函数柯里化可以使函数的参数传递更加灵活，特别是在需要部分应用参数或者延迟参数传递的情况下。
   • 例如，可以先创建一个部分应用参数的函数，然后在需要的时候再传递剩余的参数。

三、回调函数和事件处理

1. 保存外部环境：

   • 在异步编程或者事件处理中，闭包可以保存外部函数的变量和状态，使得回调函数能够访问这些信息。

   • 例如：

     function setTimeoutWithMessage(message) {
       setTimeout(function () {
         console.log(message);
       }, 1000);
     }
     
     setTimeoutWithMessage("Hello after 1 second!");
     

   • 在这个例子中，回调函数内部的message变量是通过闭包从外部函数中获取的，即使外部函数已经执行完毕，回调函数仍然能够访问到这个变量。

2. 事件处理程序：

   • 在 DOM 事件处理中，闭包可以用于保存与事件相关的状态和数据。
   • 例如：

     <button id="myButton">Click me</button>
     <script>
       document.getElementById("myButton").addEventListener("click", function () {
         const buttonText = this.textContent;
         console.log(`Button clicked: ${buttonText}`);
       });
     </script>
     

   • 在这个例子中，事件处理程序内部的buttonText变量是通过闭包从外部环境中获取的，每次点击按钮时，都能正确地打印出按钮的文本内容。

四、记忆化（Memoization）

1. 缓存计算结果：

   • 闭包可以用于实现记忆化，将函数的计算结果缓存起来，避免重复计算。如果相同的参数再次被传入，直接返回缓存的结果，而不是重新计算。

   • 例如：

     function memoizedAdd() {
       let cache = {};
       return function (a, b) {
         const key = `${a},${b}`;
         if (cache[key]) {
           return cache[key];
         } else {
           const result = a + b;
           cache[key] = result;
           return result;
         }
       };
     }
     
     const memoizedAddFunction = memoizedAdd();
     console.log(memoizedAddFunction(2, 3)); // 5
     console.log(memoizedAddFunction(2, 3)); // 5（直接从缓存中获取结果）
     

   • 在这个例子中，memoizedAdd函数内部的cache对象用于缓存计算结果，通过闭包保存了这个缓存对象，使得每次调用函数时都能访问到它。

2. 提高性能：

   • 对于计算复杂或者频繁调用的函数，记忆化可以显著提高性能，减少不必要的计算。

1024. 如何使用 node 做一个全局命令行工具【热度: 141】【Nodejs】【出题公司: 阿里巴巴】

作者备注

这个问题， 其实本质就是一个 package.json 配置里面的 bin 配置， 没有多大的价值

以下是使用 Node.js 创建一个全局命令行工具的步骤：

一、创建项目结构

1. 创建一个新的文件夹作为项目目录，例如my-cli-tool。
2. 在项目目录中，初始化一个新的 Node.js 项目，可以使用npm init或yarn init命令，根据提示填写项目的基本信息。

二、安装必要的模块

1. 安装commander模块，这是一个用于构建命令行界面的流行工具。

   • 使用 npm：npm install commander --save
   • 使用 yarn：yarn add commander

三、编写命令行工具代码

1. 创建一个主入口文件，例如index.js。

2. 在入口文件中，引入commander模块并进行配置：

   const program = require("commander");
   
   program
     .version("1.0.0")
     .description("My awesome CLI tool")
     .option("-n, --name <value>", "Your name")
     .action((options) => {
       console.log(`Hello, ${options.name || "World"}!`);
     });
   
   program.parse(process.argv);
   

   在这个例子中，我们创建了一个命令行工具，它接受一个--name选项，并在执行时打印出问候语。

四、设置全局安装

1. 在项目的package.json文件中，添加一个bin字段，指定命令行工具的入口文件：

   {
     "name": "my-cli-tool",
     "version": "1.0.0",
     "description": "My awesome CLI tool",
     "main": "index.js",
     "bin": {
       "my-tool": "./index.js"
     },
     "dependencies": {
       "commander": "^9.4.0"
     }
   }
   

   这里将命令行工具的名称设置为my-tool，对应的入口文件是index.js。

2. 使用npm link或yarn link命令将项目链接到全局环境中。这将使你的命令行工具在系统中可用。

   • 使用 npm：npm link
   • 使用 yarn：yarn link

五、测试命令行工具

1. 打开终端，输入my-tool --name John，如果一切正常，应该会看到输出Hello, John!。

1025. 什么是 semver 规范，~1.2.3 与 ^1.2.3 的版本号范围是多少【热度: 233】【Nodejs】【出题公司: 腾讯】

SemVer（Semantic Versioning，语义化版本）是一种规范，用于管理软件版本号的命名和变更。它的目的是通过明确的版本号规则，让开发者和用户能够更好地理解软件的变化和兼容性。

SemVer 版本号由三个部分组成：主版本号（major）、次版本号（minor）和修订版本号（patch），格式为major.minor.patch。

• 主版本号：当进行不兼容的 API 更改时增加。
• 次版本号：当添加向后兼容的新功能时增加。
• 修订版本号：当进行向后兼容的错误修复时增加。

~1.2.3的版本号范围：

• 这表示匹配大于等于 1.2.3 且小于 1.3.0 的版本。
• 它会优先更新修订版本号，即如果有 1.2.4、1.2.5 等版本，会优先选择这些版本进行安装，但不会安装 1.3.0 及以上版本。

^1.2.3的版本号范围：

• 表示匹配大于等于 1.2.3 且小于 2.0.0 的版本。

• 它会优先更新次版本号和修订版本号。例如，如果有 1.3.0、1.4.2 等版本，会优先选择这些版本进行安装，但不会安装 2.0.0 及以上版本。

1028. npm install 之后需要执行一些处理工作，应该如何处理【热度: 162】【web应用场景】【出题公司: PDD】

关键词：html 标签元素

如果在执行npm install之后需要执行一些处理工作，可以通过以下几种方式来实现：

一、使用postinstall脚本

1. 在package.json文件中添加scripts字段，并在其中定义一个postinstall脚本：

   • {
       "scripts": {
         "postinstall": "your-command-here"
       }
     }
     

   • 例如，如果需要在安装后运行一个构建脚本，可以设置为：

     {
       "scripts": {
         "postinstall": "npm run build"
       }
     }
     

2. 当执行npm install时，postinstall脚本会在安装完成后自动执行。

二、使用第三方工具

1. npm-run-all：

   • 这是一个可以同时运行多个 npm 脚本的工具。如果你的安装后处理工作涉及多个步骤，可以使用这个工具来组织脚本。
   • 首先安装npm-run-all：

     npm install --save-dev npm-run-all
     

   • 然后在package.json中定义脚本：

     {
       "scripts": {
         "build": "your-build-command",
         "postinstall": "npm-run-all build other-command"
       }
     }
     

2. husky和lint-staged（用于代码检查和格式化等场景）：

   • husky可以让你在 Git 钩子中执行 npm 脚本。
   • lint-staged可以在暂存的文件上运行特定的任务。
   • 安装：

     npm install --save-dev husky lint-staged
     

   • 在package.json中配置：

     {
       "husky": {
         "hooks": {
           "post-install": "npm run lint-staged"
         }
       },
       "lint-staged": {
         "*.js": ["eslint --fix", "prettier --write"]
       }
     }
     

   • 在这个例子中，安装后会运行lint-staged配置的任务，对暂存的 JavaScript 文件进行代码检查和格式化。

三、自定义脚本文件

1. 创建一个独立的脚本文件，例如install-script.js，在其中编写安装后的处理逻辑。
2. 在package.json的postinstall脚本中调用这个脚本文件：

   • {
       "scripts": {
         "postinstall": "node install-script.js"
       }
     }
     

通过这些方法，你可以在npm install之后执行各种处理工作，以满足项目的特定需求。

1030. flex 布局中 align-content 与 align-items 有何区别【热度: 106】【web应用场景】

关键词：flex 布局属性

在 Flex 布局中，align-content和align-items都是用于控制 Flex 容器内项目在交叉轴（垂直于主轴的方向）上的对齐方式，但它们有以下区别：

一、作用范围不同

1. align-items：

   • 作用于 Flex 容器内的单行项目。
   • 它决定了每个单独的项目在交叉轴上的对齐方式。
   • 例如，如果align-items: center，则容器内的所有项目将在交叉轴上居中对齐。

2. align-content：

   • 作用于整个 Flex 容器的多行项目。
   • 当 Flex 容器有多行项目时，它决定了这些行在交叉轴上的对齐方式。
   • 例如，如果align-content: space-between，则多行项目之间在交叉轴上会均匀分布，第一行与容器顶部对齐，最后一行与容器底部对齐。

二、适用场景不同

1. align-items：

   • 适用于单行的 Flex 布局，或者即使容器有多行，但只需要统一控制所有项目的对齐方式时。
   • 比如，创建一个简单的导航栏，其中的项目在垂直方向上需要保持一致的对齐方式。

2. align-content：

   • 适用于多行的 Flex 布局，且需要对多行进行整体的对齐控制。
   • 例如，一个包含大量卡片的网格布局，当卡片数量较多导致出现多行时，可以使用align-content来调整行与行之间在垂直方向上的间距和对齐方式。

三、示例对比

1. align-items示例：

   <div style="display: flex; align-items: center; height: 200px;">
     <div style="background-color: lightblue; width: 50px; height: 50px;">Item 1</div>
     <div style="background-color: lightgreen; width: 50px; height: 50px;">Item 2</div>
     <div style="background-color: lightyellow; width: 50px; height: 50px;">Item 3</div>
   </div>
   

   • 在这个例子中，三个项目在垂直方向上居中对齐，因为设置了align-items: center。

2. align-content示例：

   <div style="display: flex; flex-wrap: wrap; align-content: space-between; height: 300px;">
     <div style="background-color: lightblue; width: 50px; height: 50px;">Item 1</div>
     <div style="background-color: lightgreen; width: 50px; height: 50px;">Item 2</div>
     <div style="background-color: lightyellow; width: 50px; height: 50px;">Item 3</div>
     <div style="background-color: lightcoral; width: 50px; height: 50px;">Item 4</div>
     <div style="background-color: lightskyblue; width: 50px; height: 50px;">Item 5</div>
     <div style="background-color: lightpink; width: 50px; height: 50px;">Item 6</div>
   </div>
   

   • 这里由于项目数量较多，容器出现了多行。设置了align-content: space-between后，行与行之间在垂直方向上均匀分布，第一行靠近容器顶部，最后一行靠近容器底部。

综上所述，align-items主要用于控制单行项目在交叉轴上的对齐方式，而align-content则用于控制多行项目整体在交叉轴上的对齐方式。

高级开发者相关问题【共计 5 道题】

1020. eslint 如何集成到 webpack【热度: 488】【工程化】

关键词：eslint 配置

要将 ESLint 集成到 Webpack 中，可以按照以下步骤进行操作：

一、安装必要的包

1. 确保已经安装了 Webpack 和 ESLint。如果还没有安装，可以使用以下命令进行安装：

   • 使用 npm：

     npm install webpack webpack-cli eslint --save-dev
     

   • 使用 yarn：

     yarn add webpack webpack-cli eslint --dev
     

2. 安装eslint-webpack-plugin插件，这个插件可以将 ESLint 集成到 Webpack 构建过程中。

   • 使用 npm：

     npm install eslint-webpack-plugin --save-dev
     

   • 使用 yarn：

     yarn add eslint-webpack-plugin --dev
     

二、配置 ESLint

1. 在项目根目录下，运行eslint --init命令来初始化 ESLint 配置。按照提示选择适合项目的选项，生成.eslintrc.*配置文件。

2. 根据项目需求，调整 ESLint 配置文件中的规则、解析器、插件等选项。

三、配置 Webpack

1. 在 Webpack 配置文件（通常是webpack.config.js）中，引入eslint-webpack-plugin插件：

   const ESLintPlugin = require("eslint-webpack-plugin");
   

2. 在 Webpack 配置对象的plugins数组中添加ESLintPlugin实例：

   module.exports = {
     //...其他配置项
     plugins: [
       new ESLintPlugin({
         // 可以在这里配置 ESLintPlugin 的选项，例如指定要检查的文件路径
         files: ["./src/**/*.js"],
       }),
     ],
   };
   

四、运行 Webpack 构建

当运行 Webpack 构建时，eslint-webpack-plugin会在构建过程中自动运行 ESLint 检查。如果有不符合 ESLint 规则的代码，会在控制台输出错误信息。

1021. 如何定制化开发一个 eslint 插件， 功能是实现提示检验某一个项目里面的字符串error【热度: 10】【工程化】

关键词：eslint 插件编写

以下是一个可以检测特定字符串并支持参数传递的 ESLint 插件开发步骤：

一、创建插件项目

1. 创建一个新的目录来存放插件项目，例如eslint-plugin-custom-string-check。
2. 在该目录下，运行npm init初始化一个 npm 项目。

二、插件结构

1. 在项目目录下创建一个index.js文件作为插件的入口文件。

2. 定义插件对象：

module.exports = {
  rules: {},
};

三、实现规则

1. 定义规则函数，接收一个参数options，这个参数可以包含你要检测的字符串。

module.exports = {
  rules: {
    "check-custom-string": (context, options) => {
      return {
        Program(node) {
          const sourceCode = context.getSourceCode();
          const text = sourceCode.getText();
          const targetString = options && options.stringToCheck ? options.stringToCheck : null;
          if (targetString && text.includes(targetString)) {
            context.report({
              node,
              message: `Found custom string "${targetString}".`,
            });
          }
        },
      };
    },
  },
};

四、测试插件

1. 在项目目录下创建一个tests目录。
2. 在tests目录下创建一个测试文件，例如test.js。

const ruleTester = require("eslint").RuleTester;
const rule = require("../index").rules["check-custom-string"];

const ruleTester = new RuleTester();
ruleTester.run("check-custom-string", rule, {
  valid: [
    {
      code: 'const message = "This is a test.";',
      options: { stringToCheck: "errorMessage" },
    },
  ],
  invalid: [
    {
      code: 'const errorMessage = "This is an error.";',
      options: { stringToCheck: "errorMessage" },
      errors: [
        {
          message: 'Found custom string "errorMessage".',
        },
      ],
    },
  ],
});

五、使用插件

1. 在你的项目中安装这个插件：

npm install /path/to/your/plugin/eslint-plugin-custom-string-check --save-dev

2. 在项目的.eslintrc文件中配置插件：

{
  "plugins": ["custom-string-check"],
  "rules": {
    "custom-string-check/check-custom-string": ["error", { "stringToCheck": "yourTargetString" }]
  }
}

1023. JS 浏览器事循环有哪些使用案例？【热度: 526】【JavaScript】【出题公司: 腾讯】

关键词：事件循环案例

作者备注

这个是一个很好的问题， 大多数人在面试过程中， 大多数都是问到的 - 什么是事件循环

但是真是事件循环的场景可能大多数人不清楚， 所以也就是为了八股而八股。 这个问题很好的问到哪些场景下会使用到事件循环。 是属于原理考虑， 应用也要知道的场景

JavaScript 的事件循环在实际开发中有很多使用案例，以下是一些常见的例子：

一、异步操作处理

1. 网络请求：

   • 当进行 AJAX 请求时，浏览器不会阻塞等待响应，而是继续执行其他代码。一旦请求完成，相应的回调函数会被添加到任务队列中，等待事件循环处理。

   • 例如，使用XMLHttpRequest或fetch进行网络请求：

     function makeAjaxRequest(url) {
       return new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
         xhr.open("GET", url);
         xhr.onload = function () {
           if (xhr.status === 200) {
             resolve(xhr.responseText);
           } else {
             reject(new Error(xhr.statusText));
           }
         };
         xhr.onerror = function () {
           reject(new Error("Network error"));
         };
         xhr.send();
       });
     }
     
     makeAjaxRequest("https://example.com/data")
       .then((data) => {
         console.log("Received data:", data);
       })
       .catch((error) => {
         console.error("Error:", error);
       });
     

   • 在这个例子中，网络请求是异步的，不会阻塞主线程。当请求完成后，对应的then或catch回调函数会被执行。

2. 定时器：

   • setTimeout和setInterval函数会在指定的时间后将回调函数添加到任务队列中。
   • 例如：

     console.log("Start");
     setTimeout(() => {
       console.log("Timeout after 1 second");
     }, 1000);
     console.log("End");
     

   • 输出结果为“Start”、“End”，然后在 1 秒后输出“Timeout after 1 second”。这表明setTimeout的回调函数是在主线程执行完其他代码后，由事件循环处理执行的。

二、用户交互响应

1. 按钮点击事件：

   • 当用户点击按钮时，会触发相应的点击事件处理程序。这些处理程序会被添加到任务队列中，等待事件循环处理。
   • 例如：

     <button id="myButton">Click me</button>
     <script>
       document.getElementById("myButton").addEventListener("click", function () {
         console.log("Button clicked");
       });
     </script>
     

   • 当用户点击按钮时，“Button clicked”会被输出。这种方式确保了用户交互不会阻塞主线程，使得界面保持响应。

2. 输入框实时验证：

   • 可以使用事件循环来实现输入框的实时验证。当用户在输入框中输入内容时，触发input事件，相应的验证函数会被添加到任务队列中，进行异步验证。
   • 例如：

     <input type="text" id="myInput" />
     <script>
       document.getElementById("myInput").addEventListener("input", function () {
         const value = this.value;
         setTimeout(() => {
           if (value.length < 5) {
             console.log("Input too short");
           } else {
             console.log("Input valid");
           }
         }, 500);
       });
     </script>
     

   • 在这个例子中，每次用户输入时，会在 500 毫秒后进行验证。如果输入长度小于 5，则输出“Input too short”；否则输出“Input valid”。

三、动画和界面更新

1. 动画循环：

   • 使用requestAnimationFrame函数可以创建一个动画循环，在每一帧更新动画状态并重新绘制界面。这个函数会在浏览器下一次重绘之前调用指定的回调函数，确保动画的流畅性。

   • 例如：

     function animate() {
       // 更新动画状态
       // 例如，移动一个元素的位置
       element.style.left = parseInt(element.style.left) + 1 + 'px';
     
       if (/* 动画未完成条件 */) {
         requestAnimationFrame(animate);
       }
     }
     
     requestAnimationFrame(animate);
     

   • 在这个例子中，animate函数会在每一帧更新元素的位置，直到动画完成。requestAnimationFrame确保了动画在浏览器的最佳时机进行更新，避免了不必要的重绘和性能浪费。

2. 界面更新：

   • 在复杂的界面应用中，可以使用事件循环来异步更新界面，避免阻塞主线程。例如，当有大量数据需要渲染到界面上时，可以将渲染过程分成小块，每次在事件循环的空闲时间进行一部分渲染。

   • 例如：

     function updateUI(data) {
       const chunkSize = 10;
       let index = 0;
     
       function renderChunk() {
         for (let i = index; i < index + chunkSize && i < data.length; i++) {
           // 渲染数据的一部分到界面上
           const item = data[i];
           const element = document.createElement("div");
           element.textContent = item;
           document.body.appendChild(element);
         }
         index += chunkSize;
     
         if (index < data.length) {
           requestIdleCallback(renderChunk);
         }
       }
     
       requestIdleCallback(renderChunk);
     }
     
     const largeData = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
     updateUI(largeData);
     

   • 在这个例子中，updateUI函数将大量数据分成小块进行渲染，每次在浏览器空闲时间（使用requestIdleCallback）进行一部分渲染，避免了长时间阻塞主线程，使得界面保持响应。

1029. 前端应用 CICD 有哪些方式实现【热度: 120】【工程化】【出题公司: 京东】

关键词：前端 CICD

前端应用的持续集成与持续部署（CI/CD）可以通过以下几种方式实现：

一、使用 Jenkins

1. 持续集成：

   • Jenkins 可以监听代码仓库（如 Git）的变化，当有新的代码提交时，自动触发构建任务。
   • 对于前端项目，可以配置 Jenkins 执行构建命令，如使用 npm 或 yarn 安装依赖、运行构建脚本等。
   • 例如，可以创建一个自由风格的项目，配置源代码管理为你的 Git 仓库地址，并在构建步骤中添加“Execute shell”，输入构建命令，如npm install && npm run build。

2. 持续部署：

   • 构建成功后，Jenkins 可以将构建生成的静态文件部署到目标服务器上。
   • 可以使用插件（如 Publish Over SSH）将文件传输到远程服务器，并执行部署脚本。
   • 例如，配置插件连接到目标服务器，设置部署目录，然后在构建后操作中选择“Send build artifacts over SSH”，指定要传输的文件和目标服务器信息。

二、使用 GitLab CI/CD

1. 持续集成：

   • 在.gitlab-ci.yml文件中定义一系列的阶段（stages）和任务（jobs）。

   • 当代码推送到 GitLab 仓库时，GitLab Runner 会自动执行这些任务。

   • 对于前端项目，可以定义一个build job，在其中执行构建命令。

   • 例如：

     stages:
       - build
     
     build:
       stage: build
       script:
         - npm install
         - npm run build
     

2. 持续部署：

   • 可以在.gitlab-ci.yml中定义deploy job，将构建生成的静态文件部署到服务器上。

   • 可以使用 SSH 密钥或其他部署工具来实现部署。

   • 例如：

     stages:
       - build
       - deploy
     
     build:
       stage: build
       script:
         - npm install
         - npm run build
     
     deploy:
       stage: deploy
       script:
         - scp -r dist/* user@server:/path/to/deploy
     

三、使用 GitHub Actions

1. 持续集成：

   • 在.github/workflows目录下创建一个 YAML 文件来定义工作流。

   • 当代码推送到 GitHub 仓库时，GitHub Actions 会自动执行工作流中的任务。

   • 对于前端项目，可以在工作流中执行构建命令。

   • 例如：

     name: CI/CD for Frontend App
     
     on:
       push:
         branches:
           - main
     
     jobs:
       build:
         runs-on: ubuntu-latest
         steps:
           - uses: actions/checkout@v2
           - name: Install dependencies
             run: npm install
           - name: Build
             run: npm run build
     

2. 持续部署：

   • 可以在工作流中添加部署步骤，使用 SSH、FTP 等方式将静态文件部署到服务器上。

   • 或者使用云服务提供商的部署服务，如 AWS Amplify、Netlify 等。

   • 例如：

     name: CI/CD for Frontend App
     
     on:
       push:
         branches:
           - main
     
     jobs:
       build:
         runs-on: ubuntu-latest
         steps:
           - uses: actions/checkout@v2
           - name: Install dependencies
             run: npm install
           - name: Build
             run: npm run build
     
       deploy:
         needs: build
         runs-on: ubuntu-latest
         steps:
           - name: Deploy to Server
             run: scp -r dist/* user@server:/path/to/deploy
     

四、使用 Travis CI

1. 持续集成：

   • 在项目根目录下创建一个.travis.yml文件来定义构建配置。

   • 当代码推送到支持的代码仓库（如 GitHub）时，Travis CI 会自动触发构建。

   • 对于前端项目，可以在配置文件中指定构建命令。

   • 例如：

     language: node_js
     node_js:
       - 12
     
     script:
       - npm install
       - npm run build
     

2. 持续部署：

   • 可以在构建成功后，使用部署工具或脚本将静态文件部署到服务器上。

   • 例如，可以在.travis.yml中添加部署步骤，使用 SSH 或其他方式进行部署。

   • language: node_js
     node_js:
       - 12
     
     script:
       - npm install
       - npm run build
     
     after_success:
       - scp -r dist/* user@server:/path/to/deploy
     

1033. 如何保证项目质量【热度: 784】【web应用场景】

关键词：项目质量保证

作者备注

这个话题是一个开放性话题， 只要合理， 怎么都没有错。

以下是 GPT 作答， 仅供参考

要保证项目质量，可以从以下几个方面入手：

一、需求分析与规划

1. 明确需求：

   • 与项目相关方（如客户、产品经理、团队成员等）进行充分沟通，确保对项目的目标、功能需求、性能需求、用户体验要求等有清晰的理解。
   • 形成详细的需求文档，作为项目开发的依据。

2. 项目规划：

   • 制定合理的项目计划，包括项目时间表、里程碑、任务分配等。确保项目进度合理，各个阶段的任务明确。
   • 考虑风险因素，制定风险应对计划，提前预防和应对可能出现的问题。

二、设计与开发阶段

1. 良好的架构设计：

   • 设计合理的软件架构，确保系统的可扩展性、可维护性和性能。
   • 遵循设计模式和最佳实践，提高代码的质量和可读性。

2. 代码规范：

   • 制定统一的代码规范，包括命名规范、代码格式、注释规范等。确保团队成员编写的代码风格一致，易于理解和维护。
   • 可以使用工具（如 ESLint、Prettier 等）来自动检查和格式化代码。

3. 测试驱动开发（TDD）：

   • 采用 TDD 的方法，先编写测试用例，再编写实现代码。确保代码的功能正确性，同时提高代码的可测试性。
   • 包括单元测试、集成测试、端到端测试等不同层次的测试，全面覆盖项目的各个部分。

4. 代码审查：

   • 进行代码审查，让团队成员互相检查代码。可以发现潜在的问题、提高代码质量，并促进知识共享和团队协作。
   • 可以使用工具（如 GitHub Pull Requests、Gerrit 等）来进行代码审查流程管理。

三、质量控制与保证

1. 持续集成与持续部署（CI/CD）：

   • 建立 CI/CD 流程，自动构建、测试和部署项目。确保每次代码提交都能经过严格的测试，及时发现问题并修复。
   • 使用工具（如 Jenkins、GitLab CI/CD、GitHub Actions 等）来实现 CI/CD。

2. 性能测试：

   • 对项目进行性能测试，包括负载测试、压力测试等。确保系统在不同负载情况下的性能表现符合要求。
   • 使用工具（如 JMeter、LoadRunner 等）进行性能测试。

3. 安全测试：

   • 进行安全测试，包括漏洞扫描、渗透测试等。确保系统的安全性，防止潜在的安全漏洞被攻击。
   • 可以使用工具（如 OWASP ZAP、Nessus 等）进行安全测试。

4. 用户验收测试（UAT）：

   • 在项目上线前，进行用户验收测试，让实际用户对系统进行测试和反馈。确保系统满足用户的需求和期望。

四、项目管理与团队协作

1. 项目管理：

   • 有效的项目管理是保证项目质量的关键。使用项目管理工具（如 JIRA、Trello 等）来跟踪项目进度、任务分配和问题解决。
   • 定期召开项目会议，及时沟通项目进展、问题和解决方案。

2. 团队协作：

   • 建立良好的团队协作氛围，鼓励团队成员之间的沟通和合作。
   • 进行团队培训和知识分享，提高团队成员的技术水平和综合素质。

五、持续改进

1. 收集反馈：

   • 在项目上线后，收集用户反馈和系统运行数据。了解用户的使用体验和系统的性能表现，发现潜在的问题和改进点。

2. 问题解决与改进：

   • 及时解决用户反馈的问题，并根据反馈和数据分析进行系统的改进和优化。

   • 建立问题跟踪和改进机制，确保问题得到有效解决和持续改进。