当前位置： 首页 > article >正文

2025年前端面试热门题目——HTML|CSS|Javascript|TS知识

article 2024/12/22 7:37:20

以下是对这些 HTML 面试问题的详细解答：

1. HTML 的 src 和 href 属性有什么区别?

  • src (Source) 属性：

    • 用于嵌入资源，例如图像、脚本或 iframe。
    • 加载资源时，当前页面的加载会暂停，直到资源加载完成。
    • 常用于 <img>、<script> 和 <iframe> 标签。
    • 例子：
      <img src="image.jpg" alt="图片">
<script src="script.js"></script>

  • href (Hypertext Reference) 属性：

    • 用于建立超链接，指向外部资源或内部的网页。
    • 不会暂停页面加载，用户可以点击链接跳转。
    • 常用于 <a>、<link> 和 <area> 标签。
    • 例子：
      <a href="https://example.com">访问示例网站</a>
<link href="styles.css" rel="stylesheet">

2. 什么是 HTML 语义化?

HTML 语义化是指通过使用具有明确含义的标签，使 HTML 结构具有更好的可读性和意义。

  • 优点：

    1. 提高可读性：开发者和浏览器可以更轻松理解文档结构。
    2. 增强 SEO：语义化标签帮助搜索引擎更好地索引页面内容。
    3. 增强可访问性：辅助工具（如屏幕阅读器）可以更好地解释页面内容。

  • 常见语义化标签：

    • header、footer、article、section：定义页面结构。
    • nav：定义导航。
    • aside：定义侧边内容。
    • figure 和 figcaption：定义图像及其说明。

3. DOCTYPE(文档类型)的作用是什么?

  • 定义： DOCTYPE 声明用于告诉浏览器当前 HTML 文档的标准。
  • 作用：
    1. 让浏览器以标准模式（Standard Mode）渲染页面。
    2. 避免浏览器进入怪异模式（Quirks Mode），导致布局和样式出现问题。
  • HTML5 DOCTYPE 示例：
    <!DOCTYPE html>

4. HTML 的 script 标签中 defer 和 async 有什么区别?

  • defer：

    • 脚本异步加载，并在 HTML 解析完成后按顺序执行。
    • 适合依赖 HTML 结构的脚本。
    • 示例：
      <script src="script.js" defer></script>

  • async：

    • 脚本异步加载，加载完成后立即执行（可能在 HTML 未解析完成时执行）。
    • 适合独立的脚本（如广告或分析工具）。
    • 示例：
      <script src="script.js" async></script>

  • 区别总结：

    • defer 保证脚本按顺序执行，适用于多个依赖的脚本。
    • async 脚本独立，加载和执行更快。

5. 常用的 HTML meta 标签有哪些?

<meta> 标签用于定义页面的元信息，常用的有：

  • 字符编码：
    <meta charset="UTF-8">
  • 视口设置（适配移动端）：
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 描述：
    <meta name="description" content="页面的描述内容">
  • 关键字：
    <meta name="keywords" content="HTML, CSS, JavaScript">
  • 作者信息：
    <meta name="author" content="作者名字">
  • 防止搜索引擎索引：
    <meta name="robots" content="noindex, nofollow">

6. HTML5 相比于 HTML有哪些更新?

  1. 新增语义化标签：

    • 如：<header>、<footer>、<article>、<section>、<nav>。

  2. 新增表单功能：

    • 增加了新的输入类型：email、url、date、number 等。
    • 表单属性：required、placeholder、pattern。

  3. 支持多媒体：

    • 新增 <audio> 和 <video> 标签。

  4. 新增 API：

    • 地理位置：Geolocation API
    • 本地存储：localStorage 和 sessionStorage
    • 拖放：Drag and Drop API
    • 画布：<canvas> 标签。

  5. 废弃元素：

    • 移除了 <center>、<font> 等。

7. HTML 中，img 标签 srcset 属性的作用是什么?

  • 作用： 提供一组图像 URL 和其对应的显示条件，允许浏览器根据设备像素密度或屏幕宽度选择最合适的图像。
  • 示例：
    <img src="default.jpg" srcset="small.jpg 480w, medium.jpg 1024w" sizes="(max-width: 600px) 480px, 1024px" alt="图片">
    • 浏览器会根据视口大小和分辨率选择合适的图像。
    • 480w 表示图像宽度为 480 像素。

