前端面试500题大全

作者头像东城·2026-01-31 23:23:03·
前端开发面试 500 题大全（含答案、解析和示例）
本文收集了前端开发工程师最常见的 500 道面试题，涵盖了前端开发的各个方面，包括但不限于 HTML5、CSS3、JavaScript、ES6+、Vue、React、浏览器原理、网络协议、前端工程化等领域。每道题都配有详细的答案解析和实际示例，帮助你更好地理解和掌握相关知识点。
目录
[HTML5 和 CSS3（100题）](#html5-和-css3)
[JavaScript 核心概念（150题）](#javascript-核心概念)
[ES6+ 特性（50题）](#es6-特性)
[Vue.js 框架（50题）](#vuejs-框架)
[React.js 框架（50题）](#reactjs-框架)
浏览器和性能优化（30题）
网络和HTTP（30题）
前端工程化（20题）
算法和数据结构（20题）
HTML5 和 CSS3
1. 什么是语义化标签？请列举常用的语义化标签并说明其用途。
答案解析：
语义化标签是指使用恰当的 HTML 标签来传达文档结构和内容的含义，而不是单纯为了展示效果。使用语义化标签有以下好处：
提高代码可读性和可维护性
有利于 SEO 优化
提升无障碍访问体验
便于不同设备解析页面结构
常用的语义化标签包括：
  1. <header> - 页面或区块的头部
  2. <nav> - 导航栏
  3. <main> - 主要内容
  4. <article> - 独立的文章内容
  5. <section> - 区块
  6. <aside> - 侧边栏
  7. <footer> - 页面或区块的底部
  8. <figure> - 图片或图表
  9. <figcaption> - 图片或图表的说明
html
示例：
  1. <header>
  2. <nav>
  3. <ul>
  4. <li><a href="#home">首页</a>li>
  5. <li><a href="#about">关于</a>li>
  6. ul>
  7. nav>
  8. header>

  10. <main>
  11. <article>
  12. <h1>文章标题h1>
  13. <section>
  14. <h2>第一章h2>
  15. <p>章节内容...p>
  16. section>
  17. article>
  19. <aside>
  20. <h3>相关文章h3>
  21. <ul>
  22. <li><a href="#">推荐阅读 1</a>li>
  23. <li><a href="#">推荐阅读 2</a>li>
  24. ul>
  25. aside>
  26. main>

  28. <footer>
  29. <p>版权所有 © 2024p>
  30. footer>
html
2. 请详细解释 CSS 盒模型，以及标准盒模型和 IE 盒模型的区别。
答案解析：
CSS 盒模型描述了网页中的元素如何显示以及如何计算它们的尺寸。每个元素都被表示为一个矩形盒子，包含以下部分：
content（内容）
padding（内边距）
border（边框）
margin（外边距）
标准盒模型和 IE 盒模型的主要区别在于宽度和高度的计算方式：
标准盒模型（content-box）：width/height 只包含 content
IE 盒模型（border-box）：width/height 包含 content + padding + border
示例：
  1. /* 标准盒模型 */
  2. .standard-box {
  3. box-sizing: content-box; /* 默认值 */
  4. width: 200px;
  5. padding: 20px;
  6. border: 1px solid #000;
  7. /* 实际宽度 = 200px + 40px(padding) + 2px(border) = 242px */
  8. }

  10. /* IE盒模型 */
  11. .ie-box {
  12. box-sizing: border-box;
  13. width: 200px;
  14. padding: 20px;
  15. border: 1px solid #000;
  16. /* 实际宽度 = 200px（包含padding和border） */
  17. }
css
在实际开发中，通常推荐使用 IE 盒模型（border-box），因为它更直观且便于计算。常见的全局设置：
  1. * {
  2. box-sizing: border-box;
  3. }
css
3. 请解释 CSS 中的 BFC（Block Formatting Context）及其应用场景。
答案解析：
BFC（Block Formatting Context）是 CSS 中的一个重要概念，它是一个独立的渲染区域，有自己的渲染规则：
内部的盒子会在垂直方向上一个接一个放置
同一个 BFC 内的相邻元素的 margin 会发生重叠
BFC 区域不会与浮动元素重叠
BFC 能包含浮动元素（清除浮动）
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
触发 BFC 的条件：
根元素（<html>）
浮动元素（float 不为 none）
绝对定位元素（position 为 absolute 或 fixed）
display 为 inline-block、flex、grid、flow-root
overflow 不为 visible 的块级元素
应用场景示例：
清除浮动：
  1. <style>
  2. .container {
  3. overflow: hidden; /* 触发 BFC */
  4. }
  5. .float-item {
  6. float: left;
  7. width: 100px;
  8. height: 100px;
  9. background: #f0f0f0;
  10. }
  11. style>

  13. <div class="container">
  14. <div class="float-item">div>
  15. <div class="float-item">div>
  16. div>
html
防止 margin 重叠：
  1. <style>
  2. .box {
  3. margin: 20px 0;
  4. background: #f0f0f0;
  5. }
  6. .bfc-container {
  7. display: flow-root; /* 触发 BFC */
  8. }
  9. style>

  11. <div class="box">Box 1div>
  12. <div class="bfc-container">
  13. <div class="box">Box 2div>
  14. div>
html
自适应两栏布局：
  1. <style>
  2. .aside {
  3. float: left;
  4. width: 200px;
  5. background: #f0f0f0;
  6. }
  7. .main {
  8. display: flow-root; /* 触发 BFC */
  9. background: #ddd;
  10. }
  11. style>

  13. <div class="aside">侧边栏div>
  14. <div class="main">主要内容div>
html
4. 请详细解释 CSS Flexbox 布局模型及其常用属性。
答案解析：
Flexbox（弹性盒子）是一种一维布局模型，它提供了强大的空间分布和对齐能力。主要包含两个角色：容器（flex container）和项目（flex item）。
Flex 容器属性：
display: flex | inline-flex：定义 flex 容器
flex-direction：主轴方向
flex-wrap：是否换行
justify-content：主轴对齐方式
align-items：交叉轴对齐方式
align-content：多行对齐方式
Flex 项目属性：
flex-grow：放大比例
flex-shrink：缩小比例
flex-basis：基准大小
flex：上述三个属性的简写
align-self：单个项目对齐方式
order：排列顺序
示例：
  1. <style>
  2. .container {
  3. display: flex;
  4. justify-content: space-between;
  5. align-items: center;
  6. height: 200px;
  7. background: #f0f0f0;
  8. }

  10. .item {
  11. flex: 1;
  12. height: 100px;
  13. margin: 0 10px;
  14. background: #ddd;
  15. }

  17. .item:nth-child(2) {
  18. flex: 2; /* 占据2倍空间 */
  19. }
  20. style>

  22. <div class="container">
  23. <div class="item">1div>
  24. <div class="item">2div>
  25. <div class="item">3div>
  26. div>
html
常见布局场景：
居中布局：
  1. .center {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. }
css
等分布局：
  1. .equal {
  2. display: flex;
  3. }
  4. .equal > * {
  5. flex: 1;
  6. }
css
粘性页脚：
  1. .page {
  2. display: flex;
  3. flex-direction: column;
  4. min-height: 100vh;
  5. }
  6. .content {
  7. flex: 1;
  8. }
css
5. 请解释 CSS Grid 布局系统及其与 Flexbox 的区别。
答案解析：
CSS Grid 是一个二维布局系统，专门用于创建基于网格的布局。与 Flexbox 的一维布局不同，Grid 可以同时控制行和列的布局。
Grid 容器属性：
display: grid | inline-grid：定义网格容器
grid-template-columns：定义列的大小和数量
grid-template-rows：定义行的大小和数量
grid-gap：定义网格间距
grid-template-areas：定义网格区域
Grid 项目属性：
grid-column：指定列的开始和结束位置
grid-row：指定行的开始和结束位置
grid-area：指定项目所在的区域
示例：
  1. <style>
  2. .grid-container {
  3. display: grid;
  4. grid-template-columns: repeat(3, 1fr);
  5. grid-template-rows: auto 1fr auto;
  6. grid-gap: 20px;
  7. height: 100vh;
  8. }

  10. .header {
  11. grid-column: 1 / -1; /* 跨越所有列 */
  12. background: #f0f0f0;
  13. }

  15. .sidebar {
  16. grid-row: 2 / 3;
  17. background: #ddd;
  18. }

  20. .main {
  21. grid-column: 2 / -1;
  22. grid-row: 2 / 3;
  23. background: #ccc;
  24. }

  26. .footer {
  27. grid-column: 1 / -1;
  28. background: #f0f0f0;
  29. }
  30. style>

  32. <div class="grid-container">
  33. <header class="header">页头header>
  34. <aside class="sidebar">侧边栏aside>
  35. <main class="main">主要内容main>
  36. <footer class="footer">页脚footer>
  37. div>
html
Grid vs Flexbox：
维度：
Grid：二维布局（行和列）
Flexbox：一维布局（主轴）
适用场景：
Grid：适合整体页面布局
Flexbox：适合组件内部布局
方向控制：
Grid：可以同时控制两个方向
Flexbox：主要控制一个方向
对齐方式：
Grid：更适合大规模的网格系统
Flexbox：更适合小规模的灵活布局
6. 解释 CSS 中的定位（position）属性及其应用场景。
答案解析：
CSS 定位属性用于控制元素在页面中的位置，包括以下值：
static（默认值）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）
sticky（粘性定位）
各种定位的特点和应用：
relative：
相对于自身原始位置偏移
不脱离文档流
常用于为绝对定位子元素提供参考点
  1. .relative-box {
  2. position: relative;
  3. top: 20px;
  4. left: 20px;
  5. }
css
absolute：
相对于最近的非 static 定位祖先元素定位
脱离文档流
常用于弹窗、工具提示等
  1. .modal {
  2. position: absolute;
  3. top: 50%;
  4. left: 50%;
  5. transform: translate(-50%, -50%);
  6. }
css
fixed：
相对于视口定位
脱离文档流
常用于固定导航栏、返回顶部按钮等
  1. .navbar {
  2. position: fixed;
  3. top: 0;
  4. left: 0;
  5. width: 100%;
  6. }
css
sticky：
在阈值之前为相对定位，之后为固定定位
不脱离文档流
常用于吸顶导航、表格头等
  1. .sticky-header {
  2. position: sticky;
  3. top: 0;
  4. background: white;
  5. z-index: 1;
  6. }
css
实际应用示例：
固定导航栏：
  1. <style>
  2. .navbar {
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. width: 100%;
  7. background: white;
  8. box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  9. z-index: 1000;
  10. }
  11. style>
html
模态框居中：
  1. <style>
  2. .modal-overlay {
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. width: 100%;
  7. height: 100%;
  8. background: rgba(0,0,0,0.5);
  9. }

  11. .modal {
  12. position: absolute;
  13. top: 50%;
  14. left: 50%;
  15. transform: translate(-50%, -50%);
  16. background: white;
  17. padding: 20px;
  18. border-radius: 4px;
  19. }
  20. style>
html
吸顶效果：
  1. <style>
  2. .section-header {
  3. position: sticky;
  4. top: 0;
  5. padding: 10px;
  6. background: white;
  7. border-bottom: 1px solid #eee;
  8. }
  9. style>
html
7. CSS 预处理器（如 Sass/Less）的主要特性和优势是什么？
答案解析：
CSS 预处理器是一种专门的编程语言，让 CSS 具备了一定的编程能力，增强了 CSS 的可维护性和复用性。
主要特性：
变量：
  1. // SCSS
  2. $primary-color: #3498db;
  3. $spacing: 20px;

  5. .button {
  6. background: $primary-color;
  7. padding: $spacing;
  8. }
scss
嵌套：
  1. .nav {
  2. background: #fff;
  4. &__item { // 编译为 .nav__item
  5. padding: 10px;
  7. &:hover { // 编译为 .nav__item:hover
  8. background: #f0f0f0;
  9. }
  10. }
  11. }
scss
混合（Mixins）：
  1. @mixin flex-center {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. }

  7. .card {
  8. @include flex-center;
  9. background: #fff;
  10. }
scss
函数：
  1. @function calculate-width($n) {
  2. @return $n * 100px;
  3. }

  5. .container {
  6. width: calculate-width(3); // 300px
  7. }
scss
继承：
  1. %button-base {
  2. padding: 10px 20px;
  3. border: none;
  4. border-radius: 4px;
  5. }

  7. .button-primary {
  8. @extend %button-base;
  9. background: blue;
  10. }

  12. .button-secondary {
  13. @extend %button-base;
  14. background: gray;
  15. }
scss
主要优势：
代码复用性：
通过变量、混合、继承减少重复代码
可以创建可复用的样式库
可维护性：
更好的代码组织
模块化开发
命名空间
开发效率：
嵌套减少重复选择器
运算能力
自动化工具集成
逻辑处理：
条件语句
循环
函数
示例：完整的 SCSS 应用
  1. // 变量
  2. $primary: #3498db;
  3. $secondary: #2ecc71;
  4. $spacing: 20px;

  6. // 混合
  7. @mixin button($bg-color) {
  8. padding: $spacing / 2;
  9. background: $bg-color;
  10. border: none;
  11. border-radius: 4px;
  13. &:hover {
  14. background: darken($bg-color, 10%);
  15. }
  16. }

  18. // 函数
  19. @function strip-unit($value) {
  20. @return $value / ($value * 0 + 1);
  21. }

  23. // 基础样式
  24. %flex-center {
  25. display: flex;
  26. justify-content: center;
  27. align-items: center;
  28. }

  30. // 组件样式
  31. .container {
  32. @extend %flex-center;
  33. max-width: 1200px;
  34. margin: 0 auto;
  35. padding: $spacing;
  37. .content {
  38. flex: 1;
  40. @media (max-width: 768px) {
  41. padding: $spacing / 2;
  42. }
  43. }
  44. }

  46. .button {
  47. &--primary {
  48. @include button($primary);
  49. }
  51. &--secondary {
  52. @include button($secondary);
  53. }
  54. }
scss
编译后的 CSS：
  1. .container {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. max-width: 1200px;
  6. margin: 0 auto;
  7. padding: 20px;
  8. }

  10. .container .content {
  11. flex: 1;
  12. }

  14. @media (max-width: 768px) {
  15. .container .content {
  16. padding: 10px;
  17. }
  18. }

  20. .button--primary {
  21. padding: 10px;
  22. background: #3498db;
  23. border: none;
  24. border-radius: 4px;
  25. }

  27. .button--primary:hover {
  28. background: #217dbb;
  29. }

  31. .button--secondary {
  32. padding: 10px;
  33. background: #2ecc71;
  34. border: none;
  35. border-radius: 4px;
  36. }

  38. .button--secondary:hover {
  39. background: #25a25a;
  40. }
css
8. 请详细解释 CSS3 中的转换（Transform）、过渡（Transition）和动画（Animation）。
答案解析：
CSS3 提供了强大的动画和过渡效果能力，主要包括三个方面：转换、过渡和动画。
1. 转换（Transform）
transform 属性允许你旋转、缩放、倾斜或平移给定元素：
  1. .transform-example {
  2. /* 2D 转换 */
  3. transform: translate(50px, 100px) /* 平移 */
  4. rotate(45deg) /* 旋转 */
  5. scale(1.5) /* 缩放 */
  6. skew(10deg, 20deg); /* 倾斜 */
  8. /* 3D 转换 */
  9. transform: rotateX(45deg) /* 3D 旋转 */
  10. perspective(1000px) /* 透视 */
  11. translateZ(100px); /* Z轴平移 */
  12. }
css
2. 过渡（Transition）
transition 允许在一定时间内平滑地改变属性值：
  1. .transition-example {
  2. width: 100px;
  3. background: blue;
  4. transition: all 0.3s ease-in-out;
  5. }

  7. .transition-example:hover {
  8. width: 200px;
  9. background: red;
  10. }
css
过渡属性包括：
transition-property：要过渡的属性
transition-duration：过渡持续时间
transition-timing-function：过渡时间函数
transition-delay：过渡延迟时间
3. 动画（Animation）
animation 允许创建复杂的自定义动画：
  1. /* 定义关键帧 */
  2. @keyframes slide-in {
  3. 0% {
  4. transform: translateX(-100%);
  5. opacity: 0;
  6. }
  7. 100% {
  8. transform: translateX(0);
  9. opacity: 1;
  10. }
  11. }

  13. .animation-example {
  14. animation: slide-in 1s ease-out forwards;
  15. }

  17. /* 多个动画组合 */
  18. .multiple-animations {
  19. animation:
  20. slide-in 1s ease-out,
  21. fade-in 2s ease-in;
  22. }
css
动画属性包括：
animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画重复次数
animation-direction：动画方向
animation-fill-mode：动画填充模式
animation-play-state：动画播放状态
实际应用示例：
按钮悬停效果：
  1. .button {
  2. padding: 10px 20px;
  3. background: #3498db;
  4. color: white;
  5. border: none;
  6. border-radius: 4px;
  7. transition: all 0.3s ease;
  8. }

  10. .button:hover {
  11. transform: translateY(-2px);
  12. box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  13. }
css
加载动画：
  1. @keyframes spin {
  2. 0% { transform: rotate(0deg); }
  3. 100% { transform: rotate(360deg); }
  4. }

  6. .loader {
  7. width: 40px;
  8. height: 40px;
  9. border: 4px solid #f3f3f3;
  10. border-top: 4px solid #3498db;
  11. border-radius: 50%;
  12. animation: spin 1s linear infinite;
  13. }
css
卡片翻转效果：
  1. .card {
  2. position: relative;
  3. width: 300px;
  4. height: 200px;
  5. transform-style: preserve-3d;
  6. transition: transform 0.6s;
  7. }

  9. .card:hover {
  10. transform: rotateY(180deg);
  11. }

  13. .card-front,
  14. .card-back {
  15. position: absolute;
  16. width: 100%;
  17. height: 100%;
  18. backface-visibility: hidden;
  19. }

  21. .card-back {
  22. transform: rotateY(180deg);
  23. }
css
9. 解释 CSS3 中的响应式设计和媒体查询。
答案解析：
响应式设计是一种让网站能够自适应不同设备和屏幕尺寸的设计方法。主要通过媒体查询（Media Queries）和弹性布局来实现。
1. 媒体查询基础语法：
  1. @media screen and (max-width: 768px) {
  2. /* 针对屏幕宽度小于等于 768px 的样式 */
  3. }

  5. @media screen and (min-width: 769px) and (max-width: 1024px) {
  6. /* 针对屏幕宽度在 769px 到 1024px 之间的样式 */
  7. }
css
2. 常见断点设置：
  1. /* 移动优先的响应式设计 */
  2. /* 基础样式（移动端） */
  3. .container {
  4. width: 100%;
  5. padding: 15px;
  6. }

  8. /* 平板 */
  9. @media screen and (min-width: 768px) {
  10. .container {
  11. width: 750px;
  12. margin: 0 auto;
  13. }
  14. }

  16. /* 桌面 */
  17. @media screen and (min-width: 1024px) {
  18. .container {
  19. width: 970px;
  20. }
  21. }

  23. /* 大屏幕 */
  24. @media screen and (min-width: 1200px) {
  25. .container {
  26. width: 1170px;
  27. }
  28. }
css
3. 响应式布局技巧：
流式布局：
  1. .fluid-layout {
  2. width: 90%;
  3. max-width: 1200px;
  4. margin: 0 auto;
  5. }
css
弹性图片：
  1. .responsive-image {
  2. max-width: 100%;
  3. height: auto;
  4. }
css
弹性字体：
  1. html {
  2. font-size: 16px;
  3. }

  5. @media screen and (max-width: 768px) {
  6. html {
  7. font-size: 14px;
  8. }
  9. }

  11. .text {
  12. font-size: 1rem; /* 相对于根元素的字体大小 */
  13. }
css
响应式网格：
  1. .grid {
  2. display: grid;
  3. grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  4. gap: 20px;
  5. }
css
4. 完整的响应式设计示例：
  1. /* 基础样式 */
  2. :root {
  3. --primary-color: #3498db;
  4. --spacing: 20px;
  5. }

  7. /* 响应式排版 */
  8. html {
  9. font-size: 16px;
  10. }

  12. @media screen and (max-width: 768px) {
  13. html {
  14. font-size: 14px;
  15. }
  16. }

  18. /* 响应式容器 */
  19. .container {
  20. width: 90%;
  21. max-width: 1200px;
  22. margin: 0 auto;
  23. padding: var(--spacing);
  24. }

  26. /* 响应式导航 */
  27. .nav {
  28. display: flex;
  29. justify-content: space-between;
  30. align-items: center;
  31. }

  33. @media screen and (max-width: 768px) {
  34. .nav {
  35. flex-direction: column;
  36. }
  38. .nav-menu {
  39. width: 100%;
  40. display: none; /* 移动端菜单默认隐藏 */
  41. }
  43. .nav-menu.active {
  44. display: block;
  45. }
  46. }

  48. /* 响应式网格 */
  49. .grid {
  50. display: grid;
  51. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  52. gap: var(--spacing);
  53. }

  55. /* 响应式卡片 */
  56. .card {
  57. background: white;
  58. padding: var(--spacing);
  59. border-radius: 4px;
  60. box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  61. }

  63. @media screen and (max-width: 768px) {
  64. .card {
  65. padding: calc(var(--spacing) / 2);
  66. }
  67. }

  69. /* 响应式表格 */
  70. .table {
  71. width: 100%;
  72. border-collapse: collapse;
  73. }

  75. @media screen and (max-width: 768px) {
  76. .table {
  77. display: block;
  78. overflow-x: auto;
  79. }
  80. }

  82. /* 响应式图片 */
  83. .image {
  84. max-width: 100%;
  85. height: auto;
  86. }

  88. /* 响应式视频 */
  89. .video-container {
  90. position: relative;
  91. padding-bottom: 56.25%; /* 16:9 比例 */
  92. height: 0;
  93. overflow: hidden;
  94. }

  96. .video-container iframe {
  97. position: absolute;
  98. top: 0;
  99. left: 0;
  100. width: 100%;
  101. height: 100%;
  102. }
css
10. CSS3 中的新选择器和伪类/伪元素有哪些？
答案解析：
CSS3 引入了许多新的选择器和伪类/伪元素，大大增强了样式选择的能力。
1. 属性选择器：
  1. /* 精确匹配 */
  2. [data-type="primary"] {
  3. background: blue;
  4. }

  6. /* 开头匹配 */
  7. [class^="btn-"] {
  8. padding: 10px;
  9. }

  11. /* 结尾匹配 */
  12. [href$=".pdf"] {
  13. color: red;
  14. }

  16. /* 包含匹配 */
  17. [title*="hello"] {
  18. font-weight: bold;
  19. }
css
2. 结构性伪类：
  1. /* 第一个子元素 */
  2. :first-child {
  3. margin-top: 0;
  4. }

  6. /* 最后一个子元素 */
  7. :last-child {
  8. margin-bottom: 0;
  9. }

  11. /* 第 n 个子元素 */
  12. :nth-child(2n) {
  13. background: #f0f0f0;
  14. }

  16. /* 第 n 个特定类型的元素 */
  17. p:nth-of-type(odd) {
  18. color: blue;
  19. }
css
3. 状态伪类：
  1. /* 输入框焦点 */
  2. input:focus {
  3. border-color: blue;
  4. }

  6. /* 禁用状态 */
  7. button:disabled {
  8. opacity: 0.5;
  9. }

  11. /* 选中状态 */
  12. input:checked + label {
  13. color: green;
  14. }

  16. /* 必填字段 */
  17. input:required {
  18. border-color: red;
  19. }
css
4. 目标伪类：
  1. /* 当 URL 片段匹配元素 ID 时 */
  2. :target {
  3. background: yellow;
  4. }
css
5. 否定伪类：
  1. /* 选择非特定元素 */
  2. .item:not(.active) {
  3. opacity: 0.5;
  4. }
css
6. 伪元素：
  1. /* 首字母样式 */
  2. p::first-letter {
  3. font-size: 2em;
  4. float: left;
  5. }

  7. /* 首行样式 */
  8. p::first-line {
  9. color: blue;
  10. }

  12. /* 前后插入内容 */
  13. .quote::before {
  14. content: "「";
  15. }
  16. .quote::after {
  17. content: "」";
  18. }

  20. /* 选择文本样式 */
  21. ::selection {
  22. background: yellow;
  23. color: black;
  24. }
css
实际应用示例：
自定义列表样式：
  1. .custom-list {
  2. list-style: none;
  3. padding: 0;
  4. }

  6. .custom-list li::before {
  7. content: "✓";
  8. color: green;
  9. margin-right: 8px;
  10. }
css
卡片悬停效果：
  1. .card {
  2. position: relative;
  3. padding: 20px;
  4. }

  6. .card::after {
  7. content: "";
  8. position: absolute;
  9. top: 0;
  10. left: 0;
  11. width: 100%;
  12. height: 100%;
  13. border: 2px solid transparent;
  14. transition: all 0.3s;
  15. }

  17. .card:hover::after {
  18. border-color: #3498db;
  19. transform: scale(1.05);
  20. }
css
表单验证样式：
  1. .form-input:invalid {
  2. border-color: red;
  3. }

  5. .form-input:invalid::after {
  6. content: "⚠";
  7. color: red;
  8. margin-left: 8px;
  9. }

  11. .form-input:valid {
  12. border-color: green;
  13. }

  15. .form-input:valid::after {
  16. content: "✓";
  17. color: green;
  18. margin-left: 8px;
  19. }
css
交替背景色：
  1. .striped-list li:nth-child(odd) {
  2. background: #f9f9f9;
  3. }

  5. .striped-list li:nth-child(even) {
  6. background: #ffffff;
  7. }
css
高级导航样式：
  1. .nav-link {
  2. position: relative;
  3. padding: 10px;
  4. }

  6. .nav-link::after {
  7. content: "";
  8. position: absolute;
  9. bottom: 0;
  10. left: 50%;
  11. width: 0;
  12. height: 2px;
  13. background: #3498db;
  14. transition: all 0.3s;
  15. transform: translateX(-50%);
  16. }

  18. .nav-link:hover::after {
  19. width: 100%;
  20. }

  22. .nav-link.active::after {
  23. width: 100%;
  24. }
css
JavaScript 核心概念
11. JavaScript 中的数据类型有哪些？如何进行类型判断？
答案解析：
JavaScript 中的数据类型分为两大类：基本数据类型（原始类型）和引用数据类型（对象类型）。
1. 基本数据类型：
Number：数字
String：字符串
Boolean：布尔值
Undefined：未定义
Null：空值
Symbol：符号（ES6）
BigInt：大整数（ES2020）
2. 引用数据类型：
Object：对象
Array：数组
Function：函数
Date：日期
RegExp：正则表达式
Map：映射
Set：集合
Promise：期约
...等
类型判断的方法：
typeof 运算符：
  1. typeof 42; // "number"
  2. typeof "hello"; // "string"
  3. typeof true; // "boolean"
  4. typeof undefined; // "undefined"
  5. typeof Symbol(); // "symbol"
  6. typeof null; // "object" (这是一个历史遗留的bug)
  7. typeof {}; // "object"
  8. typeof []; // "object"
  9. typeof function(){}; // "function"
javascript
instanceof 运算符：
  1. [] instanceof Array; // true
  2. new Date() instanceof Date; // true
  3. /regex/ instanceof RegExp; // true

  5. // 自定义类型判断
  6. class MyClass {}
  7. const obj = new MyClass();
  8. obj instanceof MyClass; // true
javascript
Object.prototype.toString.call()：
  1. Object.prototype.toString.call(42); // "[object Number]"
  2. Object.prototype.toString.call("hello"); // "[object String]"
  3. Object.prototype.toString.call(true); // "[object Boolean]"
  4. Object.prototype.toString.call(undefined); // "[object Undefined]"
  5. Object.prototype.toString.call(null); // "[object Null]"
  6. Object.prototype.toString.call({}); // "[object Object]"
  7. Object.prototype.toString.call([]); // "[object Array]"
  8. Object.prototype.toString.call(function(){}); // "[object Function]"
javascript
Array.isArray()：
  1. Array.isArray([]); // true
  2. Array.isArray({}); // false
javascript
实际应用示例：
通用类型检查函数：
  1. function getType(value) {
  2. if (value === null) {
  3. return 'null';
  4. }
  5. if (typeof value === 'object') {
  6. return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
  7. }
  8. return typeof value;
  9. }

  11. // 使用示例
  12. getType(42); // "number"
  13. getType("hello"); // "string"
  14. getType(true); // "boolean"
  15. getType(undefined); // "undefined"
  16. getType(null); // "null"
  17. getType({}); // "object"
  18. getType([]); // "array"
  19. getType(function(){}); // "function"
  20. getType(new Date()); // "date"
  21. getType(/regex/); // "regexp"
javascript
类型安全的值比较：
  1. function safelyCompareValues(value1, value2) {
  2. // 首先比较类型
  3. if (getType(value1) !== getType(value2)) {
  4. return false;
  5. }
  7. // 对于数组，递归比较每个元素
  8. if (Array.isArray(value1)) {
  9. if (value1.length !== value2.length) {
  10. return false;
  11. }
  12. return value1.every((item, index) => safelyCompareValues(item, value2[index]));
  13. }
  15. // 对于对象，递归比较每个属性
  16. if (getType(value1) === 'object') {
  17. const keys1 = Object.keys(value1);
  18. const keys2 = Object.keys(value2);
  19. if (keys1.length !== keys2.length) {
  20. return false;
  21. }
  22. return keys1.every(key => safelyCompareValues(value1[key], value2[key]));
  23. }
  25. // 基本类型直接比较
  26. return value1 === value2;
  27. }

  29. // 使用示例
  30. safelyCompareValues([1, 2, 3], [1, 2, 3]); // true
  31. safelyCompareValues([1, 2, 3], [1, 2, '3']); // false
  32. safelyCompareValues({a: 1, b: 2}, {a: 1, b: 2}); // true
  33. safelyCompareValues({a: 1, b: 2}, {b: 2, a: 1}); // true
javascript
类型转换工具：
  1. const TypeConverter = {
  2. toNumber(value) {
  3. if (typeof value === 'number') return value;
  4. if (typeof value === 'string') {
  5. const num = Number(value);
  6. if (!isNaN(num)) return num;
  7. }
  8. throw new TypeError('Cannot convert value to number');
  9. },
  11. toString(value) {
  12. if (value === null) return 'null';
  13. if (value === undefined) return 'undefined';
  14. if (typeof value === 'object') {
  15. return JSON.stringify(value);
  16. }
  17. return String(value);
  18. },
  20. toBoolean(value) {
  21. return Boolean(value);
  22. },
  24. toArray(value) {
  25. if (Array.isArray(value)) return value;
  26. if (typeof value === 'string') return value.split('');
  27. if (value === null || value === undefined) return [];
  28. return [value];
  29. }
  30. };

  32. // 使用示例
  33. TypeConverter.toNumber('123'); // 123
  34. TypeConverter.toString({a: 1}); // "{"a":1}"
  35. TypeConverter.toBoolean(1); // true
  36. TypeConverter.toArray('hello'); // ['h', 'e', 'l', 'l', 'o']
javascript
12. 详细解释 JavaScript 中的作用域和作用域链。
答案解析：
作用域是变量和函数的可访问范围，JavaScript 中主要有全局作用域、函数作用域和块级作用域（ES6）。作用域链则是多个作用域的嵌套关系。
1. 作用域类型：
全局作用域：
  1. var globalVar = 'global'; // 全局变量

  3. function globalFunction() {
  4. console.log(globalVar); // 可以访问全局变量
  5. }
javascript
函数作用域：
  1. function outer() {
  2. var functionVar = 'function'; // 函数作用域变量
  4. function inner() {
  5. console.log(functionVar); // 可以访问外部函数变量
  6. }
  8. inner();
  9. }
javascript
块级作用域（ES6）：
  1. {
  2. let blockVar = 'block'; // 块级作用域变量
  3. const constVar = 'const'; // 块级作用域常量
  4. }
  5. // console.log(blockVar); // ReferenceError
javascript
2. 作用域链：
作用域链是由当前作用域到全局作用域的链式查找过程：
  1. var global = 'global';

  3. function outer() {
  4. var outerVar = 'outer';
  6. function inner() {
  7. var innerVar = 'inner';
  8. console.log(innerVar); // 当前作用域
  9. console.log(outerVar); // 外部作用域
  10. console.log(global); // 全局作用域
  11. }
  13. inner();
  14. }
javascript
3. 变量提升：
  1. console.log(hoistedVar); // undefined
  2. var hoistedVar = 'value';

  4. // 等同于：
  5. var hoistedVar;
  6. console.log(hoistedVar);
  7. hoistedVar = 'value';

  9. // 函数声明也会提升
  10. hoistedFunction(); // 可以执行
  11. function hoistedFunction() {
  12. console.log('function hoisted');
  13. }
javascript
4. 闭包和作用域：
  1. function createCounter() {
  2. let count = 0; // 私有变量
  4. return {
  5. increment() {
  6. return ++count;
  7. },
  8. decrement() {
  9. return --count;
  10. },
  11. getCount() {
  12. return count;
  13. }
  14. };
  15. }

  17. const counter = createCounter();
  18. console.log(counter.increment()); // 1
  19. console.log(counter.increment()); // 2
  20. console.log(counter.getCount()); // 2
javascript
5. let/const 和暂时性死区（TDZ）：
  1. {
  2. // TDZ 开始
  3. // console.log(blockVar); // ReferenceError
  4. let blockVar = 'block'; // TDZ 结束
  6. const constVar = 'const';
  7. // constVar = 'new value'; // TypeError
  8. }
javascript
实际应用示例：
模块化封装：
  1. const Module = (function() {
  2. // 私有变量和函数
  3. let privateVar = 'private';
  4. function privateFunction() {
  5. return privateVar;
  6. }
  8. // 公共 API
  9. return {
  10. publicMethod() {
  11. return privateFunction();
  12. },
  13. publicVar: 'public'
  14. };
  15. })();

  17. console.log(Module.publicVar); // "public"
  18. console.log(Module.publicMethod()); // "private"
  19. // console.log(Module.privateVar); // undefined
javascript
事件处理器：
  1. function createEventHandler(element, event) {
  2. let count = 0;
  4. element.addEventListener(event, function() {
  5. count++;
  6. console.log(`Event triggered ${count} times`);
  7. });
  9. return {
  10. getCount() {
  11. return count;
  12. },
  13. resetCount() {
  14. count = 0;
  15. }
  16. };
  17. }

  19. const handler = createEventHandler(button, 'click');
  20. // 点击按钮后...
  21. console.log(handler.getCount()); // 显示点击次数
javascript
迭代器生成器：
  1. function createIterator(array) {
  2. let index = 0;
  4. return {
  5. next() {
  6. if (index < array.length) {
  7. return {
  8. value: array[index++],
  9. done: false
  10. };
  11. }
  12. return { done: true };
  13. },
  15. current() {
  16. return array[index];
  17. }
  18. };
  19. }

  21. const iterator = createIterator([1, 2, 3]);
  22. console.log(iterator.next()); // { value: 1, done: false }
  23. console.log(iterator.next()); // { value: 2, done: false }
  24. console.log(iterator.next()); // { value: 3, done: false }
  25. console.log(iterator.next()); // { done: true }
javascript
13. 解释 JavaScript 中的原型和原型链。
答案解析：
原型（Prototype）是 JavaScript 实现继承的主要方式。每个对象都有一个原型对象，对象会从原型"继承"属性和方法。原型链则是由原型对象组成的链式查找机制。
1. 原型基础：
  1. // 构造函数
  2. function Person(name) {
  3. this.name = name;
  4. }

  6. // 原型方法
  7. Person.prototype.sayHello = function() {
  8. return `Hello, I'm ${this.name}`;
  9. };

  11. // 创建实例
  12. const person = new Person('John');
  13. console.log(person.sayHello()); // "Hello, I'm John"

  15. // 原型链查找
  16. console.log(person.__proto__ === Person.prototype); // true
  17. console.log(Person.prototype.__proto__ === Object.prototype); // true
  18. console.log(Object.prototype.__proto__ === null); // true
javascript
2. 继承实现：
原型链继承：
  1. function Animal(name) {
  2. this.name = name;
  3. }

  5. Animal.prototype.speak = function() {
  6. return `${this.name} makes a sound`;
  7. };

  9. function Dog(name) {
  10. Animal.call(this, name); // 调用父类构造函数
  11. }

  13. // 设置原型链
  14. Dog.prototype = Object.create(Animal.prototype);
  15. Dog.prototype.constructor = Dog;

  17. // 添加子类方法
  18. Dog.prototype.bark = function() {
  19. return `${this.name} barks`;
  20. };

  22. const dog = new Dog('Rex');
  23. console.log(dog.speak()); // "Rex makes a sound"
  24. console.log(dog.bark()); // "Rex barks"
javascript
Class 语法（ES6）：
  1. class Animal {
  2. constructor(name) {
  3. this.name = name;
  4. }
  6. speak() {
  7. return `${this.name} makes a sound`;
  8. }
  9. }

  11. class Dog extends Animal {
  12. constructor(name) {
  13. super(name);
  14. }
  16. bark() {
  17. return `${this.name} barks`;
  18. }
  19. }

  21. const dog = new Dog('Rex');
  22. console.log(dog.speak()); // "Rex makes a sound"
  23. console.log(dog.bark()); // "Rex barks"
javascript
3. 实例方法和静态方法：
  1. class Calculator {
  2. // 实例方法
  3. add(a, b) {
  4. return a + b;
  5. }
  7. // 静态方法
  8. static multiply(a, b) {
  9. return a * b;
  10. }
  11. }

  13. const calc = new Calculator();
  14. console.log(calc.add(1, 2)); // 3
  15. console.log(Calculator.multiply(2, 3)); // 6
javascript
4. 原型方法扩展：
  1. // 扩展内置对象原型
  2. Array.prototype.first = function() {
  3. return this[0];
  4. };

  6. Array.prototype.last = function() {
  7. return this[this.length - 1];
  8. };

  10. const arr = [1, 2, 3];
  11. console.log(arr.first()); // 1
  12. console.log(arr.last()); // 3
javascript
实际应用示例：
组件继承：
  1. class Component {
  2. constructor(props = {}) {
  3. this.props = props;
  4. this.state = {};
  5. }
  7. setState(newState) {
  8. this.state = { ...this.state, ...newState };
  9. this.render();
  10. }
  12. render() {
  13. throw new Error('Component must implement render method');
  14. }
  15. }

  17. class Button extends Component {
  18. constructor(props) {
  19. super(props);
  20. this.state = {
  21. isPressed: false
  22. };
  23. }
  25. toggle() {
  26. this.setState({ isPressed: !this.state.isPressed });
  27. }
  29. render() {
  30. return `<button class="${this.state.isPressed ? 'pressed' : ''}">${this.props.label}button>`;
  31. }
  32. }

  34. const button = new Button({ label: 'Click me' });
  35. console.log(button.render()); // ''
  36. button.toggle();
  37. console.log(button.render()); // ''
javascript
混入（Mixin）模式：
  1. const LoggerMixin = {
  2. log(message) {
  3. console.log(`[${this.constructor.name}] ${message}`);
  4. },
  6. error(message) {
  7. console.error(`[${this.constructor.name}] Error: ${message}`);
  8. }
  9. };

  11. const EventMixin = {
  12. on(event, callback) {
  13. this._events = this._events || {};
  14. this._events[event] = this._events[event] || [];
  15. this._events[event].push(callback);
  16. },
  18. emit(event, data) {
  19. if (this._events && this._events[event]) {
  20. this._events[event].forEach(callback => callback(data));
  21. }
  22. }
  23. };

  25. class UserService {
  26. constructor() {
  27. Object.assign(this, LoggerMixin, EventMixin);
  28. }
  30. login(username) {
  31. this.log(`User ${username} logged in`);
  32. this.emit('login', { username });
  33. }
  34. }

  36. const service = new UserService();
  37. service.on('login', data => console.log('Login event:', data));
  38. service.login('john'); // 输出日志和触发事件
javascript
链式调用：
  1. class Query {
  2. constructor(collection) {
  3. this.collection = collection;
  4. }
  6. filter(predicate) {
  7. this.collection = this.collection.filter(predicate);
  8. return this;
  9. }
  11. map(transform) {
  12. this.collection = this.collection.map(transform);
  13. return this;
  14. }
  16. sort(comparator) {
  17. this.collection = this.collection.sort(comparator);
  18. return this;
  19. }
  21. value() {
  22. return this.collection;
  23. }
  24. }

  26. const data = [
  27. { id: 1, name: 'John', age: 30 },
  28. { id: 2, name: 'Jane', age: 25 },
  29. { id: 3, name: 'Bob', age: 35 }
  30. ];

  32. const result = new Query(data)
  33. .filter(item => item.age > 25)
  34. .map(item => item.name)
  35. .sort()
  36. .value();

  38. console.log(result); // ['Bob', 'John']
javascript
14. 详细解释 JavaScript 中的 this 关键字。
答案解析：
this 关键字是 JavaScript 中最容易混淆的概念之一，它的值取决于函数的调用方式。理解 this 的绑定规则对于编写可靠的 JavaScript 代码至关重要。
1. this 的绑定规则：
默认绑定（非严格模式下指向全局对象，严格模式下指向 undefined）：
  1. function showThis() {
  2. console.log(this);
  3. }

  5. showThis(); // window (非严格模式) 或 undefined (严格模式)
javascript
隐式绑定（this 指向调用该方法的对象）：
  1. const user = {
  2. name: 'John',
  3. greet() {
  4. console.log(`Hello, ${this.name}!`);
  5. }
  6. };

  8. user.greet(); // "Hello, John!"

  10. // 隐式绑定丢失
  11. const greet = user.greet;
  12. greet(); // "Hello, undefined!" (this 指向全局对象或 undefined)
javascript
显式绑定（使用 call、apply 或 bind）：
  1. function greet() {
  2. console.log(`Hello, ${this.name}!`);
  3. }

  5. const user = { name: 'John' };

  7. // call 和 apply 立即调用
  8. greet.call(user); // "Hello, John!"
  9. greet.apply(user); // "Hello, John!"

  11. // bind 返回新函数
  12. const boundGreet = greet.bind(user);
  13. boundGreet(); // "Hello, John!"
javascript
new 绑定（构造函数中的 this 指向新创建的对象）：
  1. function User(name) {
  2. this.name = name;
  3. this.greet = function() {
  4. console.log(`Hello, ${this.name}!`);
  5. };
  6. }

  8. const user = new User('John');
  9. user.greet(); // "Hello, John!"
javascript
2. 箭头函数中的 this：
箭头函数没有自己的 this，它继承自外层作用域：
  1. const obj = {
  2. name: 'John',
  3. // 普通函数
  4. greet: function() {
  5. setTimeout(function() {
  6. console.log(`Hello, ${this.name}!`); // this 指向 window
  7. }, 100);
  8. },
  9. // 箭头函数
  10. greetArrow: function() {
  11. setTimeout(() => {
  12. console.log(`Hello, ${this.name}!`); // this 指向 obj
  13. }, 100);
  14. }
  15. };

  17. obj.greet(); // "Hello, undefined!"
  18. obj.greetArrow(); // "Hello, John!"
javascript
3. 常见问题和解决方案：
回调函数中的 this：
  1. class Counter {
  2. constructor() {
  3. this.count = 0;
  4. this.button = document.querySelector('#button');
  5. }
  7. // 问题写法
  8. setup() {
  9. this.button.addEventListener('click', function() {
  10. this.count++; // this 指向 button 元素
  11. });
  12. }
  14. // 解决方案 1：箭头函数
  15. setupArrow() {
  16. this.button.addEventListener('click', () => {
  17. this.count++; // this 指向 Counter 实例
  18. });
  19. }
  21. // 解决方案 2：bind
  22. setupBind() {
  23. this.button.addEventListener('click', function() {
  24. this.count++;
  25. }.bind(this));
  26. }
  28. // 解决方案 3：保存 this
  29. setupSave() {
  30. const self = this;
  31. this.button.addEventListener('click', function() {
  32. self.count++;
  33. });
  34. }
  35. }
javascript
方法作为回调：
  1. class API {
  2. constructor() {
  3. this.baseURL = 'https://api.example.com';
  4. }
  6. // 问题写法
  7. fetch(endpoint) {
  8. return $.get(this.baseURL + endpoint)
  9. .then(function(response) {
  10. this.process(response); // this 是 undefined
  11. });
  12. }
  14. // 解决方案
  15. fetchFixed(endpoint) {
  16. return $.get(this.baseURL + endpoint)
  17. .then(response => {
  18. this.process(response); // this 指向 API 实例
  19. });
  20. }
  22. process(data) {
  23. // 处理数据
  24. }
  25. }
javascript
实际应用示例：
事件处理器类：
  1. class EventHandler {
  2. constructor(element) {
  3. this.element = element;
  4. this.handlers = {};
  6. // 绑定方法
  7. this.handleClick = this.handleClick.bind(this);
  8. this.handleMouseMove = this.handleMouseMove.bind(this);
  9. }
  11. on(event, handler) {
  12. this.handlers[event] = handler.bind(this);
  13. this.element.addEventListener(event, this.handlers[event]);
  14. }
  16. off(event) {
  17. if (this.handlers[event]) {
  18. this.element.removeEventListener(event, this.handlers[event]);
  19. delete this.handlers[event];
  20. }
  21. }
  23. handleClick(event) {
  24. console.log('Clicked at:', event.clientX, event.clientY);
  25. }
  27. handleMouseMove(event) {
  28. console.log('Mouse moved to:', event.clientX, event.clientY);
  29. }
  30. }

  32. const handler = new EventHandler(document.body);
  33. handler.on('click', handler.handleClick);
  34. handler.on('mousemove', handler.handleMouseMove);
javascript
方法装饰器：
  1. function debounce(func, wait) {
  2. let timeout;
  3. return function executedFunction(...args) {
  4. const later = () => {
  5. clearTimeout(timeout);
  6. func.apply(this, args);
  7. };
  8. clearTimeout(timeout);
  9. timeout = setTimeout(later, wait);
  10. };
  11. }

  13. class SearchBox {
  14. constructor() {
  15. this.results = [];
  16. this.search = debounce(this.search.bind(this), 300);
  17. }
  19. async search(query) {
  20. this.results = await fetch(`/api/search?q=${query}`)
  21. .then(res => res.json());
  22. this.render();
  23. }
  25. render() {
  26. // 渲染搜索结果
  27. console.log('Results:', this.results);
  28. }
  29. }
javascript
链式方法调用：
  1. class Calculator {
  2. constructor() {
  3. this.value = 0;
  4. }
  6. add(n) {
  7. this.value += n;
  8. return this;
  9. }
  11. subtract(n) {
  12. this.value -= n;
  13. return this;
  14. }
  16. multiply(n) {
  17. this.value *= n;
  18. return this;
  19. }
  21. divide(n) {
  22. if (n !== 0) {
  23. this.value /= n;
  24. }
  25. return this;
  26. }
  28. power(n) {
  29. this.value = Math.pow(this.value, n);
  30. return this;
  31. }
  33. result() {
  34. return this.value;
  35. }
  36. }

  38. const calc = new Calculator();
  39. const result = calc
  40. .add(5)
  41. .multiply(2)
  42. .subtract(3)
  43. .divide(2)
  44. .power(2)
  45. .result();

  47. console.log(result); // ((5 * 2 - 3) / 2)² = 16
javascript
15. 详细解释 JavaScript 中的异步编程模式。
答案解析：
JavaScript 中的异步编程有多种实现方式，从最早的回调函数，到 Promise，再到 async/await，每种方式都有其特点和应用场景。
1. 回调函数：
  1. // 基本回调
  2. function fetchData(callback) {
  3. setTimeout(() => {
  4. callback('Data fetched');
  5. }, 1000);
  6. }

  8. fetchData(data => {
  9. console.log(data); // "Data fetched"
  10. });

  12. // 回调地狱
  13. fetchUser(userId, function(user) {
  14. fetchPosts(user.id, function(posts) {
  15. fetchComments(posts[0].id, function(comments) {
  16. console.log(comments);
  17. }, handleError);
  18. }, handleError);
  19. }, handleError);
javascript
2. Promise：
  1. // 创建 Promise
  2. function fetchData() {
  3. return new Promise((resolve, reject) => {
  4. setTimeout(() => {
  5. if (Math.random() > 0.5) {
  6. resolve('Success');
  7. } else {
  8. reject('Error');
  9. }
  10. }, 1000);
  11. });
  12. }

  14. // 使用 Promise
  15. fetchData()
  16. .then(data => {
  17. console.log(data);
  18. return processData(data);
  19. })
  20. .then(result => {
  21. console.log(result);
  22. })
  23. .catch(error => {
  24. console.error(error);
  25. });

  27. // Promise.all
  28. Promise.all([
  29. fetch('/api/users'),
  30. fetch('/api/posts'),
  31. fetch('/api/comments')
  32. ])
  33. .then(([users, posts, comments]) => {
  34. // 处理所有结果
  35. })
  36. .catch(error => {
  37. // 处理任何错误
  38. });

  40. // Promise.race
  41. Promise.race([
  42. fetch('/api/fast'),
  43. fetch('/api/slow')
  44. ])
  45. .then(result => {
  46. // 处理最快的响应
  47. });
javascript
3. async/await：
  1. // 基本用法
  2. async function fetchData() {
  3. try {
  4. const response = await fetch('/api/data');
  5. const data = await response.json();
  6. return data;
  7. } catch (error) {
  8. console.error('Error:', error);
  9. }
  10. }

  12. // 并行执行
  13. async function fetchAll() {
  14. try {
  15. const [users, posts, comments] = await Promise.all([
  16. fetch('/api/users'),
  17. fetch('/api/posts'),
  18. fetch('/api/comments')
  19. ]);
  21. return {
  22. users: await users.json(),
  23. posts: await posts.json(),
  24. comments: await comments.json()
  25. };
  26. } catch (error) {
  27. console.error('Error:', error);
  28. }
  29. }

  31. // 错误处理
  32. async function handleErrors() {
  33. try {
  34. const data = await fetchData();
  35. return processData(data);
  36. } catch (error) {
  37. if (error instanceof NetworkError) {
  38. // 处理网络错误
  39. } else if (error instanceof ValidationError) {
  40. // 处理验证错误
  41. } else {
  42. // 处理其他错误
  43. }
  44. } finally {
  45. // 清理工作
  46. }
  47. }
javascript
实际应用示例：
数据加载器：
  1. class DataLoader {
  2. constructor() {
  3. this.cache = new Map();
  4. }
  6. async load(key, fetchFn) {
  7. if (this.cache.has(key)) {
  8. return this.cache.get(key);
  9. }
  11. try {
  12. const data = await fetchFn();
  13. this.cache.set(key, data);
  14. return data;
  15. } catch (error) {
  16. throw new Error(`Failed to load ${key}: ${error.message}`);
  17. }
  18. }
  20. async loadMany(keys, fetchFn) {
  21. return Promise.all(
  22. keys.map(key => this.load(key, () => fetchFn(key)))
  23. );
  24. }
  26. clear(key) {
  27. this.cache.delete(key);
  28. }
  30. clearAll() {
  31. this.cache.clear();
  32. }
  33. }

  35. // 使用示例
  36. const loader = new DataLoader();

  38. // 单个加载
  39. const user = await loader.load('user:1', () =>
  40. fetch('/api/users/1').then(res => res.json())
  41. );

  43. // 批量加载
  44. const users = await loader.loadMany(['user:1', 'user:2'], id =>
  45. fetch(`/api/users/${id}`).then(res => res.json())
  46. );
javascript
请求重试机制：
  1. async function fetchWithRetry(url, options = {}, retries = 3) {
  2. const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
  4. for (let i = 0; i < retries; i++) {
  5. try {
  6. const response = await fetch(url, options);
  7. if (!response.ok) {
  8. throw new Error(`HTTP error! status: ${response.status}`);
  9. }
  10. return await response.json();
  11. } catch (error) {
  12. if (i === retries - 1) throw error;
  13. await delay(Math.pow(2, i) * 1000); // 指数退避
  14. console.log(`Retry attempt ${i + 1} for ${url}`);
  15. }
  16. }
  17. }

  19. // 使用示例
  20. try {
  21. const data = await fetchWithRetry('/api/data');
  22. console.log(data);
  23. } catch (error) {
  24. console.error('All retries failed:', error);
  25. }
javascript
并发控制：
  1. class ConcurrencyManager {
  2. constructor(maxConcurrent = 5) {
  3. this.maxConcurrent = maxConcurrent;
  4. this.running = 0;
  5. this.queue = [];
  6. }
  8. async add(task) {
  9. if (this.running >= this.maxConcurrent) {
  10. await new Promise(resolve => this.queue.push(resolve));
  11. }
  13. this.running++;
  14. try {
  15. return await task();
  16. } finally {
  17. this.running--;
  18. if (this.queue.length > 0) {
  19. const next = this.queue.shift();
  20. next();
  21. }
  22. }
  23. }
  25. async addAll(tasks) {
  26. return Promise.all(tasks.map(task => this.add(task)));
  27. }
  28. }

  30. // 使用示例
  31. const manager = new ConcurrencyManager(3);

  33. const urls = [
  34. '/api/data1',
  35. '/api/data2',
  36. '/api/data3',
  37. '/api/data4',
  38. '/api/data5'
  39. ];

  41. const results = await manager.addAll(
  42. urls.map(url => () => fetch(url).then(res => res.json()))
  43. );
javascript
异步队列处理器：
  1. class AsyncQueue {
  2. constructor() {
  3. this.queue = [];
  4. this.processing = false;
  5. }
  7. async add(task) {
  8. return new Promise((resolve, reject) => {
  9. this.queue.push({ task, resolve, reject });
  10. this.process();
  11. });
  12. }
  14. async process() {
  15. if (this.processing) return;
  16. this.processing = true;
  18. while (this.queue.length > 0) {
  19. const { task, resolve, reject } = this.queue.shift();
  20. try {
  21. const result = await task();
  22. resolve(result);
  23. } catch (error) {
  24. reject(error);
  25. }
  26. }
  28. this.processing = false;
  29. }
  31. clear() {
  32. this.queue = [];
  33. }
  35. get size() {
  36. return this.queue.length;
  37. }
  38. }

  40. // 使用示例
  41. const queue = new AsyncQueue();

  43. // 添加任务
  44. queue.add(async () => {
  45. const response = await fetch('/api/data1');
  46. return response.json();
  47. });

  49. queue.add(async () => {
  50. const response = await fetch('/api/data2');
  51. return response.json();
  52. });

  54. // 批量添加任务
  55. const tasks = urls.map(url => async () => {
  56. const response = await fetch(url);
  57. return response.json();
  58. });

  60. for (const task of tasks) {
  61. await queue.add(task);
  62. }
javascript
16. 解释 JavaScript 中的事件循环（Event Loop）机制。
答案解析：
事件循环是 JavaScript 实现异步编程的核心机制，它负责执行代码、收集和处理事件以及执行队列中的子任务。
1. 基本概念：
调用栈（Call Stack）：
存储同步代码执行的上下文
遵循后进先出（LIFO）原则
任务队列（Task Queue）：
宏任务（Macrotask）：setTimeout, setInterval, setImmediate, I/O, UI rendering
微任务（Microtask）：Promise, process.nextTick, MutationObserver
事件循环过程：
执行同步代码（调用栈清空）
执行微任务队列
执行宏任务队列
执行渲染
重复以上步骤
2. 代码示例：
  1. console.log('1'); // 同步代码

  3. setTimeout(() => {
  4. console.log('2'); // 宏任务
  5. }, 0);

  7. Promise.resolve().then(() => {
  8. console.log('3'); // 微任务
  9. });

  11. console.log('4'); // 同步代码

  13. // 输出顺序：1, 4, 3, 2
javascript
3. 实际应用：
任务调度器：
  1. class TaskScheduler {
  2. constructor() {
  3. this.microTasks = [];
  4. this.macroTasks = [];
  5. }
  7. addMicroTask(task) {
  8. Promise.resolve().then(() => task());
  9. }
  11. addMacroTask(task) {
  12. setTimeout(task, 0);
  13. }
  15. schedule(task, type = 'micro') {
  16. if (type === 'micro') {
  17. this.addMicroTask(task);
  18. } else {
  19. this.addMacroTask(task);
  20. }
  21. }
  22. }

  24. // 使用示例
  25. const scheduler = new TaskScheduler();

  27. scheduler.schedule(() => {
  28. console.log('Micro task 1');
  29. });

  31. scheduler.schedule(() => {
  32. console.log('Macro task 1');
  33. }, 'macro');

  35. console.log('Sync task');
javascript
防抖和节流：
  1. // 防抖
  2. function debounce(func, wait) {
  3. let timeout;
  4. return function executedFunction(...args) {
  5. const later = () => {
  6. clearTimeout(timeout);
  7. func.apply(this, args);
  8. };
  9. clearTimeout(timeout);
  10. timeout = setTimeout(later, wait);
  11. };
  12. }

  14. // 节流
  15. function throttle(func, limit) {
  16. let inThrottle;
  17. return function executedFunction(...args) {
  18. if (!inThrottle) {
  19. func.apply(this, args);
  20. inThrottle = true;
  21. setTimeout(() => {
  22. inThrottle = false;
  23. }, limit);
  24. }
  25. };
  26. }

  28. // 使用示例
  29. const debouncedSearch = debounce((query) => {
  30. // 执行搜索
  31. console.log('Searching for:', query);
  32. }, 300);

  34. const throttledScroll = throttle(() => {
  35. // 处理滚动事件
  36. console.log('Scroll event handled');
  37. }, 100);
javascript
异步任务队列：
  1. class AsyncTaskQueue {
  2. constructor() {
  3. this.tasks = [];
  4. this.running = false;
  5. }
  7. enqueue(task) {
  8. return new Promise((resolve, reject) => {
  9. this.tasks.push({ task, resolve, reject });
  10. if (!this.running) {
  11. this.run();
  12. }
  13. });
  14. }
  16. async run() {
  17. this.running = true;
  18. while (this.tasks.length > 0) {
  19. const { task, resolve, reject } = this.tasks.shift();
  20. try {
  21. const result = await task();
  22. resolve(result);
  23. } catch (error) {
  24. reject(error);
  25. }
  26. }
  27. this.running = false;
  28. }
  29. }

  31. // 使用示例
  32. const queue = new AsyncTaskQueue();

  34. // 添加任务
  35. queue.enqueue(async () => {
  36. const result = await fetch('/api/data');
  37. return result.json();
  38. }).then(data => {
  39. console.log('Task 1 completed:', data);
  40. });

  42. queue.enqueue(async () => {
  43. await new Promise(resolve => setTimeout(resolve, 1000));
  44. return 'Task 2 completed';
  45. }).then(message => {
  46. console.log(message);
  47. });
javascript
自定义事件发射器：
  1. class EventEmitter {
  2. constructor() {
  3. this.events = {};
  4. }
  6. on(event, callback) {
  7. if (!this.events[event]) {
  8. this.events[event] = [];
  9. }
  10. this.events[event].push(callback);
  11. return () => this.off(event, callback);
  12. }
  14. off(event, callback) {
  15. if (!this.events[event]) return;
  16. this.events[event] = this.events[event].filter(cb => cb !== callback);
  17. }
  19. emit(event, data) {
  20. if (!this.events[event]) return;
  21. this.events[event].forEach(callback => {
  22. // 使用微任务执行回调
  23. Promise.resolve().then(() => callback(data));
  24. });
  25. }
  27. once(event, callback) {
  28. const remove = this.on(event, (...args) => {
  29. remove();
  30. callback.apply(this, args);
  31. });
  32. }
  33. }

  35. // 使用示例
  36. const emitter = new EventEmitter();

  38. emitter.on('data', data => {
  39. console.log('Received data:', data);
  40. });

  42. emitter.emit('data', { message: 'Hello' });
javascript
17. 详细解释 JavaScript 中常用的设计模式。
答案解析：
设计模式是解决软件设计中常见问题的可复用方案。在 JavaScript 中，常用的设计模式包括创建型模式、结构型模式和行为型模式。
1. 创建型模式：
单例模式：
  1. class Singleton {
  2. constructor() {
  3. if (!Singleton.instance) {
  4. this.data = {};
  5. Singleton.instance = this;
  6. }
  7. return Singleton.instance;
  8. }
  10. static getInstance() {
  11. if (!Singleton.instance) {
  12. Singleton.instance = new Singleton();
  13. }
  14. return Singleton.instance;
  15. }
  16. }

  18. // 使用示例
  19. const instance1 = new Singleton();
  20. const instance2 = new Singleton();
  21. console.log(instance1 === instance2); // true
javascript
工厂模式：
  1. // 简单工厂
  2. class UserFactory {
  3. static createUser(type) {
  4. switch (type) {
  5. case 'admin':
  6. return new AdminUser();
  7. case 'regular':
  8. return new RegularUser();
  9. default:
  10. throw new Error('Unknown user type');
  11. }
  12. }
  13. }

  15. // 工厂方法
  16. class Creator {
  17. factoryMethod() {
  18. throw new Error('factoryMethod must be implemented');
  19. }
  21. someOperation() {
  22. const product = this.factoryMethod();
  23. return product.operation();
  24. }
  25. }

  27. class ConcreteCreatorA extends Creator {
  28. factoryMethod() {
  29. return new ConcreteProductA();
  30. }
  31. }
javascript
建造者模式：
  1. class UserBuilder {
  2. constructor() {
  3. this.user = {};
  4. }
  6. setName(name) {
  7. this.user.name = name;
  8. return this;
  9. }
  11. setAge(age) {
  12. this.user.age = age;
  13. return this;
  14. }
  16. setEmail(email) {
  17. this.user.email = email;
  18. return this;
  19. }
  21. build() {
  22. return this.user;
  23. }
  24. }

  26. // 使用示例
  27. const user = new UserBuilder()
  28. .setName('John')
  29. .setAge(30)
  30. .setEmail('john@example.com')
  31. .build();
javascript
2. 结构型模式：
适配器模式：
  1. // 旧接口
  2. class OldAPI {
  3. getUsers() {
  4. return [{ name: 'John', surname: 'Doe' }];
  5. }
  6. }

  8. // 新接口适配器
  9. class UserAPIAdapter {
  10. constructor(oldAPI) {
  11. this.oldAPI = oldAPI;
  12. }
  14. getUsers() {
  15. return this.oldAPI.getUsers().map(user => ({
  16. fullName: `${user.name} ${user.surname}`
  17. }));
  18. }
  19. }

  21. // 使用示例
  22. const oldAPI = new OldAPI();
  23. const adapter = new UserAPIAdapter(oldAPI);
  24. console.log(adapter.getUsers()); // [{ fullName: 'John Doe' }]
javascript
装饰器模式：
  1. class Coffee {
  2. cost() {
  3. return 5;
  4. }
  6. description() {
  7. return 'Simple coffee';
  8. }
  9. }

  11. class MilkDecorator {
  12. constructor(coffee) {
  13. this.coffee = coffee;
  14. }
  16. cost() {
  17. return this.coffee.cost() + 2;
  18. }
  20. description() {
  21. return `${this.coffee.description()} with milk`;
  22. }
  23. }

  25. // 使用示例
  26. let coffee = new Coffee();
  27. coffee = new MilkDecorator(coffee);
  28. console.log(coffee.cost()); // 7
  29. console.log(coffee.description()); // "Simple coffee with milk"
javascript
代理模式：
  1. class RealImage {
  2. constructor(filename) {
  3. this.filename = filename;
  4. this.loadImage();
  5. }
  7. loadImage() {
  8. console.log(`Loading ${this.filename}`);
  9. }
  11. display() {
  12. console.log(`Displaying ${this.filename}`);
  13. }
  14. }

  16. class ProxyImage {
  17. constructor(filename) {
  18. this.filename = filename;
  19. this.realImage = null;
  20. }
  22. display() {
  23. if (!this.realImage) {
  24. this.realImage = new RealImage(this.filename);
  25. }
  26. this.realImage.display();
  27. }
  28. }

  30. // 使用示例
  31. const image = new ProxyImage('photo.jpg');
  32. // 图片只在需要时才加载
  33. image.display();
javascript
3. 行为型模式：
观察者模式：
  1. class Subject {
  2. constructor() {
  3. this.observers = [];
  4. }
  6. addObserver(observer) {
  7. this.observers.push(observer);
  8. }
  10. removeObserver(observer) {
  11. this.observers = this.observers.filter(obs => obs !== observer);
  12. }
  14. notify(data) {
  15. this.observers.forEach(observer => observer.update(data));
  16. }
  17. }

  19. class Observer {
  20. update(data) {
  21. console.log('Received update:', data);
  22. }
  23. }

  25. // 使用示例
  26. const subject = new Subject();
  27. const observer1 = new Observer();
  28. const observer2 = new Observer();

  30. subject.addObserver(observer1);
  31. subject.addObserver(observer2);
  32. subject.notify('Hello observers!');
javascript
策略模式：
  1. class PaymentStrategy {
  2. pay(amount) {
  3. throw new Error('pay() must be implemented');
  4. }
  5. }

  7. class CreditCardStrategy extends PaymentStrategy {
  8. constructor(cardNumber, cvv) {
  9. super();
  10. this.cardNumber = cardNumber;
  11. this.cvv = cvv;
  12. }
  14. pay(amount) {
  15. console.log(`Paid ${amount} using credit card`);
  16. }
  17. }

  19. class PayPalStrategy extends PaymentStrategy {
  20. constructor(email) {
  21. super();
  22. this.email = email;
  23. }
  25. pay(amount) {
  26. console.log(`Paid ${amount} using PayPal`);
  27. }
  28. }

  30. class ShoppingCart {
  31. constructor() {
  32. this.amount = 0;
  33. this.paymentStrategy = null;
  34. }
  36. setPaymentStrategy(strategy) {
  37. this.paymentStrategy = strategy;
  38. }
  40. checkout() {
  41. if (!this.paymentStrategy) {
  42. throw new Error('Payment strategy not set');
  43. }
  44. this.paymentStrategy.pay(this.amount);
  45. }
  46. }

  48. // 使用示例
  49. const cart = new ShoppingCart();
  50. cart.amount = 100;
  51. cart.setPaymentStrategy(new CreditCardStrategy('1234', '123'));
  52. cart.checkout();
javascript
命令模式：
  1. class Command {
  2. execute() {
  3. throw new Error('execute() must be implemented');
  4. }
  6. undo() {
  7. throw new Error('undo() must be implemented');
  8. }
  9. }

  11. class AddTextCommand extends Command {
  12. constructor(editor, text) {
  13. super();
  14. this.editor = editor;
  15. this.text = text;
  16. }
  18. execute() {
  19. this.editor.addText(this.text);
  20. }
  22. undo() {
  23. this.editor.removeText(this.text);
  24. }
  25. }

  27. class Editor {
  28. constructor() {
  29. this.content = '';
  30. }
  32. addText(text) {
  33. this.content += text;
  34. }
  36. removeText(text) {
  37. this.content = this.content.replace(text, '');
  38. }
  39. }

  41. class CommandHistory {
  42. constructor() {
  43. this.history = [];
  44. this.current = -1;
  45. }
  47. execute(command) {
  48. command.execute();
  49. this.history.push(command);
  50. this.current++;
  51. }
  53. undo() {
  54. if (this.current >= 0) {
  55. this.history[this.current].undo();
  56. this.current--;
  57. }
  58. }
  60. redo() {
  61. if (this.current < this.history.length - 1) {
  62. this.current++;
  63. this.history[this.current].execute();
  64. }
  65. }
  66. }

  68. // 使用示例
  69. const editor = new Editor();
  70. const history = new CommandHistory();

  72. const addHelloCommand = new AddTextCommand(editor, 'Hello ');
  73. const addWorldCommand = new AddTextCommand(editor, 'World!');

  75. history.execute(addHelloCommand);
  76. history.execute(addWorldCommand);
  77. console.log(editor.content); // "Hello World!"

  79. history.undo();
  80. console.log(editor.content); // "Hello "

  82. history.redo();
  83. console.log(editor.content); // "Hello World!"
javascript
实际应用场景：
表单验证策略：
  1. class ValidationStrategy {
  2. validate(value) {
  3. throw new Error('validate() must be implemented');
  4. }
  5. }

  7. class RequiredFieldStrategy extends ValidationStrategy {
  8. validate(value) {
  9. return value.trim().length > 0;
  10. }
  11. }

  13. class EmailStrategy extends ValidationStrategy {
  14. validate(value) {
  15. return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
  16. }
  17. }

  19. class PasswordStrategy extends ValidationStrategy {
  20. validate(value) {
  21. return value.length >= 8 && /[A-Z]/.test(value) && /[0-9]/.test(value);
  22. }
  23. }

  25. class FormValidator {
  26. constructor() {
  27. this.validations = new Map();
  28. }
  30. addValidation(field, strategy) {
  31. this.validations.set(field, strategy);
  32. }
  34. validate(formData) {
  35. const errors = new Map();
  37. for (const [field, strategy] of this.validations) {
  38. if (!strategy.validate(formData[field])) {
  39. errors.set(field, `${field} is invalid`);
  40. }
  41. }
  43. return errors;
  44. }
  45. }

  47. // 使用示例
  48. const validator = new FormValidator();
  49. validator.addValidation('email', new EmailStrategy());
  50. validator.addValidation('password', new PasswordStrategy());

  52. const formData = {
  53. email: 'invalid-email',
  54. password: 'weak'
  55. };

  57. const errors = validator.validate(formData);
  58. console.log(errors);
javascript
状态管理：
  1. class State {
  2. constructor(context) {
  3. this.context = context;
  4. }
  6. handle() {
  7. throw new Error('handle() must be implemented');
  8. }
  9. }

  11. class PlayingState extends State {
  12. handle() {
  13. console.log('Playing...');
  14. this.context.setState(new PausedState(this.context));
  15. }
  16. }

  18. class PausedState extends State {
  19. handle() {
  20. console.log('Paused');
  21. this.context.setState(new PlayingState(this.context));
  22. }
  23. }

  25. class AudioPlayer {
  26. constructor() {
  27. this.state = new PausedState(this);
  28. }
  30. setState(state) {
  31. this.state = state;
  32. }
  34. toggle() {
  35. this.state.handle();
  36. }
  37. }

  39. // 使用示例
  40. const player = new AudioPlayer();
  41. player.toggle(); // "Playing..."
  42. player.toggle(); // "Paused"
  43. player.toggle(); // "Playing..."
javascript
数据访问代理：
  1. class DataService {
  2. constructor() {
  3. this.cache = new Map();
  4. }
  6. async fetchData(url) {
  7. if (this.cache.has(url)) {
  8. console.log('Returning from cache');
  9. return this.cache.get(url);
  10. }
  12. console.log('Fetching from server');
  13. const response = await fetch(url);
  14. const data = await response.json();
  15. this.cache.set(url, data);
  16. return data;
  17. }
  19. clearCache() {
  20. this.cache.clear();
  21. }
  22. }

  24. // 使用示例
  25. const service = new DataService();

  27. // 第一次调用：从服务器获取
  28. await service.fetchData('/api/data');

  30. // 第二次调用：从缓存获取
  31. await service.fetchData('/api/data');
javascript
18. 详细解释 ES6+ 中的新特性。
答案解析：
ES6（ES2015）及后续版本引入了许多重要的新特性，极大地提升了 JavaScript 的开发体验和功能性。
1. 变量声明：
let 和 const：
  1. // let：块级作用域
  2. {
  3. let x = 1;
  4. const y = 2;
  5. }
  6. // console.log(x); // ReferenceError

  8. // const：常量声明
  9. const PI = 3.14159;
  10. // PI = 3; // TypeError

  12. // 对象和数组的 const
  13. const obj = { a: 1 };
  14. obj.a = 2; // 可以修改属性
  15. // obj = {}; // TypeError

  17. const arr = [1, 2];
  18. arr.push(3); // 可以修改数组
  19. // arr = []; // TypeError
javascript
2. 解构赋值：
数组解构：
  1. const [a, b, ...rest] = [1, 2, 3, 4, 5];
  2. console.log(a); // 1
  3. console.log(b); // 2
  4. console.log(rest); // [3, 4, 5]

  6. // 设置默认值
  7. const [x = 1, y = 2] = [10];
  8. console.log(x, y); // 10, 2

  10. // 交换变量
  11. let m = 1, n = 2;
  12. [m, n] = [n, m];
javascript
对象解构：
  1. const { name, age, address: { city } = {} } = {
  2. name: 'John',
  3. age: 30,
  4. address: { city: 'New York' }
  5. };

  7. // 重命名
  8. const { name: userName } = { name: 'John' };
  9. console.log(userName); // "John"

  11. // 默认值
  12. const { x = 1, y = 2 } = { x: 10 };
  13. console.log(x, y); // 10, 2
javascript
3. 模板字符串：
  1. const name = 'John';
  2. const age = 30;

  4. // 基本用法
  5. const message = `Hello, ${name}!`;

  7. // 多行字符串
  8. const template = `
  9. <div>
  10. <h1>${name}h1>
  11. <p>Age: ${age}p>
  12. div>
  13. `;

  15. // 标签模板
  16. function tag(strings, ...values) {
  17. return strings.reduce((result, str, i) =>
  18. `${result}${str}${values[i] || ''}`, '');
  19. }

  21. const text = tag`Hello ${name}, you are ${age} years old`;
javascript
4. 箭头函数：
  1. // 基本语法
  2. const add = (a, b) => a + b;

  4. // 返回对象字面量
  5. const getUser = () => ({ name: 'John', age: 30 });

  7. // this 绑定
  8. class Counter {
  9. constructor() {
  10. this.count = 0;
  11. this.increment = () => {
  12. this.count++;
  13. };
  14. }
  15. }

  17. // 不适合使用箭头函数的场景
  18. const obj = {
  19. name: 'John',
  20. // 方法定义不要使用箭头函数
  21. getName: () => this.name, // this 指向外部作用域
  22. getNameCorrect() {
  23. return this.name;
  24. }
  25. };
javascript
5. 类和模块：
类：
  1. class Animal {
  2. constructor(name) {
  3. this.name = name;
  4. }
  6. static create(name) {
  7. return new Animal(name);
  8. }
  10. speak() {
  11. return `${this.name} makes a sound`;
  12. }
  13. }

  15. class Dog extends Animal {
  16. constructor(name, breed) {
  17. super(name);
  18. this.breed = breed;
  19. }
  21. speak() {
  22. return `${super.speak()} - woof!`;
  23. }
  25. get info() {
  26. return `${this.name} is a ${this.breed}`;
  27. }
  29. set nickname(value) {
  30. this._nickname = value;
  31. }
  32. }

  34. const dog = new Dog('Rex', 'German Shepherd');
javascript
模块：
  1. // math.js
  2. export const add = (a, b) => a + b;
  3. export const subtract = (a, b) => a - b;
  4. export default class Calculator {
  5. // ...
  6. }

  8. // main.js
  9. import Calculator, { add, subtract } from './math.js';
  10. import * as math from './math.js';
javascript
6. Promise 和异步编程：
  1. // Promise 链式调用
  2. fetch('/api/user')
  3. .then(response => response.json())
  4. .then(user => fetch(`/api/posts/${user.id}`))
  5. .then(response => response.json())
  6. .catch(error => console.error(error));

  8. // Promise.all
  9. Promise.all([
  10. fetch('/api/users'),
  11. fetch('/api/posts'),
  12. fetch('/api/comments')
  13. ])
  14. .then(([users, posts, comments]) => {
  15. // 处理所有响应
  16. });

  18. // Promise.race
  19. Promise.race([
  20. fetch('/api/fast'),
  21. fetch('/api/slow')
  22. ])
  23. .then(result => {
  24. // 处理最快的响应
  25. });

  27. // async/await
  28. async function fetchUserData() {
  29. try {
  30. const response = await fetch('/api/user');
  31. const user = await response.json();
  32. return user;
  33. } catch (error) {
  34. console.error(error);
  35. }
  36. }
javascript
7. 迭代器和生成器：
  1. // 迭代器
  2. const array = ['a', 'b', 'c'];
  3. const iterator = array[Symbol.iterator]();
  4. console.log(iterator.next()); // { value: 'a', done: false }

  6. // 自定义迭代器
  7. class Range {
  8. constructor(start, end) {
  9. this.start = start;
  10. this.end = end;
  11. }
  13. [Symbol.iterator]() {
  14. let current = this.start;
  15. const end = this.end;
  17. return {
  18. next() {
  19. return current <= end
  20. ? { value: current++, done: false }
  21. : { done: true };
  22. }
  23. };
  24. }
  25. }

  27. // 生成器
  28. function* numberGenerator() {
  29. yield 1;
  30. yield 2;
  31. yield 3;
  32. }

  34. const gen = numberGenerator();
  35. console.log(gen.next()); // { value: 1, done: false }

  37. // 无限序列
  38. function* fibonacci() {
  39. let prev = 0, curr = 1;
  40. while (true) {
  41. yield curr;
  42. [prev, curr] = [curr, prev + curr];
  43. }
  44. }

  46. // 异步生成器
  47. async function* asyncGenerator() {
  48. const responses = [
  49. await fetch('/api/data1'),
  50. await fetch('/api/data2'),
  51. await fetch('/api/data3')
  52. ];
  54. for (const response of responses) {
  55. yield await response.json();
  56. }
  57. }
javascript
8. Set 和 Map：
  1. // Set
  2. const set = new Set([1, 2, 2, 3, 3, 4]);
  3. console.log(set.size); // 4

  5. set.add(5);
  6. set.delete(1);
  7. console.log(set.has(2)); // true

  9. // WeakSet
  10. const weakSet = new WeakSet();
  11. let obj = { data: 123 };
  12. weakSet.add(obj);

  14. // Map
  15. const map = new Map();
  16. map.set('name', 'John');
  17. map.set(obj, 'metadata');

  19. console.log(map.get('name')); // "John"
  20. console.log(map.has(obj)); // true

  22. // WeakMap
  23. const weakMap = new WeakMap();
  24. weakMap.set(obj, 'private data');
javascript
9. Proxy 和 Reflect：
  1. // Proxy
  2. const handler = {
  3. get(target, prop) {
  4. console.log(`Accessing ${prop}`);
  5. return target[prop];
  6. },
  8. set(target, prop, value) {
  9. console.log(`Setting ${prop} = ${value}`);
  10. target[prop] = value;
  11. return true;
  12. }
  13. };

  15. const user = new Proxy({}, handler);
  16. user.name = 'John'; // "Setting name = John"
  17. console.log(user.name); // "Accessing name", "John"

  19. // Reflect
  20. const obj = { name: 'John' };
  21. console.log(Reflect.get(obj, 'name')); // "John"
  22. Reflect.set(obj, 'age', 30);
  23. console.log(Reflect.has(obj, 'age')); // true
javascript
10. 其他特性：
可选链操作符：
  1. const user = {
  2. address: {
  3. street: 'Main St'
  4. }
  5. };

  7. console.log(user?.address?.street); // "Main St"
  8. console.log(user?.contact?.phone); // undefined
javascript
空值合并操作符：
  1. const value = null ?? 'default';
  2. console.log(value); // "default"

  4. const count = 0 ?? 42;
  5. console.log(count); // 0
javascript
逻辑赋值操作符：
  1. let x = null;
  2. x ??= 42;
  3. console.log(x); // 42

  5. let y = 0;
  6. y ||= 42;
  7. console.log(y); // 42

  9. let z = 1;
  10. z &&= 42;
  11. console.log(z); // 42
javascript
BigInt：
  1. const bigInt = 9007199254740991n;
  2. const result = bigInt + 1n;
  3. console.log(result); // 9007199254740992n
javascript
globalThis：
  1. // 在任何环境下都指向全局对象
  2. console.log(globalThis === window); // true (在浏览器中)
  3. console.log(globalThis === global); // true (在 Node.js 中)
javascript
实际应用示例：
现代模块化开发：
  1. // api.js
  2. export class API {
  3. constructor(baseURL) {
  4. this.baseURL = baseURL;
  5. }
  7. async fetch(endpoint, options = {}) {
  8. const response = await fetch(`${this.baseURL}${endpoint}`, {
  9. headers: {
  10. 'Content-Type': 'application/json',
  11. ...options.headers
  12. },
  13. ...options
  14. });
  16. if (!response.ok) {
  17. throw new Error(`HTTP error! status: ${response.status}`);
  18. }
  20. return response.json();
  21. }
  22. }

  24. // services.js
  25. import { API } from './api.js';

  27. export class UserService {
  28. constructor(api) {
  29. this.api = api;
  30. }
  32. async getUser(id) {
  33. return this.api.fetch(`/users/${id}`);
  34. }
  36. async updateUser(id, data) {
  37. return this.api.fetch(`/users/${id}`, {
  38. method: 'PUT',
  39. body: JSON.stringify(data)
  40. });
  41. }
  42. }

  44. // main.js
  45. import { API } from './api.js';
  46. import { UserService } from './services.js';

  48. const api = new API('https://api.example.com');
  49. const userService = new UserService(api);

  51. async function init() {
  52. try {
  53. const user = await userService.getUser(1);
  54. console.log(user);
  55. } catch (error) {
  56. console.error(error);
  57. }
  58. }
javascript
响应式数据绑定：
  1. class Observable {
  2. constructor(value) {
  3. this._value = value;
  4. this._subscribers = new Set();
  6. return new Proxy(this, {
  7. get: (target, prop) => {
  8. if (prop === 'value') {
  9. return target._value;
  10. }
  11. return target[prop];
  12. },
  14. set: (target, prop, value) => {
  15. if (prop === 'value') {
  16. target._value = value;
  17. target.notify();
  18. } else {
  19. target[prop] = value;
  20. }
  21. return true;
  22. }
  23. });
  24. }
  26. subscribe(callback) {
  27. this._subscribers.add(callback);
  28. return () => this._subscribers.delete(callback);
  29. }
  31. notify() {
  32. for (const callback of this._subscribers) {
  33. callback(this._value);
  34. }
  35. }
  36. }

  38. // 使用示例
  39. const counter = new Observable(0);
  40. const unsubscribe = counter.subscribe(value => {
  41. console.log('Counter changed:', value);
  42. });

  44. counter.value++; // "Counter changed: 1"
  45. counter.value++; // "Counter changed: 2"

  47. unsubscribe(); // 取消订阅
javascript
异步任务队列：
  1. class AsyncQueue {
  2. constructor() {
  3. this.queue = [];
  4. this.running = false;
  5. }
  7. async *[Symbol.asyncIterator]() {
  8. while (true) {
  9. if (this.queue.length === 0) {
  10. await new Promise(resolve => {
  11. this.queue.push = (...items) => {
  12. Array.prototype.push.apply(this.queue, items);
  13. resolve();
  14. this.queue.push = Array.prototype.push;
  15. };
  16. });
  17. }
  18. yield this.queue.shift();
  19. }
  20. }
  22. enqueue(...items) {
  23. this.queue.push(...items);
  24. }
  26. async process(callback) {
  27. if (this.running) return;
  28. this.running = true;
  30. try {
  31. for await (const item of this) {
  32. await callback(item);
  33. }
  34. } finally {
  35. this.running = false;
  36. }
  37. }
  38. }

  40. // 使用示例
  41. const queue = new AsyncQueue();

  43. // 启动处理
  44. queue.process(async item => {
  45. console.log('Processing:', item);
  46. await new Promise(resolve => setTimeout(resolve, 1000));
  47. });

  49. // 添加任务
  50. queue.enqueue('Task 1', 'Task 2', 'Task 3');

  52. // 稍后添加更多任务
  53. setTimeout(() => {
  54. queue.enqueue('Task 4', 'Task 5');
  55. }, 3000);
javascript
19. 详细解释 ES6+ 中的装饰器（Decorator）。
答案解析：
装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、访问符、属性或参数上。装饰器使用 @expression 这种形式，expression 求值后必须为一个函数。
1. 类装饰器：
  1. // 类装饰器
  2. function log(target) {
  3. // 保存原始构造函数
  4. const original = target;
  6. // 返回新的构造函数
  7. function construct(constructor, args) {
  8. console.log(`Creating new instance of ${constructor.name}`);
  9. const instance = new constructor(...args);
  10. return instance;
  11. }
  13. // 创建新的类
  14. const newConstructor = function (...args) {
  15. return construct(original, args);
  16. };
  18. // 复制原型链
  19. newConstructor.prototype = original.prototype;
  20. return newConstructor;
  21. }

  23. @log
  24. class Example {
  25. constructor(name) {
  26. this.name = name;
  27. }
  28. }

  30. const example = new Example('test'); // 输出: "Creating new instance of Example"
javascript
2. 方法装饰器：
  1. // 方法装饰器
  2. function measure(target, propertyKey, descriptor) {
  3. const originalMethod = descriptor.value;
  5. descriptor.value = function (...args) {
  6. const start = performance.now();
  7. const result = originalMethod.apply(this, args);
  8. const end = performance.now();
  9. console.log(`${propertyKey} took ${end - start}ms`);
  10. return result;
  11. };
  13. return descriptor;
  14. }

  16. class Calculator {
  17. @measure
  18. add(a, b) {
  19. return a + b;
  20. }
  21. }

  23. const calc = new Calculator();
  24. calc.add(1, 2); // 输出执行时间
javascript
3. 属性装饰器：
  1. // 属性装饰器
  2. function readonly(target, propertyKey) {
  3. Object.defineProperty(target, propertyKey, {
  4. writable: false
  5. });
  6. }

  8. class Example {
  9. @readonly
  10. pi = 3.14159;
  11. }

  13. const e = new Example();
  14. // e.pi = 3; // TypeError: Cannot assign to read only property 'pi'
javascript
4. 参数装饰器：
  1. // 参数装饰器
  2. function validate(target, propertyKey, parameterIndex) {
  3. const validateParams = target[propertyKey].validateParams || [];
  4. validateParams[parameterIndex] = true;
  5. target[propertyKey].validateParams = validateParams;
  6. }

  8. class UserService {
  9. createUser(@validate name: string, @validate age: number) {
  10. // 实现创建用户的逻辑
  11. }
  12. }
javascript
5. 多个装饰器组合：
  1. // 装饰器组合
  2. function first() {
  3. console.log("first(): factory evaluated");
  4. return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  5. console.log("first(): called");
  6. };
  7. }

  9. function second() {
  10. console.log("second(): factory evaluated");
  11. return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  12. console.log("second(): called");
  13. };
  14. }

  16. class Example {
  17. @first()
  18. @second()
  19. method() {}
  20. }

  22. // 输出顺序：
  23. // first(): factory evaluated
  24. // second(): factory evaluated
  25. // second(): called
  26. // first(): called
javascript
实际应用示例：
日志记录装饰器：
  1. function log(target, propertyKey, descriptor) {
  2. const originalMethod = descriptor.value;
  4. descriptor.value = function (...args) {
  5. console.log(`Calling ${propertyKey} with args:`, args);
  6. try {
  7. const result = originalMethod.apply(this, args);
  8. console.log(`${propertyKey} returned:`, result);
  9. return result;
  10. } catch (error) {
  11. console.error(`${propertyKey} threw error:`, error);
  12. throw error;
  13. }
  14. };
  16. return descriptor;
  17. }

  19. class UserService {
  20. @log
  21. async createUser(userData) {
  22. // 实现创建用户的逻辑
  23. }
  25. @log
  26. async updateUser(id, userData) {
  27. // 实现更新用户的逻辑
  28. }
  29. }
javascript
缓存装饰器：
  1. function memoize(target, propertyKey, descriptor) {
  2. const originalMethod = descriptor.value;
  3. const cache = new Map();
  5. descriptor.value = function (...args) {
  6. const key = JSON.stringify(args);
  7. if (cache.has(key)) {
  8. return cache.get(key);
  9. }
  11. const result = originalMethod.apply(this, args);
  12. cache.set(key, result);
  13. return result;
  14. };
  16. return descriptor;
  17. }

  19. class MathUtils {
  20. @memoize
  21. fibonacci(n) {
  22. if (n <= 1) return n;
  23. return this.fibonacci(n - 1) + this.fibonacci(n - 2);
  24. }
  25. }
javascript
权限控制装饰器：
  1. function requireRole(role) {
  2. return function (target, propertyKey, descriptor) {
  3. const originalMethod = descriptor.value;
  5. descriptor.value = function (...args) {
  6. const user = getCurrentUser(); // 假设这个函数获取当前用户
  8. if (!user || !user.roles.includes(role)) {
  9. throw new Error('Unauthorized');
  10. }
  12. return originalMethod.apply(this, args);
  13. };
  15. return descriptor;
  16. };
  17. }

  19. class AdminPanel {
  20. @requireRole('admin')
  21. deleteUser(userId) {
  22. // 实现删除用户的逻辑
  23. }
  25. @requireRole('moderator')
  26. banUser(userId) {
  27. // 实现封禁用户的逻辑
  28. }
  29. }
javascript
防抖装饰器：
  1. function debounce(wait) {
  2. return function (target, propertyKey, descriptor) {
  3. const originalMethod = descriptor.value;
  4. let timeout;
  6. descriptor.value = function (...args) {
  7. clearTimeout(timeout);
  8. timeout = setTimeout(() => {
  9. originalMethod.apply(this, args);
  10. }, wait);
  11. };
  13. return descriptor;
  14. };
  15. }

  17. class SearchComponent {
  18. @debounce(300)
  19. search(query) {
  20. // 实现搜索逻辑
  21. }
  22. }
javascript
验证装饰器：
  1. function validate(schema) {
  2. return function (target, propertyKey, descriptor) {
  3. const originalMethod = descriptor.value;
  5. descriptor.value = function (...args) {
  6. const validationResult = schema.validate(args[0]);
  7. if (validationResult.error) {
  8. throw new Error(validationResult.error.message);
  9. }
  10. return originalMethod.apply(this, args);
  11. };
  13. return descriptor;
  14. };
  15. }

  17. const userSchema = {
  18. validate(data) {
  19. const errors = [];
  20. if (!data.name) errors.push('Name is required');
  21. if (!data.email) errors.push('Email is required');
  22. return {
  23. error: errors.length ? { message: errors.join(', ') } : null
  24. };
  25. }
  26. };

  28. class UserController {
  29. @validate(userSchema)
  30. createUser(userData) {
  31. // 实现创建用户的逻辑
  32. }
  33. }
javascript
20. 详细解释 ES6+ 中的 Reflect 和 Proxy API。
答案解析：
Reflect 和 Proxy API 提供了拦截和自定义对象操作的能力，是实现元编程的重要工具。
1. Reflect API：
Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。
  1. // 基本操作
  2. const obj = { name: 'John' };

  4. // 获取属性
  5. console.log(Reflect.get(obj, 'name')); // "John"

  7. // 设置属性
  8. Reflect.set(obj, 'age', 30);

  10. // 删除属性
  11. Reflect.deleteProperty(obj, 'age');

  13. // 检查属性
  14. console.log(Reflect.has(obj, 'name')); // true

  16. // 获取所有属性
  17. console.log(Reflect.ownKeys(obj)); // ["name"]

  19. // 创建对象
  20. const instance = Reflect.construct(Array, [1, 2, 3]);

  22. // 调用函数
  23. const result = Reflect.apply(Math.max, null, [1, 2, 3]);
javascript
2. Proxy API：
Proxy 用于创建一个对象的代理，从而实现基本操作的拦截和自定义。
  1. // 基本用法
  2. const target = {
  3. name: 'John',
  4. age: 30
  5. };

  7. const handler = {
  8. get(target, prop) {
  9. console.log(`Accessing ${prop}`);
  10. return target[prop];
  11. },
  13. set(target, prop, value) {
  14. console.log(`Setting ${prop} = ${value}`);
  15. target[prop] = value;
  16. return true;
  17. }
  18. };

  20. const proxy = new Proxy(target, handler);

  22. // 使用代理
  23. proxy.name; // "Accessing name"
  24. proxy.age = 31; // "Setting age = 31"
javascript
3. 常用的代理处理器：
  1. const handler = {
  2. // 属性读取
  3. get(target, prop) {
  4. return target[prop];
  5. },
  7. // 属性设置
  8. set(target, prop, value) {
  9. target[prop] = value;
  10. return true;
  11. },
  13. // 属性删除
  14. deleteProperty(target, prop) {
  15. return delete target[prop];
  16. },
  18. // 属性存在性判断
  19. has(target, prop) {
  20. return prop in target;
  21. },
  23. // 获取属性描述符
  24. getOwnPropertyDescriptor(target, prop) {
  25. return Object.getOwnPropertyDescriptor(target, prop);
  26. },
  28. // 定义属性
  29. defineProperty(target, prop, descriptor) {
  30. return Object.defineProperty(target, prop, descriptor);
  31. },
  33. // 获取原型
  34. getPrototypeOf(target) {
  35. return Object.getPrototypeOf(target);
  36. },
  38. // 设置原型
  39. setPrototypeOf(target, proto) {
  40. return Object.setPrototypeOf(target, proto);
  41. }
  42. };
javascript
实际应用示例：
私有属性代理：
  1. function createPrivateProxy(target) {
  2. const privateProps = new WeakMap();
  4. return new Proxy(target, {
  5. get(target, prop) {
  6. if (prop.startsWith('_')) {
  7. throw new Error('Cannot access private property');
  8. }
  9. return target[prop];
  10. },
  12. set(target, prop, value) {
  13. if (prop.startsWith('_')) {
  14. privateProps.set(target, {
  15. ...privateProps.get(target),
  16. [prop]: value
  17. });
  18. } else {
  19. target[prop] = value;
  20. }
  21. return true;
  22. }
  23. });
  24. }

  26. class User {
  27. constructor(name) {
  28. this._password = 'secret';
  29. this.name = name;
  30. }
  31. }

  33. const user = createPrivateProxy(new User('John'));
  34. console.log(user.name); // "John"
  35. // console.log(user._password); // Error: Cannot access private property
javascript
验证代理：
  1. function createValidationProxy(target, validations) {
  2. return new Proxy(target, {
  3. set(target, prop, value) {
  4. if (validations[prop]) {
  5. const validation = validations[prop];
  6. if (!validation(value)) {
  7. throw new Error(`Invalid value for ${prop}`);
  8. }
  9. }
  10. target[prop] = value;
  11. return true;
  12. }
  13. });
  14. }

  16. const user = createValidationProxy({}, {
  17. age: value => typeof value === 'number' && value >= 0 && value <= 120,
  18. email: value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
  19. });

  21. user.age = 30; // OK
  22. // user.age = -1; // Error: Invalid value for age
  23. user.email = 'john@example.com'; // OK
  24. // user.email = 'invalid'; // Error: Invalid value for email
javascript
日志代理：
  1. function createLoggingProxy(target, name) {
  2. return new Proxy(target, {
  3. get(target, prop) {
  4. console.log(`[${name}] Getting ${prop}`);
  5. return target[prop];
  6. },
  8. set(target, prop, value) {
  9. console.log(`[${name}] Setting ${prop} = ${value}`);
  10. target[prop] = value;
  11. return true;
  12. },
  14. deleteProperty(target, prop) {
  15. console.log(`[${name}] Deleting ${prop}`);
  16. return delete target[prop];
  17. }
  18. });
  19. }

  21. const user = createLoggingProxy({
  22. name: 'John',
  23. age: 30
  24. }, 'UserObject');

  26. user.name; // [UserObject] Getting name
  27. user.age = 31; // [UserObject] Setting age = 31
  28. delete user.age; // [UserObject] Deleting age
javascript
缓存代理：
  1. function createCachingProxy(target) {
  2. const cache = new Map();
  4. return new Proxy(target, {
  5. get(target, prop) {
  6. if (cache.has(prop)) {
  7. console.log(`Cache hit for ${prop}`);
  8. return cache.get(prop);
  9. }
  11. const value = target[prop];
  12. if (typeof value === 'function') {
  13. return new Proxy(value, {
  14. apply(target, thisArg, args) {
  15. const key = `${prop}(${JSON.stringify(args)})`;
  16. if (cache.has(key)) {
  17. console.log(`Cache hit for ${key}`);
  18. return cache.get(key);
  19. }
  21. const result = target.apply(thisArg, args);
  22. cache.set(key, result);
  23. return result;
  24. }
  25. });
  26. }
  28. cache.set(prop, value);
  29. return value;
  30. }
  31. });
  32. }

  34. const calculator = createCachingProxy({
  35. add(a, b) {
  36. console.log('Computing...');
  37. return a + b;
  38. }
  39. });

  41. console.log(calculator.add(1, 2)); // Computing... 3
  42. console.log(calculator.add(1, 2)); // Cache hit for add([1,2]) 3
javascript
只读代理：
  1. function createReadOnlyProxy(target) {
  2. return new Proxy(target, {
  3. get(target, prop) {
  4. const value = target[prop];
  5. if (typeof value === 'object' && value !== null) {
  6. return createReadOnlyProxy(value);
  7. }
  8. return value;
  9. },
  11. set() {
  12. throw new Error('Cannot modify read-only object');
  13. },
  15. deleteProperty() {
  16. throw new Error('Cannot modify read-only object');
  17. },
  19. defineProperty() {
  20. throw new Error('Cannot modify read-only object');
  21. }
  22. });
  23. }

  25. const config = createReadOnlyProxy({
  26. api: {
  27. url: 'https://api.example.com',
  28. timeout: 5000
  29. }
  30. });

  32. console.log(config.api.url); // "https://api.example.com"
  33. // config.api.url = 'new-url'; // Error: Cannot modify read-only object
javascript
Vue.js 框架
21. 详细解释 Vue.js 的响应式原理。
答案解析：
Vue.js 的响应式系统是其核心特性之一，它通过数据劫持和发布订阅模式实现数据与视图的自动同步。
1. Vue 2.x 响应式原理：
Vue 2.x 使用 Object.defineProperty 实现数据劫持：
  1. // 简化版响应式实现
  2. function observe(obj) {
  3. if (typeof obj !== 'object' || obj === null) {
  4. return obj;
  5. }
  7. Object.keys(obj).forEach(key => {
  8. defineReactive(obj, key, obj[key]);
  9. });
  10. }

  12. function defineReactive(obj, key, val) {
  13. // 递归处理嵌套对象
  14. observe(val);
  16. const dep = new Dep();
  18. Object.defineProperty(obj, key, {
  19. get() {
  20. // 依赖收集
  21. if (Dep.target) {
  22. dep.depend();
  23. }
  24. return val;
  25. },
  26. set(newVal) {
  27. if (newVal === val) return;
  28. val = newVal;
  29. // 触发更新
  30. dep.notify();
  31. }
  32. });
  33. }

  35. // 发布订阅系统
  36. class Dep {
  37. constructor() {
  38. this.subscribers = new Set();
  39. }
  41. depend() {
  42. if (Dep.target) {
  43. this.subscribers.add(Dep.target);
  44. }
  45. }
  47. notify() {
  48. this.subscribers.forEach(sub => sub.update());
  49. }
  50. }

  52. // 观察者
  53. class Watcher {
  54. constructor(vm, key, callback) {
  55. this.vm = vm;
  56. this.key = key;
  57. this.callback = callback;
  59. // 触发 getter 进行依赖收集
  60. Dep.target = this;
  61. this.vm[this.key];
  62. Dep.target = null;
  63. }
  65. update() {
  66. this.callback.call(this.vm, this.vm[this.key]);
  67. }
  68. }
javascript
2. Vue 3.x 响应式原理：
Vue 3.x 使用 Proxy 实现数据劫持：
  1. // 简化版响应式实现
  2. function reactive(target) {
  3. if (typeof target !== 'object' || target === null) {
  4. return target;
  5. }
  7. const handler = {
  8. get(target, key, receiver) {
  9. // 依赖收集
  10. track(target, key);
  11. const result = Reflect.get(target, key, receiver);
  12. if (typeof result === 'object') {
  13. return reactive(result);
  14. }
  15. return result;
  16. },
  18. set(target, key, value, receiver) {
  19. const oldValue = target[key];
  20. const result = Reflect.set(target, key, value, receiver);
  21. if (oldValue !== value) {
  22. // 触发更新
  23. trigger(target, key);
  24. }
  25. return result;
  26. }
  27. };
  29. return new Proxy(target, handler);
  30. }

  32. // 依赖收集
  33. let activeEffect;
  34. const targetMap = new WeakMap();

  36. function track(target, key) {
  37. if (!activeEffect) return;
  39. let depsMap = targetMap.get(target);
  40. if (!depsMap) {
  41. targetMap.set(target, (depsMap = new Map()));
  42. }
  44. let dep = depsMap.get(key);
  45. if (!dep) {
  46. depsMap.set(key, (dep = new Set()));
  47. }
  49. dep.add(activeEffect);
  50. }

  52. // 触发更新
  53. function trigger(target, key) {
  54. const depsMap = targetMap.get(target);
  55. if (!depsMap) return;
  57. const dep = depsMap.get(key);
  58. if (dep) {
  59. dep.forEach(effect => effect());
  60. }
  61. }

  63. // 副作用函数
  64. function effect(fn) {
  65. const effectFn = () => {
  66. activeEffect = effectFn;
  67. fn();
  68. activeEffect = null;
  69. };
  70. effectFn();
  71. return effectFn;
  72. }
javascript
3. Vue 2.x vs Vue 3.x 响应式系统的区别：
实现方式：
Vue 2.x：Object.defineProperty
Vue 3.x：Proxy
优势对比：
  1. // Vue 2.x 的限制
  2. const data = {
  3. list: []
  4. };
  5. // 无法检测数组长度变化
  6. data.list.length = 2;
  7. // 无法检测对象属性的添加和删除
  8. data.newProp = 'value';

  10. // Vue 3.x 的改进
  11. const state = reactive({
  12. list: []
  13. });
  14. // 可以检测数组长度变化
  15. state.list.length = 2;
  16. // 可以检测对象属性的添加和删除
  17. state.newProp = 'value';
javascript
性能对比：
Vue 2.x：需要递归遍历对象进行劫持
Vue 3.x：惰性劫持，访问时才进行代理
实际应用示例：
简单的响应式系统：
  1. // Vue 3.x 风格的响应式实现
  2. function createReactiveStore() {
  3. const state = reactive({
  4. count: 0,
  5. todos: []
  6. });
  8. const actions = {
  9. increment() {
  10. state.count++;
  11. },
  13. addTodo(text) {
  14. state.todos.push({
  15. id: Date.now(),
  16. text,
  17. completed: false
  18. });
  19. },
  21. toggleTodo(id) {
  22. const todo = state.todos.find(t => t.id === id);
  23. if (todo) {
  24. todo.completed = !todo.completed;
  25. }
  26. }
  27. };
  29. return { state, actions };
  30. }

  32. const store = createReactiveStore();

  34. // 创建观察者
  35. effect(() => {
  36. console.log('Count changed:', store.state.count);
  37. });

  39. effect(() => {
  40. console.log('Todos changed:', store.state.todos.length);
  41. });

  43. // 触发更新
  44. store.actions.increment(); // 输出: Count changed: 1
  45. store.actions.addTodo('Learn Vue'); // 输出: Todos changed: 1
javascript
计算属性实现：
  1. function computed(getter) {
  2. let value;
  3. let dirty = true;
  5. const effectFn = effect(getter, {
  6. lazy: true,
  7. scheduler() {
  8. if (!dirty) {
  9. dirty = true;
  10. trigger(computedRef, 'value');
  11. }
  12. }
  13. });
  15. const computedRef = {
  16. get value() {
  17. if (dirty) {
  18. value = effectFn();
  19. dirty = false;
  20. }
  21. track(computedRef, 'value');
  22. return value;
  23. }
  24. };
  26. return computedRef;
  27. }

  29. // 使用示例
  30. const state = reactive({
  31. count: 0
  32. });

  34. const double = computed(() => state.count * 2);

  36. effect(() => {
  37. console.log('Double:', double.value);
  38. });

  40. state.count++; // 输出: Double: 2
javascript
监听器实现：
  1. function watch(source, callback) {
  2. let oldValue;
  4. const getter = typeof source === 'function'
  5. ? source
  6. : () => traverse(source);
  8. const effectFn = effect(getter, {
  9. lazy: true,
  10. scheduler() {
  11. const newValue = effectFn();
  12. callback(newValue, oldValue);
  13. oldValue = newValue;
  14. }
  15. });
  17. oldValue = effectFn();
  18. }

  20. // 深度遍历对象
  21. function traverse(value, seen = new Set()) {
  22. if (typeof value !== 'object' || value === null || seen.has(value)) {
  23. return value;
  24. }
  26. seen.add(value);
  28. if (Array.isArray(value)) {
  29. for (let i = 0; i < value.length; i++) {
  30. traverse(value[i], seen);
  31. }
  32. } else {
  33. for (const key of Object.keys(value)) {
  34. traverse(value[key], seen);
  35. }
  36. }
  38. return value;
  39. }

  41. // 使用示例
  42. const state = reactive({
  43. user: {
  44. name: 'John',
  45. age: 30
  46. }
  47. });

  49. watch(
  50. () => state.user,
  51. (newValue, oldValue) => {
  52. console.log('User changed:', newValue, oldValue);
  53. }
  54. );

  56. state.user.age = 31; // 输出: User changed: { name: 'John', age: 31 } { name: 'John', age: 30 }
javascript
22. 详细解释 Vue.js 的生命周期。
答案解析：
Vue.js 的生命周期包含了组件从创建到销毁的整个过程，每个阶段都有对应的钩子函数。
1. Vue 2.x 生命周期：
  1. export default {
  2. // 组件实例创建之前
  3. beforeCreate() {
  4. // 此时无法访问 data 和 methods
  5. console.log('beforeCreate');
  6. },
  8. // 组件实例创建完成
  9. created() {
  10. // 可以访问 data 和 methods，但还未挂载到 DOM
  11. console.log('created');
  12. this.fetchData();
  13. },
  15. // 组件挂载之前
  16. beforeMount() {
  17. // 模板编译完成，但还未渲染到 DOM
  18. console.log('beforeMount');
  19. },
  21. // 组件挂载完成
  22. mounted() {
  23. // 可以访问 DOM 元素
  24. console.log('mounted');
  25. this.initChart();
  26. },
  28. // 数据更新前
  29. beforeUpdate() {
  30. // 可以在更新前访问现有的 DOM
  31. console.log('beforeUpdate');
  32. },
  34. // 数据更新后
  35. updated() {
  36. // DOM 已经更新完成
  37. console.log('updated');
  38. },
  40. // 组件销毁前
  41. beforeDestroy() {
  42. // 清理定时器、事件监听器等
  43. console.log('beforeDestroy');
  44. this.cleanup();
  45. },
  47. // 组件销毁后
  48. destroyed() {
  49. // 组件完全销毁
  50. console.log('destroyed');
  51. }
  52. }
javascript
2. Vue 3.x 生命周期：
  1. import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

  3. export default {
  4. setup() {
  5. // 组件实例创建之前
  6. onBeforeMount(() => {
  7. console.log('onBeforeMount');
  8. });
  10. // 组件挂载完成
  11. onMounted(() => {
  12. console.log('onMounted');
  13. });
  15. // 数据更新前
  16. onBeforeUpdate(() => {
  17. console.log('onBeforeUpdate');
  18. });
  20. // 数据更新后
  21. onUpdated(() => {
  22. console.log('onUpdated');
  23. });
  25. // 组件销毁前
  26. onBeforeUnmount(() => {
  27. console.log('onBeforeUnmount');
  28. });
  30. // 组件销毁后
  31. onUnmounted(() => {
  32. console.log('onUnmounted');
  33. });
  34. }
  35. }
javascript
3. 生命周期最佳实践：
初始化数据：
  1. export default {
  2. data() {
  3. return {
  4. loading: false,
  5. data: null,
  6. error: null
  7. };
  8. },
  10. async created() {
  11. try {
  12. this.loading = true;
  13. this.data = await this.fetchData();
  14. } catch (error) {
  15. this.error = error;
  16. } finally {
  17. this.loading = false;
  18. }
  19. }
  20. }
javascript
DOM 操作和第三方库集成：
  1. export default {
  2. data() {
  3. return {
  4. chart: null
  5. };
  6. },
  8. mounted() {
  9. this.initChart();
  10. window.addEventListener('resize', this.handleResize);
  11. },
  13. beforeDestroy() {
  14. if (this.chart) {
  15. this.chart.dispose();
  16. }
  17. window.removeEventListener('resize', this.handleResize);
  18. },
  20. methods: {
  21. initChart() {
  22. this.chart = echarts.init(this.$refs.chart);
  23. this.updateChart();
  24. },
  26. handleResize() {
  27. if (this.chart) {
  28. this.chart.resize();
  29. }
  30. }
  31. }
  32. }
javascript
数据监听和缓存：
  1. export default {
  2. data() {
  3. return {
  4. searchQuery: '',
  5. debounceTimer: null
  6. };
  7. },
  9. watch: {
  10. searchQuery(newVal) {
  11. if (this.debounceTimer) {
  12. clearTimeout(this.debounceTimer);
  13. }
  14. this.debounceTimer = setTimeout(() => {
  15. this.search(newVal);
  16. }, 300);
  17. }
  18. },
  20. beforeDestroy() {
  21. if (this.debounceTimer) {
  22. clearTimeout(this.debounceTimer);
  23. }
  24. }
  25. }
javascript
实际应用示例：
数据加载组件：
  1. // DataLoader.vue
  2. export default {
  3. props: {
  4. fetchData: {
  5. type: Function,
  6. required: true
  7. }
  8. },
  10. data() {
  11. return {
  12. loading: false,
  13. data: null,
  14. error: null,
  15. retryCount: 0
  16. };
  17. },
  19. created() {
  20. this.loadData();
  21. },
  23. methods: {
  24. async loadData() {
  25. this.loading = true;
  26. this.error = null;
  28. try {
  29. this.data = await this.fetchData();
  30. } catch (error) {
  31. this.error = error;
  32. if (this.retryCount < 3) {
  33. this.retryCount++;
  34. setTimeout(() => {
  35. this.loadData();
  36. }, 1000 * this.retryCount);
  37. }
  38. } finally {
  39. this.loading = false;
  40. }
  41. }
  42. },
  44. render() {
  45. return this.$scopedSlots.default({
  46. loading: this.loading,
  47. data: this.data,
  48. error: this.error,
  49. retry: this.loadData
  50. });
  51. }
  52. }
javascript
图表组件：
  1. // ChartComponent.vue
  2. export default {
  3. props: {
  4. data: {
  5. type: Array,
  6. required: true
  7. },
  8. options: {
  9. type: Object,
  10. default: () => ({})
  11. }
  12. },
  14. data() {
  15. return {
  16. chart: null,
  17. resizeObserver: null
  18. };
  19. },
  21. mounted() {
  22. this.initChart();
  23. this.initResizeObserver();
  24. },
  26. beforeDestroy() {
  27. this.cleanup();
  28. },
  30. methods: {
  31. initChart() {
  32. this.chart = echarts.init(this.$refs.chart);
  33. this.updateChart();
  34. },
  36. updateChart() {
  37. if (!this.chart) return;
  39. const options = {
  40. ...this.defaultOptions,
  41. ...this.options,
  42. series: this.data
  43. };
  45. this.chart.setOption(options);
  46. },
  48. initResizeObserver() {
  49. this.resizeObserver = new ResizeObserver(() => {
  50. if (this.chart) {
  51. this.chart.resize();
  52. }
  53. });
  55. this.resizeObserver.observe(this.$refs.chart);
  56. },
  58. cleanup() {
  59. if (this.chart) {
  60. this.chart.dispose();
  61. this.chart = null;
  62. }
  64. if (this.resizeObserver) {
  65. this.resizeObserver.disconnect();
  66. this.resizeObserver = null;
  67. }
  68. }
  69. },
  71. watch: {
  72. data: {
  73. handler: 'updateChart',
  74. deep: true
  75. },
  77. options: {
  78. handler: 'updateChart',
  79. deep: true
  80. }
  81. }
  82. }
javascript
表单组件：
  1. // FormComponent.vue
  2. export default {
  3. data() {
  4. return {
  5. form: this.initForm(),
  6. validators: {},
  7. touched: {},
  8. errors: {}
  9. };
  10. },
  12. created() {
  13. this.initValidators();
  14. },
  16. beforeDestroy() {
  17. // 保存草稿或清理
  18. this.saveDraft();
  19. },
  21. methods: {
  22. initForm() {
  23. return {
  24. // 初始化表单数据
  25. };
  26. },
  28. initValidators() {
  29. // 设置验证规则
  30. },
  32. validate() {
  33. // 执行验证
  34. },
  36. saveDraft() {
  37. localStorage.setItem('formDraft', JSON.stringify(this.form));
  38. },
  40. async submit() {
  41. if (!this.validate()) return;
  43. try {
  44. await this.submitForm(this.form);
  45. this.$emit('success');
  46. } catch (error) {
  47. this.$emit('error', error);
  48. }
  49. }
  50. },
  52. watch: {
  53. form: {
  54. handler(newVal) {
  55. // 自动保存
  56. this.saveDraft();
  57. // 自动验证
  58. this.validate();
  59. },
  60. deep: true
  61. }
  62. }
  63. }
javascript
23. 详细解释 Vue.js 的组件通信方式。
答案解析：
Vue.js 提供了多种组件间通信的方式，每种方式都有其适用场景。
1. Props 和 Events：
父子组件最基本的通信方式：
  1. // 父组件
  2. <template>
  3. <child-component
  4. :message="message"
  5. @update="handleUpdate"
  6. />
  7. template>

  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. message: 'Hello'
  14. };
  15. },
  16. methods: {
  17. handleUpdate(value) {
  18. console.log('Received:', value);
  19. }
  20. }
  21. };
  22. script>

  24. // 子组件
  25. <template>
  26. <div>
  27. <p>{{ message }}p>
  28. <button @click="sendUpdate">Updatebutton>
  29. div>
  30. template>

  32. <script>
  33. export default {
  34. props: {
  35. message: {
  36. type: String,
  37. required: true
  38. }
  39. },
  40. methods: {
  41. sendUpdate() {
  42. this.$emit('update', 'New value');
  43. }
  44. }
  45. };
  46. script>
