【前端】前端面试题
前端面试题
闭包
1. 定义：
闭包（Closure） 是指一个函数能够访问并记住其外部作用域中的变量，即使外部函数已经执行完毕。闭包由两部分组成：
- 一个函数（通常是内部函数）。
- 该函数被创建时所在的作用域（即外部函数的变量环境）
function outer() {
let count = 0; // 外部函数的变量
function inner() {
count++; // 内部函数访问外部变量
console.log(count);
}
return inner;
}
const counter = outer();
counter(); // 输出 1
counter(); // 输出 2
2. 闭包的核心原理
- 作用域链：函数在定义时，会记住自己的词法环境（即外部作用域）。当内部函数访问变量时，会沿着作用域链向上查找。
- 变量持久化：闭包使得外部函数的变量不会被垃圾回收，因为内部函数仍持有对它们的引用
3. 闭包的常见用途
3.1 私有变量封装
通过闭包隐藏内部变量，仅暴露操作接口：
function createCounter() {
let count = 0; // 私有变量
return {
increment: () => count++,
getValue: () => count
};
}
const counter = createCounter();
counter.increment();
console.log(counter.getValue()); // 输出 1
// 无法直接访问 count，避免被外部修改
3.2 函数柯里化（Currying）
将多参数函数转换为单参数链式调用：
function add(a) {
return function(b) {
return a + b;
};
}
const add5 = add(5);
console.log(add5(3)); // 输出 8
3.3 事件处理与回调
在事件监听中保留上下文变量：
function setupButton() {
const button = document.getElementById('myButton');
let clicks = 0;
button.addEventListener('click', function() {
clicks++;
console.log(`按钮被点击了 ${clicks} 次`);
});
}
// 每次点击都会更新同一个 clicks 变量
4. 闭包的陷阱与解决方案
4.1 循环中的闭包问题
问题：循环中创建的闭包共享同一个变量，导致意外结果。
for (var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i); // 输出 3, 3, 3
}, 100);
}
解决方案：使用 IIFE 或 let 创建块级作用域。
// 使用 IIFE
for (var i = 0; i < 3; i++) {
(function(j) {
setTimeout(function() {
console.log(j); // 输出 0, 1, 2
}, 100);
})(i);
}
// 使用 let（块级作用域）
for (let i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i); // 输出 0, 1, 2
}, 100);
}
4.2 内存泄漏
问题：闭包长期持有外部变量引用，导致内存无法释放。
function heavyProcess() {
const largeData = new Array(1000000).fill('data');
return function() {
console.log(largeData.length);
};
}
const leak = heavyProcess(); // largeData 被闭包引用，无法回收
解决方案：在不需要时解除引用。
leak = null; // 手动解除对闭包的引用
5. 闭包面试题示例
题目：以下代码输出什么？为什么？
function createFunctions() {
const result = [];
for (var i = 0; i < 3; i++) {
result.push(function() {
console.log(i);
});
}
return result;
}
const funcs = createFunctions();
funcs[0](); // 输出 3
funcs[1](); // 输出 3
funcs[2](); // 输出 3
答案：所有函数都输出 3，因为它们共享同一个变量 i（var 声明的变量在函数作用域中）。
改进方法：使用 let 或闭包隔离作用域。
事件循环（Event Loop）
定义
事件循环是JavaScript处理异步任务的核心机制。由于JavaScript是单线程语言，事件循环通过任务队列（Task Queue）和调用栈（Call Stack）的协作，实现了非阻塞的异步执行模型。
核心概念
-
调用栈（Call Stack）
- 用于存储函数调用的栈结构，遵循“后进先出”原则。
- 当函数执行时，会被推入调用栈；执行完毕后，会从调用栈中弹出。
-
任务队列（Task Queue）
- 用于存储异步任务的回调函数。
- 任务队列分为宏任务队列和微任务队列。
-
宏任务（Macro Task）与微任务（Micro Task）
- 宏任务：包括
setTimeout、setInterval、I/O操作、UI渲染等。 - 微任务：包括
Promise.then、MutationObserver、process.nextTick（Node.js）等。
- 宏任务：包括
事件循环的执行流程
-
同步任务执行：
- 同步任务直接进入调用栈执行，直到调用栈为空。
-
微任务执行：
- 调用栈为空后，事件循环会检查微任务队列，依次执行所有微任务，直到微任务队列为空。
-
宏任务执行：
- 每次从宏任务队列中取出一个任务执行，执行完毕后再次检查微任务队列并执行所有微任务。
-
UI渲染：
- 如果需要进行UI渲染，浏览器会在宏任务执行后执行渲染操作。
-
循环继续：
- 重复上述步骤，直到所有任务队列为空。
事件循环示例
console.log('1'); // 同步任务
setTimeout(() => {
console.log('2'); // 宏任务
}, 0);
Promise.resolve().then(() => {
console.log('3'); // 微任务
});
console.log('4'); // 同步任务
// 输出顺序：1 → 4 → 3 → 2
执行步骤解析：
- 同步任务
console.log('1')和console.log('4')依次执行。 - 微任务
Promise.then回调执行，输出3。 - 宏任务
setTimeout回调执行，输出2。
应用场景
-
异步编程：
- 通过
Promise、async/await处理异步任务，避免回调地狱。
- 通过
-
性能优化：
- 将耗时任务拆分为多个微任务，避免阻塞主线程。
-
动画与渲染：
- 使用
requestAnimationFrame结合事件循环实现流畅的动画效果。
- 使用
注意事项
-
微任务优先级高于宏任务：
- 微任务会在当前宏任务执行完毕后立即执行，而宏任务需要等待下一轮事件循环。
-
避免阻塞主线程：
- 长时间运行的同步任务会导致页面卡顿，应将其拆分为异步任务。
-
理解不同环境的事件循环：
- 浏览器与Node.js的事件循环机制略有不同，Node.js引入了
process.nextTick和setImmediate。
- 浏览器与Node.js的事件循环机制略有不同，Node.js引入了
总结
事件循环是JavaScript异步编程的核心机制，通过调用栈、任务队列和事件循环的协作，实现了非阻塞的执行模型。理解事件循环的执行顺序（同步任务 → 微任务 → 宏任务）是掌握异步编程的关键。在实际开发中，合理利用事件循环机制可以提升代码性能和用户体验。
BFC（块级格式化上下文）
定义
BFC（Block Formatting Context，块级格式化上下文）是Web页面渲染时的一种布局环境。它是一个独立的渲染区域，内部的元素布局不会影响外部元素。
触发条件
以下CSS属性可以触发BFC：
- 根元素（
）。 -
float 值不为none。 -
position 值为absolute 或fixed。 -
display 值为inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid。 -
overflow 值不为visible（如hidden、auto、scroll）。
特性
- 内部元素垂直排列： BFC内部的块级元素会按照垂直方向依次排列。
- 避免外边距重叠： BFC可以阻止相邻元素的外边距（margin）重叠。
- 包含浮动元素： BFC可以包含浮动元素，避免父元素高度塌陷。
- 阻止元素被浮动元素覆盖： BFC区域不会与浮动元素重叠。
应用场景
-
清除浮动当父元素包含浮动子元素时，父元素的高度会塌陷。通过触发BFC可以解决此问题：
.parent { overflow: hidden; /* 触发BFC */ } -
避免外边距重叠相邻元素的外边距会重叠，通过触发BFC可以避免：
.box { display: inline-block; /* 触发BFC */ } -
实现多栏布局利用BFC阻止元素被浮动元素覆盖，实现多栏布局：
.left { float: left; width: 200px; } .right { overflow: hidden; /* 触发BFC */ } -
隔离布局BFC内部的布局不会影响外部元素，适合实现独立的UI组件。
代码示例
-
清除浮动
<div class="parent"> <div class="child" style="float: left;">浮动元素div> div> <style> .parent { overflow: hidden; /* 触发BFC */ border: 1px solid #000; } style> -
避免外边距重叠
<div class="box" style="margin: 20px;">元素1div> <div class="box" style="margin: 20px;">元素2div> <style> .box { display: inline-block; /* 触发BFC */ width: 100%; } style> -
实现多栏布局
<div class="left">左侧栏div> <div class="right">右侧栏div> <style> .left { float: left; width: 200px; background: #ccc; } .right { overflow: hidden; /* 触发BFC */ background: #f0f0f0; } style>
注意事项
- 性能影响： 过度使用BFC（如大量使用
overflow: hidden）可能会导致性能问题。 - 兼容性： 不同浏览器对BFC的实现可能略有差异，需进行兼容性测试。
- 合理使用： BFC适用于特定场景，不应滥用。例如，清除浮动优先使用
clearfix方法。
总结
BFC是CSS布局中的重要概念，通过触发BFC可以解决浮动、外边距重叠等问题，实现更灵活的布局。理解BFC的触发条件和特性，有助于编写更健壮和可维护的CSS代码。在实际开发中，应根据需求合理使用BFC，避免过度依赖。
内存泄漏
定义
内存泄漏（Memory Leak）是指程序中已不再使用的内存未被释放，导致内存占用持续增加，最终可能引发性能下降甚至崩溃。在JavaScript中，内存泄漏通常由不当的引用管理引起。
内存管理机制
-
垃圾回收（GC） JavaScript通过垃圾回收机制自动管理内存，主要算法包括：
- 引用计数：记录对象的引用次数，当引用数为0时回收内存。
- 标记清除：从根对象（如
window）出发，标记所有可达对象，清除未标记的对象。
-
常见回收策略
- 新生代：存放短生命周期对象，使用Scavenge算法。
- 老生代：存放长生命周期对象，使用标记清除或标记整理算法。
常见的内存泄漏场景
-
意外全局变量未使用
var、let或const声明的变量会挂载到全局对象（如window），导致内存无法释放。function leak() { globalVar = '这是一个全局变量'; // 未使用var/let/const } -
未清理的定时器或回调函数定时器或事件监听器未及时清除，会导致相关对象无法回收。
let data = fetchData(); setInterval(() => { process(data); // data一直被引用，无法回收 }, 1000); -
闭包引用闭包会保留对外部作用域的引用，如果闭包未释放，相关内存也无法回收。
function createClosure() { let largeData = new Array(1000000).fill('data'); return () => console.log(largeData); // largeData一直被引用 } const closure = createClosure(); -
DOM 引用未清除保存了DOM元素的引用，即使元素被移除，内存也无法释放。
let elements = { button: document.getElementById('button'), }; document.body.removeChild(elements.button); // DOM已移除，但引用仍在 -
未释放的缓存或 Map缓存或Map中存储的对象未及时清理，会导致内存占用持续增加。
let cache = new Map(); function setCache(key, value) { cache.set(key, value); } // 未清理cache，内存泄漏
内存泄漏的检测与排查
-
浏览器开发者工具
- Memory面板：使用Heap Snapshot分析内存占用，查找未释放的对象。
- Performance面板：记录内存使用情况，观察内存占用是否持续增加。
-
工具库
- Chrome DevTools：提供内存分析功能。
- Node.js内存分析工具：如
node --inspect结合Chrome DevTools。
-
代码检查
- 检查全局变量、定时器、闭包、DOM引用等常见问题。
避免内存泄漏的最佳实践
-
及时清除引用
- 清除定时器、事件监听器、DOM引用等。
let timer = setInterval(() => {}, 1000); clearInterval(timer); // 清除定时器 -
使用弱引用
- 使用
WeakMap或WeakSet存储临时数据，避免强引用导致内存无法释放。
let weakMap = new WeakMap(); let key = {}; weakMap.set(key, 'data'); // key被回收时，数据也会被回收 - 使用
-
优化闭包
- 避免在闭包中保留不必要的引用。
function createClosure() { let largeData = new Array(1000000).fill('data'); return () => { console.log('Closure executed'); // 不引用largeData }; } -
清理缓存
- 定期清理缓存或设置缓存失效策略。
let cache = new Map(); function setCache(key, value, ttl) { cache.set(key, value); setTimeout(() => cache.delete(key), ttl); // 设置缓存失效时间 }
总结
内存泄漏是JavaScript开发中的常见问题，通常由不当的引用管理引起。通过理解垃圾回收机制、熟悉常见的内存泄漏场景，并借助开发者工具进行排查，可以有效避免内存泄漏问题。在实际开发中，遵循最佳实践（如及时清除引用、使用弱引用等）是保证应用性能的关键。
Vue 的虚拟 DOM
定义
虚拟 DOM（Virtual DOM）是一种用 JavaScript 对象表示真实 DOM 结构的技术。Vue 通过虚拟 DOM 实现高效的 DOM 更新，减少直接操作真实 DOM 的开销。
工作原理
-
生成虚拟 DOM
- Vue 将模板编译为渲染函数，渲染函数执行后生成虚拟 DOM 树。
- 虚拟 DOM 树是一个 JavaScript 对象，描述了真实 DOM 的结构和属性。
-
Diff 算法
- 当数据变化时，Vue 会生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行对比（Diff 算法）。
- Diff 算法找出两棵树之间的差异，只更新发生变化的部分。
-
更新真实 DOM
- 根据 Diff 算法的结果，Vue 将变化应用到真实 DOM 上，完成视图更新。
优点
-
性能优化
- 减少直接操作真实 DOM 的次数，避免频繁的 DOM 操作带来的性能损耗。
- 通过批量更新和差异更新，提高渲染效率。
-
跨平台能力
- 虚拟 DOM 是一个抽象层，可以映射到不同的平台（如浏览器、移动端、服务器端）。
-
简化开发
- 开发者只需关注数据逻辑，无需手动操作 DOM，提高开发效率。
实现细节
-
虚拟 DOM 的结构虚拟 DOM 是一个 JavaScript 对象，包含标签名、属性、子节点等信息。
const vnode = { tag: 'div', attrs: { id: 'app' }, children: [ { tag: 'p', attrs: {}, children: ['Hello, Vue!'] } ] }; -
Diff 算法核心逻辑
- 同层比较：只比较同一层级的节点，不跨层级比较。
- Key 值优化：通过
key 属性识别节点，避免不必要的节点销毁和重建。 - 节点复用：如果节点类型和
key 值相同，则复用节点，只更新属性或子节点。
-
批量更新Vue 将多次数据变化合并为一次更新，减少重复渲染。
应用场景
- 复杂视图更新在数据频繁变化的场景中，虚拟 DOM 可以显著提升性能。
- 跨平台开发虚拟 DOM 可以映射到不同的平台，如通过
Weex 开发移动端应用。 - 服务端渲染（SSR） 虚拟 DOM 可以在服务器端生成 HTML 字符串，提高首屏加载速度。
局限性
- 首次渲染性能虚拟 DOM 需要在首次渲染时生成虚拟 DOM 树，相比直接操作真实 DOM，会有一定的性能开销。
- 内存占用虚拟 DOM 需要维护一份虚拟 DOM 树，会增加内存占用。
- 不适合简单场景在简单的静态页面中，虚拟 DOM 的优势不明显，反而会增加复杂性。
MVVM
定义
MVVM（Model-View-ViewModel）是一种软件架构模式，主要用于分离 UI 逻辑与业务逻辑。它将应用程序分为三个核心部分：
- Model：数据模型，负责管理应用程序的数据和业务逻辑。
- View：视图，负责呈现用户界面（UI）。
- ViewModel：视图模型，负责连接 View 和 Model，处理 UI 逻辑和数据绑定。
核心概念
-
数据绑定
- View 和 ViewModel 之间通过数据绑定机制实现双向通信。
- 当 Model 数据变化时，ViewModel 自动更新 View；当用户操作 View 时，ViewModel 自动更新 Model。
-
命令绑定
- View 中的用户操作（如点击按钮）通过命令绑定触发 ViewModel 中的方法。
-
依赖注入
- ViewModel 可以依赖外部服务（如 API 调用、数据存储），通过依赖注入实现解耦。
工作流程
- 用户操作 View用户在 View 中进行操作（如输入文本、点击按钮）。
- ViewModel 处理逻辑ViewModel 接收用户操作，更新 Model 或执行相关逻辑。
- Model 更新数据Model 负责处理业务逻辑和数据更新。
- View 自动更新ViewModel 将 Model 的变化通过数据绑定同步到 View，更新 UI。
优点
-
分离关注点
- 将 UI 逻辑与业务逻辑分离，提高代码的可维护性和可测试性。
-
双向数据绑定
- 自动同步 View 和 Model 的数据，减少手动操作 DOM 的代码。
-
提高开发效率
- 通过数据绑定和命令绑定，减少重复代码，简化开发流程。
-
易于测试
- ViewModel 可以独立于 View 进行测试，提高测试覆盖率。
缺点
-
学习成本高
- MVVM 涉及的概念（如数据绑定、命令绑定）需要一定的学习成本。
-
性能开销
- 数据绑定机制可能会带来一定的性能开销，特别是在大规模数据更新时。
-
框架依赖
- MVVM 通常依赖于特定的框架（如 Vue、Angular），增加了项目的技术栈复杂度。
应用场景
-
前端框架
- Vue、Angular、Knockout 等前端框架都采用了 MVVM 模式。
-
复杂 UI 应用
- 在需要频繁更新 UI 的复杂应用中，MVVM 可以提高开发效率和性能。
-
跨平台开发
- 通过 MVVM 模式，可以实现代码的跨平台复用（如 Web、移动端）。
Vue2 与 Vue3 响应式原理
Vue2 的响应式原理
Vue2 使用 Object.defineProperty 实现响应式，其核心机制如下：
-
数据劫持
- 通过
Object.defineProperty 劫持对象的属性，定义getter 和setter。 - 当访问属性时触发
getter，当修改属性时触发setter。
- 通过
-
依赖收集
- 在
getter 中收集依赖（Watcher），在setter 中通知依赖更新。
- 在
-
数组处理
- Vue2 无法直接劫持数组的变化，因此通过重写数组方法（如
push、pop 等）实现响应式。
- Vue2 无法直接劫持数组的变化，因此通过重写数组方法（如
示例：
const data = { name: 'Vue2' };
Object.defineProperty(data, 'name', {
get() {
console.log('获取 name');
return this._name;
},
set(newValue) {
console.log('更新 name');
this._name = newValue;
}
});
局限性：
- 无法检测新增/删除属性： 使用
Vue.set 或Vue.delete 解决。 - 数组响应式局限性： 无法检测通过索引直接修改数组元素（如
arr = 1）。
Vue3 的响应式原理
Vue3 使用 Proxy 实现响应式，其核心机制如下：
-
数据代理
- 通过
Proxy 代理整个对象，拦截对对象的所有操作（如读取、赋值、删除等）。
- 通过
-
依赖收集
- 在
get 拦截器中收集依赖（Effect），在set 拦截器中通知依赖更新。
- 在
-
数组处理
-
Proxy 可以直接拦截数组的变化，无需重写数组方法。
-
示例：
const data = { name: 'Vue3' };
const proxy = new Proxy(data, {
get(target, key) {
console.log('获取', key);
return target[key];
},
set(target, key, newValue) {
console.log('更新', key);
target[key] = newValue;
return true;
}
});
优势：
- 全面拦截： 支持新增/删除属性、数组索引操作等。
- 性能提升：
Proxy 是语言层面的特性，性能优于Object.defineProperty。 - 简化代码： 无需处理特殊 API（如
Vue.set）。
Vue2 与 Vue3 响应式原理的对比
| 特性 | Vue2（Object.defineProperty） | Vue3（Proxy） |
|---|---|---|
| 数据劫持方式 | 劫持对象的属性 | 代理整个对象 |
| 新增/删除属性 | 不支持 | 支持 |
| 数组响应式 | 需重写数组方法 | 直接拦截数组操作 |
| 性能 | 较低 | 较高 |
| 代码复杂度 | 较高 | 较低 |
Vue3 的其他响应式优化
-
Ref 和 Reactive
-
ref：用于包装基本数据类型，通过.value 访问。 -
reactive：用于包装对象，直接访问属性。
-
-
Effect 代替 Watcher
- Vue3 使用
Effect 作为依赖单元，更加灵活和高效。
- Vue3 使用
-
Tree-shaking 支持
- Vue3 的响应式模块支持 Tree-shaking，减少打包体积。
代码示例对比
-
Vue2 响应式
const data = { name: 'Vue2' }; Object.defineProperty(data, 'name', { get() { console.log('获取 name'); return this._name; }, set(newValue) { console.log('更新 name'); this._name = newValue; } }); -
Vue3 响应式
const data = { name: 'Vue3' }; const proxy = new Proxy(data, { get(target, key) { console.log('获取', key); return target[key]; }, set(target, key, newValue) { console.log('更新', key); target[key] = newValue; return true; } });
深拷贝与浅拷贝
拷贝的定义
-
浅拷贝（Shallow Copy）
- 只复制对象的第一层属性，如果属性是引用类型（如对象、数组），则复制引用地址，新旧对象共享引用类型的属性。
-
深拷贝（Deep Copy）
- 递归复制对象的所有层级，新旧对象完全独立，不共享任何属性。
浅拷贝的实现方式
-
**扩展运算符（**
... ）const obj = { a: 1, b: { c: 2 } }; const shallowCopy = { ...obj }; -
Object.assignconst obj = { a: 1, b: { c: 2 } }; const shallowCopy = Object.assign({}, obj); -
数组的浅拷贝方法
-
slice、concat：const arr = [1, 2, { a: 3 }]; const shallowCopy = arr.slice();
-
深拷贝的实现方式
-
JSON.parse(JSON.stringify(obj)) -
通过 JSON 序列化实现深拷贝，但有以下局限性：
- 无法复制函数、
undefined、Symbol等特殊类型。 - 无法处理循环引用。
- 无法复制函数、
const obj = { a: 1, b: { c: 2 } }; const deepCopy = JSON.parse(JSON.stringify(obj)); -
-
递归实现深拷贝
- 手动实现深拷贝，支持所有数据类型并处理循环引用。
function deepClone(obj, map = new Map()) { if (typeof obj !== 'object' || obj === null) return obj; if (map.has(obj)) return map.get(obj); // 处理循环引用 const clone = Array.isArray(obj) ? [] : {}; map.set(obj, clone); for (let key in obj) { if (obj.hasOwnProperty(key)) { clone[key] = deepClone(obj[key], map); } } return clone; } -
使用第三方库
-
lodash 的cloneDeep 方法：import _ from 'lodash'; const obj = { a: 1, b: { c: 2 } }; const deepCopy = _.cloneDeep(obj);
-
浅拷贝与深拷贝的对比
| 特性 | 浅拷贝 | 深拷贝 |
|---|---|---|
| 拷贝层级 | 仅第一层 | 所有层级 |
| 引用类型属性 | 共享引用地址 | 完全独立 |
| 性能 | 较快 | 较慢（递归或序列化开销） |
| 适用场景 | 简单对象，无需深层复制 | 复杂对象，需完全独立副本 |
代码示例
-
浅拷贝示例
const obj = { a: 1, b: { c: 2 } }; const shallowCopy = { ...obj }; shallowCopy.b.c = 3; console.log(obj.b.c); // 输出：3（共享引用） -
深拷贝示例
const obj = { a: 1, b: { c: 2 } }; const deepCopy = JSON.parse(JSON.stringify(obj)); deepCopy.b.c = 3; console.log(obj.b.c); // 输出：2（完全独立）
深拷贝的注意事项
- 循环引用问题如果对象存在循环引用（如
obj.a = obj），需要额外处理，否则会导致栈溢出。 - 特殊数据类型如
Function、RegExp、Map、Set 等，需要特殊处理。 - 性能问题深拷贝的性能开销较大，尤其是在处理大型对象时，需谨慎使用。
总结
-
浅拷贝：适用于简单对象，仅复制第一层属性，性能较高。
-
深拷贝：适用于复杂对象，递归复制所有层级，确保对象完全独立，但性能较低。
-
选择建议：
- 如果对象结构简单且无需深层复制，使用浅拷贝。
- 如果对象结构复杂或需要完全独立副本，使用深拷贝。
- 处理循环引用或特殊数据类型时，建议使用递归实现或第三方库（如
lodash）。
npm 开发依赖与生产依赖
在 npm 项目中，依赖包分为 开发依赖 和 生产依赖，分别用于不同的场景。以下是它们的定义、区别及使用方式：
开发依赖（devDependencies）
-
定义
- 仅在开发环境中使用的依赖包，例如构建工具、测试框架、代码格式化工具等。
- 这些依赖不会随项目发布到生产环境。
-
安装方式
-
使用
--save-dev 或-D 选项将包安装为开发依赖：npm install <package> --save-dev或
npm install <package> -D
-
-
示例在
package.json 中："devDependencies": { "eslint": "^8.0.0", "webpack": "^5.0.0", "jest": "^27.0.0" } -
常见开发依赖
- 测试工具：
jest、mocha、chai - 构建工具：
webpack、vite、babel - 代码格式化：
eslint、prettier - 类型检查：
typescript
- 测试工具：
生产依赖（dependencies）
-
定义
- 项目运行所必需的依赖包，例如框架、库、工具等。
- 这些依赖会随项目发布到生产环境。
-
安装方式
-
使用
--save 或-S 选项将包安装为生产依赖：npm install <package> --save或
npm install <package> -S -
如果省略选项，默认安装为生产依赖：
npm install <package>
-
-
示例在
package.json 中："dependencies": { "express": "^4.0.0", "lodash": "^4.0.0", "react": "^18.0.0" } -
常见生产依赖
- 框架：
express、koa、nestjs - UI 库：
react、vue、angular - 工具库：
lodash、axios、moment
- 框架：
开发依赖与生产依赖的区别
| 特性 | 开发依赖（devDependencies） |
生产依赖（dependencies） |
|---|---|---|
| 使用环境 | 仅用于开发环境 | 用于生产环境 |
| 是否发布到生产 | 否 | 是 |
| 安装命令 | npm install |
npm install |
| 示例工具 | eslint、webpack、jest |
express、react、lodash |
如何选择依赖类型
-
开发依赖
- 如果包仅在开发阶段使用（如测试、构建、格式化等），则安装为开发依赖。
-
生产依赖
- 如果包是项目运行所必需的（如框架、库、工具等），则安装为生产依赖。
-
特殊情况
-
peerDependencies：用于插件或库开发，指定兼容的宿主包。 -
optionalDependencies：可选依赖，安装失败不影响项目运行。
-
最佳实践
-
明确区分依赖类型
- 开发依赖与生产依赖应严格区分，避免将不必要的包发布到生产环境。
-
使用
package-lock.json- 锁定依赖版本，确保团队环境一致。
-
定期更新依赖
- 使用
npm outdated 检查过期依赖，定期更新以修复漏洞。
- 使用
-
清理无用依赖
- 使用
npm prune 或npm uninstall 清理未使用的依赖。
- 使用
package.json 中 ^ 和 ~ 的区别
在 package.json 中，^ 和 ~ 是用于定义依赖版本范围的符号。它们决定了 npm 或 yarn 在安装或更新依赖时允许的版本范围。以下是它们的详细区别：
版本号格式
-
语义化版本号（SemVer）
-
格式：
主版本号.次版本号.修订版本号 -
示例：
1.2.3-
1：主版本号（Major），不兼容的 API 变更。 -
2：次版本号（Minor），向后兼容的功能新增。 -
3：修订版本号（Patch），向后兼容的问题修复。
-
-
-
版本范围符号
-
^ 和~ 是定义版本范围的前缀符号。
-
^ 的含义
-
定义
- 允许更新到最新的次版本和修订版本，但不更新主版本。
- 即：保持主版本号不变，次版本号和修订版本号可以更新。
-
规则
- 如果版本号是
^1.2.3，则允许更新的版本范围是>=1.2.3 <2.0.0。
- 如果版本号是
-
示例
-
^1.2.3：允许更新到1.3.0、1.4.0，但不允许更新到2.0.0。 -
^0.2.3：允许更新到0.2.4、0.3.0，但不允许更新到1.0.0。 -
^0.0.3：仅允许更新到0.0.4，不允许更新到0.1.0。
-
~ 的含义
-
定义
- 允许更新到最新的修订版本，但不更新次版本和主版本。
- 即：保持主版本号和次版本号不变，修订版本号可以更新。
-
规则
- 如果版本号是
~1.2.3，则允许更新的版本范围是>=1.2.3 <1.3.0。
- 如果版本号是
-
示例
-
~1.2.3：允许更新到1.2.4、1.2.5，但不允许更新到1.3.0。 -
~0.2.3：允许更新到0.2.4、0.2.5，但不允许更新到0.3.0。 -
~0.0.3：仅允许更新到0.0.4，不允许更新到0.1.0。
-
^ 和 ~ 的区别
| 特性 | ^（兼容版本） |
~（修订版本） |
|---|---|---|
| 更新范围 | 主版本不变，次版本和修订版本可更新 | 主版本和次版本不变，仅修订版本可更新 |
| 示例 | ^1.2.3 允许更新到 1.3.0 |
~1.2.3 允许更新到 1.2.4 |
| 适用场景 | 希望自动获取新功能，但避免破坏性变更 | 仅希望修复问题，不引入新功能 |
如何选择
-
使用
^ 的场景- 希望获取新功能和问题修复，但避免不兼容的变更。
- 适用于大多数依赖包。
-
使用
~ 的场景- 仅希望获取问题修复，不引入新功能。
- 适用于对稳定性要求较高的项目。
-
固定版本
- 如果希望完全锁定版本，避免任何更新，可以直接指定版本号（如
1.2.3）。
- 如果希望完全锁定版本，避免任何更新，可以直接指定版本号（如
示例
-
^ 示例"dependencies": { "lodash": "^4.17.21" }- 允许更新的版本范围：
>=4.17.21 <5.0.0。
- 允许更新的版本范围：
-
~ 示例"dependencies": { "lodash": "~4.17.21" }- 允许更新的版本范围：
>=4.17.21 <4.18.0。
- 允许更新的版本范围：
-
固定版本示例
"dependencies": { "lodash": "4.17.21" }- 仅允许使用
4.17.21 版本。
- 仅允许使用
package.json 中的各种 dependencies
package.json 是 Node.js 项目的核心配置文件，用于管理项目的依赖、脚本、版本等信息。其中，dependencies 是定义项目依赖的关键部分。以下是 package.json 中各种依赖类型的详细说明：
主要依赖类型
-
dependencies-
定义：项目运行所必需的依赖包。
-
安装方式：
npm install 或yarn add。 -
示例：
"dependencies": { "lodash": "^4.17.21", "express": "4.17.1" }
-
-
devDependencies-
定义：仅用于开发环境的依赖包（如测试工具、构建工具等）。
-
安装方式：
npm install 或--save-dev yarn add。--dev -
示例：
"devDependencies": { "eslint": "^7.32.0", "webpack": "5.51.1" }
-
-
peerDependencies-
定义：与当前包兼容的宿主包，通常用于插件或库的开发。
-
特点：不会自动安装，需要用户手动安装。
-
示例：
"peerDependencies": { "react": ">=16.8.0" }
-
-
optionalDependencies-
定义：可选的依赖包，即使安装失败也不会影响项目运行。
-
特点：优先级高于
dependencies，如果安装失败会静默忽略。 -
示例：
"optionalDependencies": { "fsevents": "^2.3.2" }
-
-
bundledDependencies-
定义：打包发布时需要包含的依赖包（通常是一个数组）。
-
特点：与
dependencies 和devDependencies 不同，需要手动列出包名。 -
示例：
"bundledDependencies": ["lodash", "express"]
-
ES6 模块化
ES6（ECMAScript 2015）引入了官方的模块化语法，提供了 import 和 export 关键字来实现模块的导入和导出。以下是 ES6 模块化的核心概念和用法：
定义
模块化是将代码拆分为独立模块的开发方式，每个模块具有独立的作用域，通过导入和导出实现模块间的依赖管理。ES6 模块化具有以下特点：
- 静态加载：模块的依赖关系在编译时确定，支持静态分析和优化。
- 独立作用域：每个模块拥有独立的作用域，避免全局污染。
- 严格模式：模块默认运行在严格模式下。
模块的导出（export）
-
命名导出
- 使用
export 关键字导出变量、函数或类。 - 导入时需要使用相同的名称。
// module.js export const name = 'ES6'; export function greet() { console.log('Hello, ES6!'); } - 使用
-
默认导出
- 使用
export default 导出模块的默认值。 - 导入时可以使用任意名称。
// module.js const name = 'ES6'; export default name; - 使用
-
混合导出
- 同时使用命名导出和默认导出。
// module.js export const name = 'ES6'; export default function greet() { console.log('Hello, ES6!'); }
模块的导入（import）
-
导入命名导出
- 使用
import { ... } 导入命名导出。
// app.js import { name, greet } from './module.js'; console.log(name); // 输出：ES6 greet(); // 输出：Hello, ES6! - 使用
-
导入默认导出
- 使用
import ... from 导入默认导出。
// app.js import myModule from './module.js'; console.log(myModule); // 输出：ES6 - 使用
-
导入全部导出
- 使用
import * as ... 导入模块的所有导出。
// app.js import * as module from './module.js'; console.log(module.name); // 输出：ES6 module.greet(); // 输出：Hello, ES6! - 使用
-
动态导入
- 使用
import() 动态加载模块，返回一个 Promise。
// app.js import('./module.js').then(module => { console.log(module.name); // 输出：ES6 }); - 使用
模块化的优势
-
代码组织
- 将代码拆分为独立模块，提高代码的可读性和可维护性。
-
依赖管理
- 明确模块间的依赖关系，避免全局变量污染。
-
静态分析
- 支持静态分析和优化，如 Tree-shaking（移除未使用的代码）。
-
复用性
- 模块可以复用，减少重复代码。
模块化的使用场景
-
前端开发
- 使用 ES6 模块化组织前端代码，结合打包工具（如 Webpack、Vite）进行构建。
-
Node.js 开发
- 在 Node.js 中使用 ES6 模块化（需将文件扩展名改为
.mjs 或在package.json 中设置"type": "module"）。
- 在 Node.js 中使用 ES6 模块化（需将文件扩展名改为
-
库开发
- 开发独立的库或工具，通过模块化提供清晰的 API。
注意事项
-
浏览器支持
- 现代浏览器支持原生 ES6 模块化，但需在
- 现代浏览器支持原生 ES6 模块化，但需在