8. HTML 行内元素有哪些?块级元素有哪些?空 (void) 元素有哪些?

  • 行内元素：

    • 不占据独立一行，内容按行排列。
    • 常见：<a>、<span>、<img>、<strong>、<em>、<label>。

  • 块级元素：

    • 独占一行，通常是容器。
    • 常见：<div>、<p>、<h1>~<h6>、<section>、<article>、<ul>、<li>。

  • 空元素：

    • 没有闭合标签，只有单个标签。
    • 常见：<img>、<input>、<br>、<hr>、<meta>。

9. HTML 中，title 与 h1 标签的区别是什么?

  • title 标签：

    • 定义网页的标题，显示在浏览器标签栏。
    • 对 SEO 友好，用于搜索引擎结果的标题。
    • 示例：
      <title>我的网页标题</title>

  • h1 标签：

    • 表示页面的主要标题。
    • 用于内容层次结构，通常一个页面只有一个 h1。
    • 示例：
      <h1>欢迎来到我的网站</h1>

10. Canvas 和 SVG 有什么区别?

  • Canvas：

    • 基于像素的绘图。
    • 提供动态绘制能力，但不易修改内容。
    • 使用 JavaScript 绘制，适合实时动画和复杂图像处理。
    • 示例：
      <canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 150, 75);
</script>

  • SVG：

    • 基于 XML 的矢量图形。
    • 内容可以通过 DOM 轻松修改和操作。
    • 适合静态图形或需要高分辨率的图形。
    • 示例：
      <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

  • 区别总结：

    • Canvas 注重像素，适合动画；SVG 注重结构，适合静态矢量图形。

如果需要进一步展开或补充某些问题，可以继续探讨！
以下是对这些 CSS 和 JavaScript 面试问题的详细解答：

1. 有哪些 CSS 选择器? 请分别介绍

CSS 选择器用于选择 HTML 元素以应用样式。常见选择器有：

  • 通配符选择器 (*)：

    • 选择所有元素。
    • 示例：
      * {
  margin: 0;
  padding: 0;
}

  • 类型选择器：

    • 选择特定标签的元素。
    • 示例：
      p {
  color: blue;
}

  • 类选择器 (.)：

    • 选择特定类的元素。
    • 示例：
      .classname {
  font-size: 14px;
}

  • ID 选择器 (#)：

    • 选择特定 ID 的元素。
    • 示例：
      #idname {
  background-color: yellow;
}

  • 属性选择器：

    • 根据属性值选择元素。
    • 示例：
      input[type="text"] {
  border: 1px solid gray;
}

  • 后代选择器 (A B)：

    • 选择 B 元素，前提是它是 A 元素的后代。
    • 示例：
      div p {
  color: green;
}

  • 子选择器 (A > B)：

    • 选择 A 元素的直接子元素 B。
    • 示例：
      ul > li {
  list-style: none;
}

  • 相邻兄弟选择器 (A + B)：

    • 选择紧接在 A 后面的 B 元素。
    • 示例：
      h1 + p {
  font-size: 12px;
}

  • 通用兄弟选择器 (A ~ B)：

    • 选择与 A 同级的所有 B 元素。
    • 示例：
      h1 ~ p {
  color: gray;
}

  • 伪类选择器：

    • 选择元素的特定状态。
    • 示例：
      a:hover {
  text-decoration: underline;
}

  • 伪元素选择器：

    • 选择元素的特定部分。
    • 示例：
      p::first-line {
  font-weight: bold;
}

2. 如何计算 CSS 的优先级?

CSS 优先级是用数字计算的，规则如下：

  1. 行内样式：1000
  2. ID 选择器：100
  3. 类选择器、伪类、属性选择器：10
  4. 标签选择器、伪元素：1
  5. 通配符、继承、默认样式：0

计算优先级的示例：

/* 优先级为：10 (类选择器) */
.class {
  color: red;
}

/* 优先级为：100 (ID 选择器) */
#id {
  color: blue;
}