javascript
2. Provide/Inject：
跨多级组件传递数据：
  1. // 根组件
  2. export default {
  3. provide() {
  4. return {
  5. theme: this.theme,
  6. updateTheme: this.updateTheme
  7. };
  8. },
  9. data() {
  10. return {
  11. theme: 'light'
  12. };
  13. },
  14. methods: {
  15. updateTheme(newTheme) {
  16. this.theme = newTheme;
  17. }
  18. }
  19. };

  21. // 深层子组件
  22. export default {
  23. inject: ['theme', 'updateTheme'],
  24. methods: {
  25. toggleTheme() {
  26. this.updateTheme(this.theme === 'light' ? 'dark' : 'light');
  27. }
  28. }
  29. };
javascript
3. EventBus：
非父子组件间的通信：
  1. // eventBus.js
  2. import Vue from 'vue';
  3. export const eventBus = new Vue();

  5. // 组件 A
  6. import { eventBus } from './eventBus';

  8. export default {
  9. methods: {
  10. sendMessage() {
  11. eventBus.$emit('message', 'Hello from A');
  12. }
  13. }
  14. };

  16. // 组件 B
  17. import { eventBus } from './eventBus';

  19. export default {
  20. created() {
  21. eventBus.$on('message', this.handleMessage);
  22. },
  23. beforeDestroy() {
  24. eventBus.$off('message', this.handleMessage);
  25. },
  26. methods: {
  27. handleMessage(msg) {
  28. console.log(msg);
  29. }
  30. }
  31. };
