【DAY37】HTML-CSS-JS基本操作复习巩固

JavaScript 的 Generator 函数是 ES6 新增的重要特性之一，它允许开发人员编写像迭代器一样的函数，控制函数的执行流程并可以暂停和继续执行函数，这使得开发人员可以非常方便地写出复杂且高效的异步代码。

1. Generator 函数的定义

Generator 函数使用 function* 语法定义，函数体中包含使用 yield 语句定义的“中断点”，这些中断点会让函数在执行过程中暂停，以等待下一次被调用继续执行。

以下是一个简单的 Generator 函数的示例：

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator();
console.log(gen.next().value); // 输出 1
console.log(gen.next().value); // 输出 2
console.log(gen.next().value); // 输出 3

在上面的示例中，Generator 函数 generator() 定义了 3 个中断点，分别是 yield 1、yield 2 和 yield 3。在调用 generator() 函数时，函数体并不会立即执行，而是返回一个迭代器对象 gen。调用 gen.next() 方法后，迭代器会一步步执行到下一个中断点，运行并返回中断点后的值，以此类推。

1. Generator 函数的特点

• 可以暂停函数、恢复函数的运行；
• 每次 yield 关键字可以返回一个可选的值，这个值会被返回给 next() 方法；
• 可以返回无穷的值，并不需要将所有的值都计算出来；
• 可以通过 throw() 方法抛出异常；
• 可以通过 return() 方法结束函数执行。

1. Generator 函数的应用

Generator 函数可以用于实现协程、异步编程、事件循环等，在实际开发中有着广泛的应用。特别是在异步编程中，通过使用 Generator 函数和基于 Promise 的异步编程方式结合使用，可以避免回调地狱、提高代码的可读性和可维护性。

例如，以下是一个使用 Generator 函数和 Promise 实现异步编程的示例：

function* generator() {
  try {
    const result1 = yield fetch('https://api.example.com/data1');
    const result2 = yield fetch('https://api.example.com/data2');
    const result3 = yield fetch('https://api.example.com/data3');
    console.log(result1, result2, result3);
  } catch (err) {
    console.error(err);
  }
}

function run(gen) {
  const itr = gen();
  
  function next(value) {
    const result = itr.next(value);
    if (result.done) return result.value;
    result.value.then(next).catch(itr.throw);
  }
  
  next();
}

run(generator);

在上面的示例中，generator() 函数定义了 3 个异步操作，通过 yield 暂停函数的执行。在 run() 函数中，通过 itr.next() 方法逐步执行 generator() 中的异步操作。

在每个异步操作的 Promise 对象执行成功后，next() 方法会将异步操作的结果通过 itr.next() 方法返回给 generator() 函数，并将结果传递给 yield 语句，并触发继续执行 generator() 函数的操作。如果异步操作执行失败，则通过 catch 捕获错误并停止执行。

通过使用 Generator 函数和 run() 函数，可以使异步操作按照预期的顺序执行，并保持代码的清晰和简洁。

Async/await 是 ES8/ES2017 引入的一项 JavaScript 语言特性，作为 Promise 的语法糖，它使得异步代码看起来更像同步代码，更加易于编写和理解。

2.async/await 的基本用法

使用 async/await 来处理异步操作时，我们需要使用 async 关键字来声明一个异步函数。在异步函数内部，我们可以使用 await 关键字等待 Promise 对象的结果，而不需要像 Promise 那样使用 then() 回调函数处理异步操作。

以下是一个简单的使用 async/await 的示例：

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

getData().then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

在上面的代码中，getData() 函数使用 async 关键字声明为一个异步函数，函数内部使用 await 关键字等待 fetch() 和 response.json() 异步操作的结果，等待 Promise 对象 resolved 后，将结果赋给变量 data 并返回。在调用 getData() 函数时，使用 then() 和 catch() 处理 Promise 的 resolved 和 rejected 状态。

1. async/await 的特点