/* 优先级为：101 (ID + 标签选择器) */
#id p {
  color: green;
}

规则：

  • 优先级高的样式覆盖优先级低的。
  • 同优先级时，后出现的覆盖前面的。

3. CSS 中可继承与不可继承属性有哪些?

  • 可继承属性：

    • 文本相关属性：
      • color
      • font 系列：font-family、font-size、font-style 等。
      • visibility
      • letter-spacing、word-spacing。
    • 默认行为：通过继承从父级传递到子级。

  • 不可继承属性：

    • 盒模型相关属性：
      • margin
      • padding
      • border
      • width、height
      • box-shadow
    • 布局相关属性：
      • display
      • position
      • z-index
      • overflow

  • 强制继承：

    • 对于不可继承属性，可以通过 inherit 强制继承：
      div {
  width: inherit;
}

4. CSS 中 display 属性的值及其作用

display 属性决定元素的显示方式。常见值：

  1. block：

    • 块级元素，独占一行。
    • 示例：
      div {
  display: block;
}

  2. inline：

    • 行内元素，与其他元素共享一行。
    • 示例：
      span {
  display: inline;
}

  3. inline-block：

    • 具有行内特性，但可以设置宽高。
    • 示例：
      img {
  display: inline-block;
}

  4. none：

    • 隐藏元素，不占据空间。
    • 示例：
      p {
  display: none;
}

  5. flex：

    • 设为弹性布局容器。
    • 示例：
      div {
  display: flex;
}

  6. grid：

    • 设为网格布局容器。
    • 示例：
      div {
  display: grid;
}

5. 使用 link 和 @import 引用 CSS 的区别

  1. <link> 标签：

    • 在 HTML 文件中引入 CSS 文件。
    • 优点：支持并行加载，适合现代浏览器。
    • 示例：
      <link rel="stylesheet" href="style.css">

  2. @import 规则：

    • 在 CSS 文件中导入另一个 CSS 文件。
    • 缺点：浏览器需要解析 CSS 文件后再加载导入的文件，加载速度较慢。
    • 示例：
      @import url("style.css");

6. JavaScript 有哪些数据类型? 它们的区别是什么?

  • 基本数据类型 (Primitive Types)：

    • string、number、bigint、boolean、undefined、symbol、null。
    • 特点：不可变、存储在栈中。

  • 引用数据类型 (Reference Types)：

    • object (包括数组、函数等)。
    • 特点：可变、存储在堆中。

7. 如何判断 JavaScript 变量是数组?

  1. Array.isArray() (推荐)：

    Array.isArray([1, 2, 3]); // true

  2. instanceof：

    [1, 2, 3] instanceof Array; // true

  3. Object.prototype.toString：

    Object.prototype.toString.call([1, 2, 3]); // "[object Array]"

8. JavaScript 中 null 和 undefined 的区别是什么?

  • null：

    • 表示一个空的或无效的对象引用。
    • 需要手动赋值：
      let value = null;

  • undefined：

    • 表示变量未初始化或不存在。
    • 系统自动赋值：
      let value; // 默认是 undefined

9. typeof null 的结果是什么? 为什么?

  • 结果：
    typeof null; // "object"
  • 原因：
    这是 JavaScript 的一个历史遗留问题，null 最初被设计为对象的特殊值，因此 typeof null 返回 "object"。

10. typeof 和 instanceof 有什么区别?

  • typeof：

    • 检测变量的数据类型。
    • 适合检查基本数据类型。
    • 示例：
      typeof 42; // "number"

  • instanceof：

    • 检测对象是否是某个构造函数的实例。
    • 示例：
      [] instanceof Array; // true

总结：

  • typeof 主要用于基础类型判断。
  • instanceof 用于引用类型判断，尤其是继承关系的判断。
  • 以下是对这些 JavaScript 面试问题的详细解答：

1. 为什么 JavaScript 中 0.1 + 0.2 !== 0.3，如何让其相等?

原因：
  • JavaScript 使用 IEEE 754 双精度浮点数来表示数字，这种表示方式无法精确存储某些小数，例如 0.1 和 0.2。
  • 计算过程中的精度损失导致：
    0.1 + 0.2; // 0.30000000000000004