javascript
4. Vuex：
全局状态管理：
  1. // store.js
  2. import Vue from 'vue';
  3. import Vuex from 'vuex';

  5. Vue.use(Vuex);

  7. export default new Vuex.Store({
  8. state: {
  9. count: 0,
  10. todos: []
  11. },
  12. mutations: {
  13. INCREMENT(state) {
  14. state.count++;
  15. },
  16. ADD_TODO(state, todo) {
  17. state.todos.push(todo);
  18. }
  19. },
  20. actions: {
  21. async fetchTodos({ commit }) {
  22. const todos = await api.getTodos();
  23. todos.forEach(todo => commit('ADD_TODO', todo));
  24. }
  25. },
  26. getters: {
  27. completedTodos: state => state.todos.filter(todo => todo.completed)
  28. }
  29. });

  31. // 组件中使用
  32. export default {
  33. computed: {
  34. ...mapState(['count']),
  35. ...mapGetters(['completedTodos'])
  36. },
  37. methods: {
  38. ...mapMutations(['INCREMENT']),
  39. ...mapActions(['fetchTodos'])
  40. }
  41. };
javascript
5. $refs 和 $parent/$children：
直接访问组件实例：
  1. // 父组件
  2. <template>
  3. <div>
  4. <child-component ref="child" />
  5. <button @click="callChildMethod">Call Childbutton>
  6. div>
  7. template>

  9. <script>
  10. export default {
  11. methods: {
  12. callChildMethod() {
  13. this.$refs.child.someMethod();
  14. }
  15. }
  16. };
  17. script>

  19. // 子组件
  20. export default {
  21. methods: {
  22. someMethod() {
  23. console.log('Called from parent');
  24. },
  25. callParentMethod() {
  26. this.$parent.parentMethod();
  27. }
  28. }
  29. };
