JavaScript 核心进阶模块-CSDN博客

本文链接：https://blog.csdn.net/2401_87573999/article/details/147012281

数据交换格式（JSON）

JSON是一种文本数据格式，用于前后端传输数据，长得像 JavaScript 对象（或数组）。JSON 数据是纯文本格式（即string），可以被大多数编程语言解析和生成。

支持两种主要结构：
- 对象：由键值对组成，用大括号 {} 包裹。
- 数组：由有序的值组成，用方括号 [] 包裹。
支持的数据类型：
- 字符串（"string"）
- 数字（123）
- 布尔值（true 或 false）
- 数组（[1, 2, 3]）
- 对象（{"key": "value"}）
- null（null）

JSON 不支持 undefined、Infinity、-Infinity、NaN 和函数等 JavaScript 特有的值。

类与对象的封装（class）

类（Class）是面向对象编程（OOP）中的一个核心概念，它是用来创建对象的模板。（类比python）

定义类的方法：使用 class 关键字来定义一个类，并通过 constructor 方法来定义类的构造函数（初始化对象时调用）。

class Person {
  constructor(name, age) {
    this.name = name;  // 定义属性
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person1 = new Person("Alice", 30);
person1.greet();  // 输出：Hello, my name is Alice and I'm 30 years old.

类的实例是类的具体对象。通过 new 关键字，我们可以创建类的实例，并访问其属性和方法。
```
const person2 = new Person("Bob", 25);
person2.greet();  // 输出：Hello, my name is Bob and I'm 25 years old.
```

异步编程（Promise / async-await）

异步编程允许程序在执行某些耗时操作（例如读取文件、请求网络数据）时不阻塞后续代码的执行。它使得你的代码更加高效，尤其是在处理多个并发任务时。

JavaScript 的异步编程主要通过 回调函数、Promises 和 async/await 来实现。

Promise 是一种用于表示异步操作最终完成或失败的对象（object）

let promise = new Promise((resolve, reject) => {
  let success = true;  // 模拟操作是否成功
  if (success) {
    resolve("操作成功！");
  } else {
    reject("操作失败！");
  }
});

promise
  .then(result => {
    console.log(result);  // 输出：操作成功！
  })
  .catch(error => {
    console.log(error);  // 输出：操作失败！（如果失败）
  });

resolve()：如果操作成功，调用它来改变 Promise 的状态为已解决。reject()：如果操作失败，调用它来改变 Promise 的状态为已拒绝。then()：用于处理 已解决 的 Promise，返回成功结果。catch()：用于处理 已拒绝 的 Promise，捕获错误。

async：用于定义一个异步函数。它总是返回一个 Promise 对象。
await：只能在 async 函数中使用，它会暂停代码的执行，直到 Promise 完成，并返回结果。

模块化（Module）

模块化是为了拆分大文件、复用代码、避免变量冲突。
在模块系统中，每个文件就是一个独立作用域的模块，可以导出想公开的东西，导入别的模块提供的内容。

export 是让一个模块（文件）里的变量或函数能“被外部使用”。

// utils.js
export const PI = 3.14;

export function add(a, b) {
  return a + b;
}
//PI值和函数add都被导出，可以被其他js文件导入

import则是从其他文件导入变量或函数

// main.js
import { PI, add } from './utils.js';

console.log(PI);           // 3.14
console.log(add(2, 3));    // 5

默认导出（`default export`）

一个文件只能有一个默认导出，可以随意命名接收：

// sayHi.js
export default function sayHi(name) {
  console.log("你好", name);
}

// main.js
import greet from './sayHi.js';//这里的greet可以是任意的名字，都指代函数sayHi
greet("小明"); // 你好 小明

具名导出（`named export`）

具名导出没有数量限制，导出的内容要放在{...}中

// hello.js
export default function () {
  console.log("默认导出函数");
}
export const name = "小明";

// main.js
import sayHello, { name } from './hello.js';

sayHello(); // 默认导出函数
console.log(name); // 小明

//这里sayHello是默认导出，{name}是具名导出，在这个例子中混合使用

浏览器交互基础（事件、DOM）

事件（events）

事件是用户与页面互动时触发的行为（如点击、键盘输入）。
通常用事件监听器（addEventListener）用来绑定事件，触发事件时调用相应的回调函数。
```
button.addEventListener('click', () => {
  console.log("按钮被点击了！");
});
//在js文件使用事件监听器
```
也可以使用事件属性，直接在 HTML 标签内使用 onclick 等事件属性，通常不推荐，因为它限制了多个事件处理器，且不够灵活。
```
<button onclick="alert('按钮被点击了！')">点击我</button>
```
事件是异步的（比如点击一个按钮，按钮点击后，页面的其他代码可能先执行），JS 通过事件机制来管理用户交互。

DOM（Document Object Model，文档对象模型）

DOM 是 HTML 文档的编程接口，将网页表示为一棵树。它把网页的所有内容、结构和样式，抽象为一个对象模型，允许 JavaScript 动态地操作这些内容。
```
html
 └── body
      └── div (id="container")
           └── p (Hello World!)
```
每个 HTML 元素都是一个 节点（node），可以通过 JS 操作它们。html 是树的根节点，body、div、p 都是它的子节点。每个节点都可以访问其子节点、父节点、兄弟节点等。
你可以获取、修改、删除、创建节点，通过这种方式操作网页内容、样式、事件等。
通过 动态操作 DOM，网页可以响应用户的输入，实现交互效果。

浏览器控制技巧（BOM）

BOM（Browser Object Model）是浏览器提供的 一组 JavaScript 接口，它允许你操作浏览器本身（而不是网页的内容，网页内容通过DOM操作）。通过 BOM，JS 能访问和控制浏览器的窗口、历史、位置、屏幕等属性。
BOM 并没有标准，浏览器厂商可能会有不同的实现，但大部分功能都是通用的。

例如，BOM可以使浏览器打开新窗口：

// 打开新窗口
window.open('https://www.csdn.net');