解决方法：

  1. 使用 toFixed() 或 toPrecision()：

    • 将结果四舍五入到指定的小数位数。
    (0.1 + 0.2).toFixed(1); // "0.3"

  2. 使用乘除法避免小数计算：

    • 先将数字放大为整数计算，再缩小。
    (0.1 * 10 + 0.2 * 10) / 10 === 0.3; // true

  3. 使用 EPSILON 判断：

    • JavaScript 提供 Number.EPSILON 表示最小可区分值。
    Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON; // true

2. 说说你对 fetch 的理解，它有哪些优点和不足?

fetch 是什么?
  • fetch 是现代浏览器提供的原生 API，用于发起 HTTP 请求，返回一个基于 Promise 的结果。
优点：

  1. 语法简单：

    • 使用 Promise，代码更清晰。
    fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

  2. 原生支持：

    • 内置支持，不需要额外的库。

  3. 可扩展性：

    • 支持各种 HTTP 方法、头部设置、跨域请求等。

  4. 流式响应：

    • 支持 ReadableStream，适合处理大文件。
不足：

  1. 不支持超时控制：

    • 需要手动实现超时逻辑。
    const controller = new AbortController();
setTimeout(() => controller.abort(), 5000); // 超时 5 秒
fetch(url, { signal: controller.signal });

  2. 错误处理复杂：

    • fetch 仅在网络错误时抛出异常，HTTP 状态码错误（如 404、500）不会自动触发 catch。
    fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error ' + response.status);
    }
    return response.json();
  });

  3. 浏览器兼容性：

    • IE 不支持，需要 polyfill。

3. JavaScript 中 Object.keys 的返回值是无序的吗?

是否有序：
  • 根据规范：
    1. 如果对象的属性是数字键（索引），Object.keys 返回的数组按 升序 排列。
    2. 其他非数字键的属性按 插入顺序 返回。
  • 示例：
    const obj = { 1: 'one', 3: 'three', 2: 'two', a: 'A', b: 'B' };
console.log(Object.keys(obj)); // ["1", "2", "3", "a", "b"]

4. JavaScript 的 BigInt 和 Number 类型有什么区别?

区别：

  1. 表示范围：

    • Number：安全整数范围为 -2^53 ~ 2^53（由 Number.MAX_SAFE_INTEGER 定义）。
    • BigInt：支持任意大小的整数。

  2. 操作：

    • BigInt 无法与 Number 混合运算。
    1n + 2; // TypeError
1n + BigInt(2); // 3n

  3. 精度：

    • Number 是浮点类型，可能有精度损失。
    • BigInt 精确表示整数。

  4. 性能：

    • BigInt 操作效率较低。
示例：
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(9007199254740991 + 1); // 9007199254740992 (精度丢失)
console.log(9007199254740991n + 1n); // 9007199254740992n (精确)

5. 什么是 JavaScript 的尾调用? 使用尾调用有什么好处?

尾调用：
  • 尾调用是指一个函数的最后一步调用另一个函数。
  • 尾调用条件：
    1. 调用是函数的最后一步。
    2. 返回调用的结果。
好处：
  • 减少内存占用：
    • 避免多余的调用栈帧，提升性能。
    • 对递归函数尤为重要（即尾递归优化）。
示例：

  • 普通递归（会累积调用栈）：

    function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1); // 不是尾调用
}

  • 尾递归（优化调用栈）：

    function factorial(n, acc = 1) {
  if (n === 1) return acc;
  return factorial(n - 1, acc * n); // 尾调用
}

6. 使用 let 全局声明变量，能通过 window 对象取到吗?

  • 答案：不能。

  • 原因：

    • 使用 let 或 const 声明的全局变量不会成为 window 对象的属性。
    • 示例：
      let x = 10;
console.log(window.x); // undefined

  • 对比：

    • 使用 var 声明的全局变量会成为 window 对象的属性。
    var y = 20;
console.log(window.y); // 20

7. let、const 和 var 的区别是什么?

1. var：
  • 作用域： 函数作用域。
  • 变量提升： 会提升至作用域顶部，默认值为 undefined。
  • 可重复声明： 可以在同一作用域内多次声明。