javascript
实际应用示例：
表单组件通信：
  1. // FormContainer.vue
  2. <template>
  3. <div>
  4. <form-item
  5. v-for="(field, index) in fields"
  6. :key="index"
  7. v-model="formData[field.name]"
  8. :field="field"
  9. @validate="handleValidate"
  10. />
  11. <button @click="submit">Submitbutton>
  12. div>
  13. template>

  15. <script>
  16. export default {
  17. provide() {
  18. return {
  19. form: this
  20. };
  21. },
  22. data() {
  23. return {
  24. formData: {},
  25. validationResults: {}
  26. };
  27. },
  28. methods: {
  29. handleValidate(fieldName, isValid, error) {
  30. this.validationResults[fieldName] = { isValid, error };
  31. },
  32. async submit() {
  33. if (Object.values(this.validationResults).every(r => r.isValid)) {
  34. await this.submitForm(this.formData);
  35. }
  36. }
  37. }
  38. };
  39. script>

  41. // FormItem.vue
  42. <template>
  43. <div class="form-item">
  44. <label>{{ field.label }}label>
  45. <input
  46. :value="value"
  47. @input="handleInput"
  48. @blur="validate"
  49. />
  50. <span class="error" v-if="error">{{ error }}span>
  51. div>
  52. template>

  54. <script>
  55. export default {
  56. inject: ['form'],
  57. props: ['value', 'field'],
  58. data() {
  59. return {
  60. error: null
  61. };
  62. },
  63. methods: {
  64. handleInput(e) {
  65. this.$emit('input', e.target.value);
  66. this.validate();
  67. },
  68. validate() {
  69. const value = this.value;
  70. const rules = this.field.rules;
  71. let isValid = true;
  72. let error = null;
  74. // 执行验证
  75. if (rules.required && !value) {
  76. isValid = false;
  77. error = `${this.field.label} is required`;
  78. }
  80. this.error = error;
  81. this.$emit('validate', this.field.name, isValid, error);
  82. }
  83. }
  84. };
  85. script>