• 使异步操作变得更加易于编写和理解，使异步代码看起来更像同步代码；
• 采用函数和变量的方式来管理 Promise 对象的状态和值，避免了 Promise 嵌套带来的可读性问题；
• 可以被 try/catch 来处理异常；
• 可以同时等待多个异步操作的完成。
• 3。AJAX：

AJAX（Asynchronous JavaScript and XML）是用于创建异步 Web 应用程序的一种技术。它使用 XMLHttpRequest 对象来与服务器交换数据。通过 AJAX，可以在不重载整个页面的情况下更新部分页面内容。使用 AJAX，可以使 Web 应用程序更加快速、动态和用户友好。

通常，用于与服务器进行通信的数据格式是 JSON，但也可以使用其他格式如 XML、HTML 或纯文本。

let xhr = new XMLHttpRequest();
xhr.open(method, URL, [async, user, password])

 method —— HTTP 方法。通常是 "GET" 或 "POST"。
URL —— 要请求的 URL，通常是一个字符串，也可以是 URL 对象。
async —— 如果显式地设置为 false，那么请求将会以同步的方式处理，我们稍后会讲到它。
user，password —— HTTP 基本身份验证（如果需要的话）的登录名和密码。

xhr.onload = function() {
  alert(`Loaded: ${xhr.status} ${xhr.response}`);
};

xhr.onerror = function() { // 仅在根本无法发出请求时触发
  alert(`Network Error`);
};

xhr.onprogress = function(event) { // 定期触发
  // event.loaded —— 已经下载了多少字节
  // event.lengthComputable = true，当服务器发送了 Content-Length header 时
  // event.total —— 总字节数（如果 lengthComputable 为 true）
  alert(`Received ${event.loaded} of ${event.total}`);
};

上面这段代码是一个 XMLHttpRequest 对象的事件处理函数，包括 onload、onerror 和 onprogress 三个事件。解释如下：

1. xhr.onload 事件处理函数：在 XMLHttpRequest 请求完成后（ readyState = 4）触发，表示服务端已经响应了请求。在该函数中，我们可以获取响应的状态码 xhr.status 以及响应体 xhr.response，通常使用这些数据来更新页面的内容。

2. xhr.onerror 事件处理函数：表示无法满足请求，通常是网络连接方面的错误。在该函数中，我们可以处理无法发出请求的错误，例如网络连接问题等。

3. xhr.onprogress 事件处理函数：在请求过程中，定期触发，表示接收到了一部分响应数据。在该函数中，我们可以定期获取请求数据的下载进度，包括 event.loaded 已经下载的字节数和 event.total 总共需要下载的字节数，以此来实现一些高级的数据请求和进度显示效果。