2. let：
  • 作用域： 块作用域。
  • 变量提升： 也会提升，但在提升前无法访问（称为“暂时性死区”）。
  • 不可重复声明： 同一作用域内不允许重复声明。
3. const：
  • 作用域： 块作用域。
  • 常量： 声明时必须初始化，值不能重新赋值（对象属性可以修改）。
  • 不可重复声明： 同一作用域内不允许重复声明。

8. 说说你对 JS 作用域的理解?

1. 什么是作用域?

作用域是指代码中变量、函数或对象的可访问范围。

2. 分类：

  1. 全局作用域：

    • 定义在任何函数或块外的变量，具有全局可访问性。
    • 示例：
      var globalVar = "I am global";

  2. 函数作用域：

    • 使用 var 声明的变量在函数内部是局部的。
    • 示例：
      function scopeTest() {
  var localVar = "I am local";
  console.log(localVar);
}

  3. 块作用域：

    • 使用 let 或 const 声明的变量只能在声明的块中访问。
    • 示例：
      if (true) {
  let blockVar = "I am block scoped";
  console.log(blockVar);
}
3. 闭包与作用域：
  • 闭包是函数能够“记住”并访问其定义时的作用域。
  • 示例：
    function outer() {
  let outerVar = "I am outer";
  return function inner() {
    console.log(outerVar); // 闭包访问
  };
}
const fn = outer();
fn(); // "I am outer"

    1. ES6 箭头函数和普通函数有什么区别?

1.1 语法上的区别：
  • 箭头函数更简洁，不需要 function 关键字：
    // 普通函数
function sum(a, b) {
  return a + b;
}

// 箭头函数
const sum = (a, b) => a + b;
1.2 特性上的区别：

  1. this 绑定规则：

    • 箭头函数没有自己的 this，会捕获其定义时的上下文 this。
    • 普通函数的 this 根据调用方式动态绑定。
    const obj = {
  value: 10,
  arrowFunc: () => this.value, // 捕获定义时的上下文
  normalFunc() {
    return this.value; // 根据调用时绑定
  },
};

console.log(obj.arrowFunc()); // undefined (指向全局或模块的 this)
console.log(obj.normalFunc()); // 10

  2. arguments 对象：

    • 箭头函数没有 arguments 对象，可以通过剩余参数代替。
    • 普通函数有 arguments，可以访问函数的实际参数。
    const arrowFunc = () => console.log(arguments); // Error
function normalFunc() {
  console.log(arguments); // 可用
}

  3. 作为方法或事件处理函数：

    • 箭头函数的 this 不会改变，适合绑定事件。
    • 普通函数会动态绑定，可能需要手动处理 this。
    const obj = {
  value: 42,
  handler: () => console.log(this.value), // 指向全局或模块
};
document.body.addEventListener('click', obj.handler);

  4. 是否可作为构造函数：

    • 箭头函数不能作为构造函数。
    • 普通函数可以通过 new 操作符生成实例。

2. ES6 箭头函数能当构造函数吗?

答案：不能。
  • 箭头函数没有 [[Construct]] 内部方法，无法用 new 操作符调用。
  • 示例：
    const Arrow = () => {};
const obj = new Arrow(); // TypeError: Arrow is not a constructor

3. ES6 有哪些新特性?

  1. 变量声明：let 和 const

    • 块作用域，避免变量提升。
    • 示例：
      let a = 10;
const b = 20;

  2. 箭头函数

    • 简洁语法，自动绑定 this。
    • 示例：
      const add = (a, b) => a + b;

  3. 模板字符串

    • 支持多行和嵌入表达式。
    • 示例：
      const greeting = `Hello, ${name}`;

  4. 解构赋值

    • 解构对象和数组。
    • 示例：
      const [a, b] = [1, 2];
const { x, y } = { x: 3, y: 4 };

  5. 展开运算符 ...

    • 用于复制、合并或解构。
    • 示例：
      const arr = [...arr1, ...arr2];

  6. 默认参数

    • 函数参数支持默认值。
    • 示例：
      const greet = (name = 'Guest') => `Hello, ${name}`;

  7. 类和继承

    • 新增 class 和 extends。
    • 示例：
      class Person {
  constructor(name) {
    this.name = name;
  }
}
class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}

  8. 模块化

    • 使用 import 和 export。
    • 示例：
      import { foo } from './module.js';