javascript
多级菜单组件：
  1. // Menu.vue
  2. <template>
  3. <div class="menu">
  4. <menu-item
  5. v-for="item in items"
  6. :key="item.id"
  7. :item="item"
  8. />
  9. div>
  10. template>

  12. <script>
  13. export default {
  14. provide() {
  15. return {
  16. rootMenu: this
  17. };
  18. },
  19. data() {
  20. return {
  21. activeItem: null
  22. };
  23. },
  24. methods: {
  25. setActiveItem(item) {
  26. this.activeItem = item;
  27. }
  28. }
  29. };
  30. script>

  32. // MenuItem.vue
  33. <template>
  34. <div
  35. class="menu-item"
  36. :class="{ active: isActive }"
  37. @click="handleClick"
  38. >
  39. {{ item.label }}
  40. <div v-if="item.children" class="submenu">
  41. <menu-item
  42. v-for="child in item.children"
  43. :key="child.id"
  44. :item="child"
  45. />
  46. div>
  47. div>
  48. template>

  50. <script>
  51. export default {
  52. name: 'MenuItem',
  53. inject: ['rootMenu'],
  54. props: ['item'],
  55. computed: {
  56. isActive() {
  57. return this.rootMenu.activeItem === this.item;
  58. }
  59. },
  60. methods: {
  61. handleClick() {
  62. this.rootMenu.setActiveItem(this.item);
  63. if (this.item.onClick) {
  64. this.item.onClick();
  65. }
  66. }
  67. }
  68. };
  69. script>