需要注意的是，XHR 对象的事件处理函数需要在发送请求之前设置，以便在请求过程中自动调用。在这种情况下，我们可以使用 XMLHttpRequest.prototype 实例中的方法来添加事件处理程序。例如：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data.json');
xhr.addEventListener('load', function() {
  alert(`Loaded: ${xhr.status} ${xhr.response}`);
});
xhr.addEventListener('error', function()

4.DOM 操作：

DOM（Document Object Model）是指将 HTML 或 XML 文档作为一个树形结构表示的模型。文档的每个部分都可以被视为一个节点，节点的关系构成了整个文档的层次结构。

在 JavaScript 中，可以使用 DOM API 对页面中的元素进行访问、修改、添加或删除。例如，可以使用 document.createElement() 创建新元素，使用 element.appendChild() 向父元素添加子元素，使用 element.removeChild() 删除子元素等。

5.BOM 操作：

BOM（Browser Object Model）是指浏览器对象模型，它提供了访问浏览器窗口和框架的对象，也提供了一些用于查询、操作浏览器功能的方法和属性。

在 JavaScript 中，可以使用 BOM API 访问浏览器窗口和框架，例如 window 对象和 location 对象等。可以使用这些对象的方法和属性，例如 window.open() 打开新窗口，使用 location.href 修改 URL 等。BOM API 还提供了一些事件供开发人员监听，例如窗口大小改变、鼠标单击等。

需要注意的是，由于浏览器的不同实现可能存在差异，因此在编写跨浏览器代码时，应该尽量避免直接使用 BOM 和 DOM API，而应该使用 JavaScript 库或框架，这些库和框架已经解决了大部分的浏览器兼容性问题。

1.类（Class）：

类是 JavaScript 中实现面向对象编程的机制之一，使用 class 关键字定义一个类，通过定义类中的属性和方法，可以通过创建实例来使用类。类提供了一种抽象的概念，可以帮助我们更好地组织和管理代码。

例如，在下面的示例中，我们可以定义一个名为 Person 的类，它有一个构造函数和一个 greet() 方法：

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const tom = new Person('Tom');
tom.greet(); // 输出 "Hello, my name is Tom"

2.函数（Function）：

函数是 JavaScript 中可执行代码的基本单位之一，我们可以定义有参数和没有参数的函数，有返回值和没有返回值的函数。函数可以存储在变量、数组和对象中，并作为另一个函数的参数来使用。JavaScript 函数也支持闭包的特性，可以保留外部函数作用域中的变量和状态。

例如，以下是一个简单的 JavaScript 函数示例：

function add(a, b) {
  return a + b;
}

const sum = add(1, 2); // sum = 3

3.对象（Object）：

在 JavaScript 中，对象是一种数据类型，代表一个实体或物体，并存储有关该实体的相关信息。对象由一组键值对来表示，每个键值对称为对象的属性。属性的值可以是基本类型、函数、其他对象等。

例如：

const person = {
  name: 'Tom',
  age: 20,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
person.greet(); // 输出 "Hello, my name is Tom"

4.实例（Instance）：

实例是一个类被创建后，通过该类构造函数创建的对象。实例化过程涉及到为对象分配内存并调用构造函数。每个实例都具有与类定义中指定的属性和方法相同的属性和方法。可以创建任意数量的实例，并且每个实例都是相互独立的。

例如，以下是创建 Person 类的实例 tom：

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const tom = new Person('Tom');
tom.greet(); // 输出 "Hello, my name is Tom"

5.泛型（Generics）：

泛型是在编程语言中实现算法和数据结构时广泛使用的一项技术。泛型允许开发人员编写、使用可重用的代码，从而支持类型不必紧密绑定到特定类型上的编程。在 JavaScript 中，泛型通常会使用变量来定义类型并抽象算法或数据结构。

例如，以下是一个使用泛型来创建一个可重用的数组工具类 ArrayUtilities 的示例：

class ArrayUtilities {
  static reverse(array: T[]): T[] {
    return array.reverse();
  }

  static shuffle(array: T[]): T[] {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }
}

const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = ArrayUtilities.reverse(numbers); // [5, 4, 3, 2, 1]
const shuffledNumbers = ArrayUtilities.shuffle(numbers); // e.g [2, 5, 4, 1, 3]

6.继承（Inheritance）：

继承是一种面向对象编程的概念，它允许派生一个类，该类继承基类的属性和方法，并且可以添加新的属性和方法。在 JavaScript 中，可以使用继承来重用代码和避免重复编写已有的代码。

例如，以下是一个使用继承创建 Person 类的子类 Student 的示例：

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in ${this.grade} grade`);
  }
}

const tom = new Student('Tom', 5);
tom.greet(); // 输出 "Hello, my name is Tom"
tom.study(); // 输出 "Tom is studying in 5 grade"

在上面的代码中，我们使用 extends 关键字来创建 Student 类，它继承了 Person 类的属性和方法，并添加了新的 study() 方法。在 Student 类中，我们调用 super() 方法来调用 Person 类的构造函数，并为 grade 属性设置一个新的值。然后我们使用 new 关键字创建 Student 类的实例，使用 greet() 和 study() 方法，以此来测试继承效果。

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

•  声明为 HTML5 文档
•  元素是 HTML 页面的根元素
•  元素包含了文档的元（meta）数据，如  定义网页编码格式为 utf-8。