export const bar = 42;

  9. Promise

    • 用于异步编程。
    • 示例：
      const promise = new Promise((resolve, reject) => {
  resolve('Success');
});

  10. Symbol 和 Map/Set

    • 新的数据类型和数据结构。
    • 示例：
      const sym = Symbol('id');
const map = new Map();

4. TypeScript 有哪些常用类型?

  1. 基本类型：

    • string, number, boolean, null, undefined, any, void, never.

  2. 数组类型：

    • number[] 或 Array<number>。
    • 示例：
      const nums: number[] = [1, 2, 3];

  3. 元组类型：

    • 固定长度、已知类型的数组。
    • 示例：
      const tuple: [number, string] = [42, 'Hello'];

  4. 枚举类型：

    • 定义一组命名常量。
    • 示例：
      enum Direction {
  Up,
  Down,
  Left,
  Right,
}

  5. 对象类型：

    • 定义对象结构。
    • 示例：
      interface Person {
  name: string;
  age: number;
}

  6. 联合类型：

    • 变量可为多种类型之一。
    • 示例：
      let value: string | number;

  7. 类型别名：

    • 定义自定义类型。
    • 示例：
      type ID = string | number;

5. 什么是 TypeScript 的对象类型? 怎么定义对象类型?

对象类型定义：
  • 在 TypeScript 中，对象类型是描述对象结构的类型。
  • 可以使用 interface 或 type 定义对象类型。
定义方式：

  1. 使用接口 (interface)：

    interface Person {
  name: string;
  age: number;
}

const user: Person = {
  name: 'Alice',
  age: 25,
};

  2. 使用类型别名 (type)：

    type Person = {
  name: string;
  age: number;
};

const user: Person = {
  name: 'Bob',
  age: 30,
};

  3. 嵌套对象类型：

    interface Address {
  city: string;
  zipCode: number;
}

interface Person {
  name: string;
  address: Address;
}

const user: Person = {
  name: 'Charlie',
  address: {
    city: 'New York',
    zipCode: 10001,
  },
};

  4. 可选属性和只读属性：

    interface Person {
  name: string;
  age?: number; // 可选
  readonly id: string; // 只读
}

const user: Person = {
  name: 'Diana',
  id: '12345',
};

// user.id = '54321'; // Error: Cannot assign to 'id' because it is a read-only property

http://www.kler.cn/a/446195.html

相关文章：

  • 【集合】Java 8 - Stream API 17种常用操作与案例详解
  • lambda初探（一）
  • 音频接口：PDM TDM128 TDM256
  • 使用 UniApp 在微信小程序中实现 SSE 流式响应
  • 拼多多电子面单接入：常见问题及专业解决方案
  • 基于Arduino的平衡车机械臂
  • linux-多线程
  • 随手记：微信小程序穿透组件样式穿不过去，样式隔离
  • 【Spring】Spring的模块架构与生态圈—数据访问与集成(JDBC、ORM、Transactions)
  • ML 系列：第 41节 - 假设检验简介
  • html+css网页设计 旅游 移动端 雪花旅行社4个页面
  • 数据库基础-索引
  • Windows11 家庭版安装配置 Docker
  • 11_HTML5 拖放 --[HTML5 API 学习之旅]
  • 51c大模型~合集93
  • 电子电气架构---基于PREEvision的线束设计工作流程优化
  • .net core在linux导出excel,System.Drawing.Common is not supported on this platform
  • HTML、CSS页面资料库
  • 如何写一个转盘
  • 用C#绘制曼德布洛集分形
  • vue项目 中 asstes文件夹 与 static文件夹 的联系与区别
  • React 底部加载组件(基于antd)
  • String.prototype.padStart() 方法来实现日不足两位时补充零
  • 算法基础——递归
  • 最新 neo4j 5.26版本下载安装配置步骤【附安装包】
  • 梳理你的思路(从OOP到架构设计)_介绍GoF设计模式