javascript
全局消息通知：
  1. // messagePlugin.js
  2. let messageInstance = null;

  4. export default {
  5. install(Vue) {
  6. Vue.prototype.$message = this.showMessage;
  7. },
  9. showMessage({ type = 'info', message, duration = 3000 }) {
  10. if (!messageInstance) {
  11. const MessageConstructor = Vue.extend({
  12. render(h) {
  13. return h('div', {
  14. class: ['message', `message-${type}`]
  15. }, message);
  16. }
  17. });
  19. messageInstance = new MessageConstructor();
  20. const vm = messageInstance.$mount();
  21. document.body.appendChild(vm.$el);
  23. setTimeout(() => {
  24. document.body.removeChild(vm.$el);
  25. messageInstance = null;
  26. }, duration);
  27. }
  28. }
  29. };

  31. // 使用示例
  32. this.$message({
  33. type: 'success',
  34. message: 'Operation successful'
  35. });
javascript
24. 详细解释 Vue.js 的自定义指令。
答案解析：
Vue.js 的自定义指令用于对底层 DOM 元素进行直接操作，当内置指令无法满足需求时非常有用。
1. 指令定义：
  1. // 全局指令
  2. Vue.directive('focus', {
  3. // 指令绑定到元素时调用
  4. bind(el, binding, vnode) {
  5. // 进行初始化设置
  6. },
  8. // 被绑定元素插入父节点时调用
  9. inserted(el, binding, vnode) {
  10. el.focus();
  11. },
  13. // 组件更新时调用
  14. update(el, binding, vnode, oldVnode) {
  15. // 根据值的变化进行更新
  16. },
  18. // 组件更新完成后调用
  19. componentUpdated(el, binding, vnode, oldVnode) {
  20. // 组件和子组件更新完成后进行操作
  21. },
  23. // 指令与元素解绑时调用
  24. unbind(el, binding, vnode) {
  25. // 进行清理工作
  26. }
  27. });

  29. // 局部指令
  30. export default {
  31. directives: {
  32. focus: {
  33. inserted(el) {
  34. el.focus();
  35. }
  36. }
  37. }
  38. };
javascript
2. 指令钩子函数参数：
  1. Vue.directive('example', {
  2. bind(el, binding, vnode) {
  3. // el: 指令绑定的元素
  4. // binding: 指令的详细信息
  5. // - name: 指令名
  6. // - value: 指令的值
  7. // - oldValue: 指令前一个值
  8. // - expression: 指令表达式
  9. // - arg: 指令参数
  10. // - modifiers: 指令修饰符
  11. // vnode: Vue 编译生成的虚拟节点
  13. console.log(binding.value); // 指令值
  14. console.log(binding.arg); // 指令参数
  15. console.log(binding.modifiers); // 指令修饰符
  16. }
  17. });
javascript
3. 实际应用示例：
点击外部关闭指令：
  1. Vue.directive('click-outside', {
  2. bind(el, binding) {
  3. el.clickOutsideHandler = (event) => {
  4. if (!(el === event.target || el.contains(event.target))) {
  5. binding.value(event);
  6. }
  7. };
  8. document.addEventListener('click', el.clickOutsideHandler);
  9. },
  10. unbind(el) {
  11. document.removeEventListener('click', el.clickOutsideHandler);
  12. }
  13. });

  15. // 使用示例
  16. <template>
  17. <div v-click-outside="closeDropdown">
  19. div>
  20. template>
javascript
图片懒加载指令：
  1. Vue.directive('lazy', {
  2. bind(el, binding) {
  3. const observer = new IntersectionObserver(entries => {
  4. entries.forEach(entry => {
  5. if (entry.isIntersecting) {
  6. el.src = binding.value;
  7. observer.unobserve(el);
  8. }
  9. });
  10. });
  12. observer.observe(el);
  13. }
  14. });

  16. // 使用示例
  17. <template>
  18. <img v-lazy="imageUrl" />
  19. template>
javascript
权限控制指令：
  1. Vue.directive('permission', {
  2. bind(el, binding) {
  3. const { value } = binding;
  4. const userRoles = store.state.user.roles;
  6. if (!userRoles.some(role => value.includes(role))) {
  7. el.parentNode.removeChild(el);
  8. }
  9. }
  10. });

  12. // 使用示例
  13. <template>
  14. <button v-permission="['admin', 'editor']">
  15. Delete
  16. button>
  17. template>
javascript
输入限制指令：
  1. Vue.directive('number-only', {
  2. bind(el) {
  3. el.handler = function(e) {
  4. e = e || window.event;
  5. const charCode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
  6. const re = /\d/;
  7. if (!re.test(String.fromCharCode(charCode)) && charCode > 9) {
  8. if (e.preventDefault) {
  9. e.preventDefault();
  10. } else {
  11. e.returnValue = false;
  12. }
  13. }
  14. };
  15. el.addEventListener('keypress', el.handler);
  16. },
  17. unbind(el) {
  18. el.removeEventListener('keypress', el.handler);
  19. }
  20. });

  22. // 使用示例
  23. <template>
  24. <input v-number-only v-model="value" />
  25. template>
javascript
元素拖拽指令：
  1. Vue.directive('draggable', {
  2. bind(el) {
  3. el.style.position = 'absolute';
  4. el.draggable = true;
  6. let startX, startY, initialX, initialY;
  8. function dragStart(e) {
  9. startX = e.clientX - initialX;
  10. startY = e.clientY - initialY;
  12. document.addEventListener('mousemove', drag);
  13. document.addEventListener('mouseup', dragEnd);
  14. }
  16. function drag(e) {
  17. e.preventDefault();
  19. const x = e.clientX - startX;
  20. const y = e.clientY - startY;
  22. el.style.left = `${x}px`;
  23. el.style.top = `${y}px`;
  24. }
  26. function dragEnd() {
  27. initialX = el.offsetLeft;
  28. initialY = el.offsetTop;
  30. document.removeEventListener('mousemove', drag);
  31. document.removeEventListener('mouseup', dragEnd);
  32. }
  34. el.addEventListener('mousedown', dragStart);
  35. }
  36. });

  38. // 使用示例
  39. <template>
  40. <div v-draggable class="draggable-element">
  41. Drag me!
  42. div>
  43. template>
javascript
25. 详细解释 Vue.js 的插件系统。
答案解析：
Vue.js 的插件系统允许我们为 Vue 添加全局功能，包括全局方法、指令、过滤器等。
1. 插件开发：
  1. // myPlugin.js
  2. export default {
  3. install(Vue, options = {}) {
  4. // 1. 添加全局方法或属性
  5. Vue.myGlobalMethod = function() {
  6. // 全局方法实现
  7. };
  9. // 2. 添加全局指令
  10. Vue.directive('my-directive', {
  11. bind(el, binding) {
  12. // 指令实现
  13. }
  14. });
  16. // 3. 添加实例方法
  17. Vue.prototype.$myMethod = function() {
  18. // 实例方法实现
  19. };
  21. // 4. 添加全局混入
  22. Vue.mixin({
  23. created() {
  24. // 混入逻辑
  25. }
  26. });
  28. // 5. 添加全局组件
  29. Vue.component('my-component', {
  30. // 组件选项
  31. });
  32. }
  33. };

  35. // 使用插件
  36. import MyPlugin from './myPlugin';
  37. Vue.use(MyPlugin, { /* 选项 */ });
javascript
2. 实际应用示例：
状态管理插件：
  1. // store.js
  2. class Store {
  3. constructor(options = {}) {
  4. this.state = Vue.observable(options.state || {});
  5. this.mutations = options.mutations || {};
  6. this.actions = options.actions || {};
  7. }
  9. commit(type, payload) {
  10. if (!this.mutations[type]) {
  11. throw new Error(`Unknown mutation type: ${type}`);
  12. }
  13. this.mutations[type](this.state, payload);
  14. }
  16. dispatch(type, payload) {
  17. if (!this.actions[type]) {
  18. throw new Error(`Unknown action type: ${type}`);
  19. }
  20. return this.actions[type]({
  21. state: this.state,
  22. commit: this.commit.bind(this)
  23. }, payload);
  24. }
  25. }

  27. export default {
  28. install(Vue) {
  29. Vue.prototype.$store = new Store({
  30. state: {
  31. count: 0
  32. },
  33. mutations: {
  34. INCREMENT(state) {
  35. state.count++;
  36. }
  37. },
  38. actions: {
  39. increment({ commit }) {
  40. commit('INCREMENT');
  41. }
  42. }
  43. });
  44. }
  45. };
javascript
API 请求插件：
  1. // api.js
  2. class ApiClient {
  3. constructor(baseURL) {
  4. this.baseURL = baseURL;
  5. }
  7. async request(method, endpoint, data = null) {
  8. const options = {
  9. method,
  10. headers: {
  11. 'Content-Type': 'application/json'
  12. }
  13. };
  15. if (data) {
  16. options.body = JSON.stringify(data);
  17. }
  19. const response = await fetch(`${this.baseURL}${endpoint}`, options);
  20. if (!response.ok) {
  21. throw new Error(`HTTP error! status: ${response.status}`);
  22. }
  24. return response.json();
  25. }
  27. get(endpoint) {
  28. return this.request('GET', endpoint);
  29. }
  31. post(endpoint, data) {
  32. return this.request('POST', endpoint, data);
  33. }
  35. put(endpoint, data) {
  36. return this.request('PUT', endpoint, data);
  37. }
  39. delete(endpoint) {
  40. return this.request('DELETE', endpoint);
  41. }
  42. }

  44. export default {
  45. install(Vue, options = {}) {
  46. const api = new ApiClient(options.baseURL || '');
  47. Vue.prototype.$api = api;
  48. }
  49. };
javascript
国际化插件：
  1. // i18n.js
  2. class I18n {
  3. constructor(options = {}) {
  4. this.locale = options.locale || 'en';
  5. this.messages = options.messages || {};
  6. }
  8. setLocale(locale) {
  9. this.locale = locale;
  10. }
  12. t(key, params = {}) {
  13. const message = this.messages[this.locale]?.[key] || key;
  14. return message.replace(/\{(\w+)\}/g, (_, key) => params[key]);
  15. }
  16. }

  18. export default {
  19. install(Vue, options = {}) {
  20. const i18n = new I18n(options);
  22. Vue.prototype.$t = function(key, params) {
  23. return i18n.t(key, params);
  24. };
  26. Vue.prototype.$i18n = i18n;
  28. Vue.directive('t', {
  29. bind(el, binding) {
  30. el.textContent = i18n.t(binding.value);
  31. },
  32. update(el, binding) {
  33. el.textContent = i18n.t(binding.value);
  34. }
  35. });
  36. }
  37. };

  39. // 使用示例
  40. Vue.use(i18nPlugin, {
  41. locale: 'en',
  42. messages: {
  43. en: {
  44. hello: 'Hello {name}!',
  45. welcome: 'Welcome to our app'
  46. },
  47. zh: {
  48. hello: '你好 {name}！',
  49. welcome: '欢迎使用我们的应用'
  50. }
  51. }
  52. });
javascript
表单验证插件：
  1. // validator.js
  2. class Validator {
  3. constructor() {
  4. this.rules = {
  5. required: value => !!value || '此字段是必填的',
  6. email: value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || '请输入有效的邮箱地址',
  7. minLength: min => value => value.length >= min || `最少需要 ${min} 个字符`,
  8. maxLength: max => value => value.length <= max || `最多允许 ${max} 个字符`
  9. };
  10. }
  12. validate(value, rules) {
  13. for (const rule of rules) {
  14. if (typeof rule === 'string') {
  15. const result = this.rules[rule](value);
  16. if (result !== true) return result;
  17. } else if (typeof rule === 'function') {
  18. const result = rule(value);
  19. if (result !== true) return result;
  20. }
  21. }
  22. return true;
  23. }
  25. addRule(name, validator) {
  26. this.rules[name] = validator;
  27. }
  28. }

  30. export default {
  31. install(Vue) {
  32. const validator = new Validator();
  34. Vue.prototype.$validator = validator;
  36. Vue.directive('validate', {
  37. bind(el, binding, vnode) {
  38. const rules = binding.value;
  39. const inputElement = el.tagName === 'INPUT' ? el : el.querySelector('input');
  41. inputElement.addEventListener('input', () => {
  42. const result = validator.validate(inputElement.value, rules);
  43. if (result !== true) {
  44. vnode.context.$emit('validation-error', result);
  45. } else {
  46. vnode.context.$emit('validation-success');
  47. }
  48. });
  49. }
  50. });
  51. }
  52. };

  54. // 使用示例
  55. <template>
  56. <div>
  57. <input
  58. v-validate="['required', 'email']"
  59. v-model="email"
  60. @validation-error="handleError"
  61. />
  62. <span class="error" v-if="error">{{ error }}span>
  63. div>
  64. template>

  66. <script>
  67. export default {
  68. data() {
  69. return {
  70. email: '',
  71. error: null
  72. };
  73. },
  74. methods: {
  75. handleError(error) {
  76. this.error = error;
  77. }
  78. }
  79. };
  80. script>
javascript
26. 详细解释 Vue.js 的虚拟 DOM 和渲染机制。
答案解析：
Vue.js 使用虚拟 DOM（Virtual DOM）来提高渲染性能，它是对真实 DOM 的一种抽象表示。
1. 虚拟 DOM 的实现：
  1. // VNode 类
  2. class VNode {
  3. constructor(tag, data, children, text) {
  4. this.tag = tag; // 标签名
  5. this.data = data; // 属性、事件等数据
  6. this.children = children; // 子节点
  7. this.text = text; // 文本内容
  8. }
  9. }

  11. // 创建虚拟节点
  12. function createElement(tag, data = {}, ...children) {
  13. if (typeof tag === 'string') {
  14. return new VNode(tag, data, children);
  15. } else {
  16. // 组件 VNode
  17. return new VNode(
  18. 'component',
  19. { ...data, component: tag },
  20. children
  21. );
  22. }
  23. }

  25. // 渲染函数示例
  26. function render() {
  27. return createElement('div', { class: 'container' },
  28. createElement('h1', { style: { color: 'red' } }, 'Hello'),
  29. createElement('p', null, 'This is a paragraph')
  30. );
  31. }
javascript
2. Diff 算法：
  1. function patch(oldVNode, newVNode) {
  2. // 1. 如果新节点不存在
  3. if (!newVNode) {
  4. return oldVNode.el.parentNode.removeChild(oldVNode.el);
  5. }
  7. // 2. 如果是相同节点
  8. if (sameVNode(oldVNode, newVNode)) {
  9. patchVNode(oldVNode, newVNode);
  10. } else {
  11. // 3. 不同节点，直接替换
  12. const oldEl = oldVNode.el;
  13. const parentEl = oldEl.parentNode;
  15. // 创建新元素
  16. createElm(newVNode);
  17. if (parentEl) {
  18. parentEl.replaceChild(newVNode.el, oldEl);
  19. }
  20. }
  21. }

  23. function sameVNode(oldVNode, newVNode) {
  24. return oldVNode.key === newVNode.key && oldVNode.tag === newVNode.tag;
  25. }

  27. function patchVNode(oldVNode, newVNode) {
  28. const el = newVNode.el = oldVNode.el;
  29. const oldCh = oldVNode.children;
  30. const newCh = newVNode.children;
  32. // 1. 文本节点
  33. if (typeof newVNode.text !== 'undefined') {
  34. if (newVNode.text !== oldVNode.text) {
  35. el.textContent = newVNode.text;
  36. }
  37. return;
  38. }
  40. // 2. 更新属性
  41. updateProperties(newVNode, oldVNode.data);
  43. // 3. 更新子节点
  44. if (oldCh && newCh) {
  45. updateChildren(el, oldCh, newCh);
  46. } else if (newCh) {
  47. // 只有新子节点
  48. for (let i = 0; i < newCh.length; i++) {
  49. el.appendChild(createElm(newCh[i]));
  50. }
  51. } else if (oldCh) {
  52. // 只有旧子节点
  53. el.innerHTML = '';
  54. }
  55. }

  57. function updateChildren(parentEl, oldCh, newCh) {
  58. let oldStartIdx = 0;
  59. let oldEndIdx = oldCh.length - 1;
  60. let newStartIdx = 0;
  61. let newEndIdx = newCh.length - 1;
  63. while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  64. if (sameVNode(oldCh[oldStartIdx], newCh[newStartIdx])) {
  65. // 从头比较
  66. patchVNode(oldCh[oldStartIdx], newCh[newStartIdx]);
  67. oldStartIdx++;
  68. newStartIdx++;
  69. } else if (sameVNode(oldCh[oldEndIdx], newCh[newEndIdx])) {
  70. // 从尾比较
  71. patchVNode(oldCh[oldEndIdx], newCh[newEndIdx]);
  72. oldEndIdx--;
  73. newEndIdx--;
  74. } else {
  75. // 需要移动节点
  76. // ... 其他 diff 策略
  77. }
  78. }
  80. // 处理剩余节点
  81. if (oldStartIdx > oldEndIdx) {
  82. // 添加新节点
  83. for (let i = newStartIdx; i <= newEndIdx; i++) {
  84. parentEl.appendChild(createElm(newCh[i]));
  85. }
  86. } else if (newStartIdx > newEndIdx) {
  87. // 删除多余节点
  88. for (let i = oldStartIdx; i <= oldEndIdx; i++) {
  89. parentEl.removeChild(oldCh[i].el);
  90. }
  91. }
  92. }
javascript
3. 模板编译：
  1. // 模板编译过程
  2. function compile(template) {
  3. // 1. 解析模板
  4. const ast = parse(template);
  6. // 2. 优化静态节点
  7. optimize(ast);
  9. // 3. 生成代码
  10. const code = generate(ast);
  12. // 4. 创建渲染函数
  13. return new Function(`with(this){return ${code}}`);
  14. }

  16. // 解析模板
  17. function parse(template) {
  18. const stack = [];
  19. let currentParent;
  20. let root;
  22. parseHTML(template, {
  23. start(tag, attrs, unary) {
  24. const element = {
  25. type: 1,
  26. tag,
  27. attrsList: attrs,
  28. parent: currentParent,
  29. children: []
  30. };
  32. if (!root) {
  33. root = element;
  34. }
  36. if (currentParent) {
  37. currentParent.children.push(element);
  38. }
  40. if (!unary) {
  41. currentParent = element;
  42. stack.push(element);
  43. }
  44. },
  46. end() {
  47. stack.pop();
  48. currentParent = stack[stack.length - 1];
  49. },
  51. chars(text) {
  52. if (!currentParent) return;
  54. const children = currentParent.children;
  55. if (text.trim()) {
  56. children.push({
  57. type: 3,
  58. text
  59. });
  60. }
  61. }
  62. });
  64. return root;
  65. }

  67. // 优化静态节点
  68. function optimize(root) {
  69. // 1. 标记静态节点
  70. markStatic(root);
  72. // 2. 标记静态根节点
  73. markStaticRoots(root);
  74. }

  76. function markStatic(node) {
  77. node.static = isStatic(node);
  78. if (node.type === 1) {
  79. for (let i = 0; i < node.children.length; i++) {
  80. const child = node.children[i];
  81. markStatic(child);
  82. if (!child.static) {
  83. node.static = false;
  84. }
  85. }
  86. }
  87. }

  89. function isStatic(node) {
  90. if (node.type === 2) { // 表达式
  91. return false;
  92. }
  93. if (node.type === 3) { // 文本
  94. return true;
  95. }
  96. return !node.if && !node.for; // 元素
  97. }

  99. // 生成代码
  100. function generate(ast) {
  101. const code = genElement(ast);
  102. return `{render:function(){${code}}}`;
  103. }

  105. function genElement(el) {
  106. if (el.static) {
  107. return `_m(${el.staticIndex})`;
  108. }
  110. let code;
  111. const data = genData(el);
  113. const children = genChildren(el);
  114. code = `_c('${el.tag}'${
  115. data ? `,${data}` : ''
  116. }${
  117. children ? `,${children}` : ''
  118. })`;
  120. return code;
  121. }
javascript
4. 实际应用示例：
渲染函数组件：
  1. // 使用渲染函数创建组件
  2. Vue.component('anchored-heading', {
  3. render: function (createElement) {
  4. return createElement(
  5. 'h' + this.level, // 标签名
  6. this.$slots.default // 子节点数组
  7. );
  8. },
  9. props: {
  10. level: {
  11. type: Number,
  12. required: true
  13. }
  14. }
  15. });

  17. // 使用示例
  18. <anchored-heading :level="1">
  19. Hello world!
  20. anchored-heading>
javascript
函数式组件：
  1. // 函数式组件
  2. Vue.component('my-component', {
  3. functional: true,
  4. props: {
  5. // 声明 props
  6. message: {
  7. type: String,
  8. required: true
  9. }
  10. },
  11. render: function (createElement, context) {
  12. // context 包含：props、children、slots、data、parent 等
  13. return createElement('div', context.props.message);
  14. }
  15. });
javascript
JSX 支持：
  1. // 使用 JSX
  2. export default {
  3. data() {
  4. return {
  5. items: ['A', 'B', 'C']
  6. };
  7. },
  8. render() {
  9. return (
  10. <div class="container">
  11. {this.items.map(item => (
  12. <div key={item} class="item">
  13. {item}
  14. div>
  15. ))}
  16. div>
  17. );
  18. }
  19. };
javascript
高阶组件：
  1. // 高阶组件工厂函数
  2. function withLog(WrappedComponent) {
  3. return {
  4. mounted() {
  5. console.log(`${WrappedComponent.name} mounted`);
  6. },
  7. props: WrappedComponent.props,
  8. render(h) {
  9. return h(WrappedComponent, {
  10. props: this.$props,
  11. on: this.$listeners
  12. });
  13. }
  14. };
  15. }

  17. // 使用高阶组件
  18. const MyComponent = {
  19. name: 'MyComponent',
  20. props: ['message'],
  21. template: '
    {{ message }}
    '
  22. };

  24. const LoggedComponent = withLog(MyComponent);
javascript
动态组件：
  1. // 动态组件工厂
  2. const AsyncComponent = () => ({
  3. // 需要加载的组件
  4. component: import('./MyComponent.vue'),
  5. // 加载中应当渲染的组件
  6. loading: LoadingComponent,
  7. // 出错时渲染的组件
  8. error: ErrorComponent,
  9. // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  10. delay: 200,
  11. // 如果提供了超时时间且组件加载也超时了，
  12. // 则使用加载失败时的组件。默认值是：`Infinity`
  13. timeout: 3000
  14. });

  16. export default {
  17. components: {
  18. AsyncComponent
  19. },
  20. template: `
  21. <div>
  22. <async-component v-if="show" />
  23. <button @click="show = !show">Togglebutton>
  24. div>
  25. `,
  26. data() {
  27. return {
  28. show: false
  29. };
  30. }
  31. };
javascript