前端言语的根本才干

基础的前端三剑客HTML、CSS、JavaScript

1. HTML（超文本符号言语） ： HTML 是 Web 页面的基础结构。它用于描述网页的内容和结构。HTML 运用一系列符号（称为标签）来界说页面元素，如标题、段落、列表、图片和链接等。浏览器解析 HTML 代码，并依据标签的语义来显现页面内容。HTML 为网页供给了根本的骨架，使浏览器能够呈现文本、图画和其他媒体。
2. CSS（级联款式表） ： CSS 用于描述 HTML 元素的外观和布局。CSS 答应咱们界说如何显现 HTML 元素，例如字体、颜色、巨细、距离等。经过运用 CSS，咱们能够将款式与 HTML 结构别离，使得网站的规划和保护愈加简便。CSS 还答应咱们依据不同的设备和屏幕尺度运用不同的款式(媒体查询)，以完结呼应式规划。
3. JavaScript： JavaScript 是一种脚本言语，用于在浏览器中增加交互性和动态作用。它答应咱们编写脚原本处理用户操作，例如点击按钮、输入表单、拖动元素等。经过运用 JavaScript，咱们也能够操作 HTML 和 CSS，动态更改页面内容和款式，然后供给丰富的用户体会。JavaScript 也能够与服务器进行通讯，以便在不改写整个页面的状况下获取或提交数据（例如，经过 AJAX）。

HTML

关于HTML是什么，MDN是这样界说的：

HTML 不是一门编程言语，而是一种用于界说内容结构的符号言语。HTML 由一系列的元素组成，这些元素能够用来包围不同部分的内容，使其以某种办法呈现或许工作。一对标签能够为一段文字或许一张图片增加超链接，将文字设置为斜体，改动字号，等等。

CSS

和 HTML 相似，CSS 也不是真实的编程言语，甚至不是符号言语。它是一门款式表言语，这也便是说人们能够用它来挑选性地为 HTML 元素增加款式。

• 关于视频中说到的另一张图片，我觉得MDN供给的会更简略了解，这儿附上MDN的讲解：

整个结构称为 规矩集（一般简称“规矩”），各部分释义如下：

其他愈加细节的部分我觉得自行去查阅MDN或许W3C文档会好，这儿只摘取其间一小部分与视频中讲解有关的部分

上图符号	释义
挑选器（Selector）	HTML 元素的称号坐落规矩集开端。它挑选了一个或多个需求增加款式的元素（在这个比方中便是 p 元素）。要给不同元素增加款式只需求更改挑选器就行了
声明（Declaration）	一个独自的规矩，如 color: red; 用来指定增加款式元素的特色
特色（Properties）	改动 HTML 元素款式的途径。（本例中 color 便是 “ 元素的特色。）CSS 中，由编写人员决议修正哪个特色以改动规矩
特色的值（Property value）	在特色的右边，冒号后面即特色的值，它从指定特色的许多外观中挑选一个值（咱们除了 red 之外还有许多特色值能够用于 color ）

常见挑选器

挑选器称号	挑选的内容	示例
元素挑选器（也称作标签或类型挑选器）	所有指定 (该) 类型的 HTML 元素	p 挑选 <p>
ID 挑选器	具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）	#my-id 挑选 <p id="my-id"> 或 <a id="my-id">
类挑选器	具有特定类的元素（单一页面中，一个类能够有多个实例）	.my-class 挑选 <p class="my-class"> 和 <a class="my-class">
特色挑选器	拥有特定特色的元素	img[src] 挑选 <img src="https://www.6hu.cc/files/2023/05/1683040654-9d2c67e5f99197d.png"> 而不是 <img>
伪（Pseudo）类挑选器	特定状态下的特定元素（比方鼠标指针悬停）	a:hover 仅在鼠标指针悬停在链接上时挑选 <a>。

阅读文档

这儿他告诉了你如何阅读文档，但其实也仅仅略要的归纳了一下，且并没有给出文档的地址，这儿我进行补充：CSS Syntax (w3schools.com)

视频中的事例图片也是来自于此

W3C和W3School的差异？

1. W3C（万维网联盟）： W3C 是一个国际组织，成立于 1994 年，担任拟定和保护 Web 规范。它的方针是保证 Web 开展的长时刻可持续性和可拜访性。W3C 拟定了许多 Web 技能的规范，如 HTML、CSS、XML、SVG 等。W3C 的官方网站是 www.w3.org/。在 W3C 网站上，能够找到关于 Web 规范的具体信息和技能规范。
2. W3Schools： W3Schools 并非 W3C 的官方网站，而是一个独立的在线教育渠道。它成立于 1998 年，供给了很多关于 HTML、CSS、JavaScript 等 Web 技能的教程和实例。W3Schools 的方针是为 Web 开发者供给一个易于了解的学习资源。W3Cschools 的官方网站是 www.w3schools.com/。在 W3Cshools 网站上，能够找到关于 Web 技能的教程、示例和实践操练。

而他们最首要的差异(其实是彻底不同的两家组织，一开端学习的我一向以为他们是同一家的)：

• W3C 是一个国际组织，担任拟定和保护 Web 规范。
• W3Schools 是一个在线教育渠道，供给关于 Web 技能的教程和实例。

JavaScript

coderwhy老师从前说过了解真相才干获得真实的自由，那么了解一门言语的前生当代相同关于咱们了解它有着很棒的作用(不了解它的从前，又怎么能了解它为什么要做出这样的变化)

1. 1995 年：JavaScript 的诞生 JavaScript 最早是由 Netscape 公司的程序员 Brendan Eich 开发的，原名叫 Mocha。最初的方针是供给一种浏览器端脚本言语，用于操作 HTML 文档，增加互动性和动态作用。几个月后，Mocha 被重命名为 LiveScript，随后又改名为 JavaScript。虽然姓名里包含 “Java”，但实际上 JavaScript 和 Java 并无直接联系，这个命名更多是其时为了借助 Java 言语的热度。

2. 1996 年：ECMAScript 的诞生 为了让 JavaScript 成为一个通用的脚本言语规范，Netscape 将 JavaScript 提交给了欧洲核算机制造商协会（ECMA）。ECMA 开发了一种名为 ECMAScript 的规范化脚本言语规范。自此，JavaScript 成为 ECMAScript 规范的一种完结。

3. 1997 年：ECMAScript 1.0 发布 ECMA 发布了 ECMAScript 的第一个版别（1.0），标志着 JavaScript 言语正式成为一个独立的编程言语。

4. 1999 年：ECMAScript 3.0 发布 ECMAScript 3.0 是 JavaScript 开展历程中的一个重要版别，它引进了许多核心功用，如正则表达式、过错处理、更严格的变量声明等。

5. 2005 年：Ajax 和 Web 2.0 的鼓起 2005 年，Ajax（Asynchronous JavaScript and XML）技能鼓起，它答应在不改写整个页面的状况下进行部分数据更新，大大进步了 Web 运用的交互性。这一时期，Web 2.0 的概念开端流行，JavaScript 在 Web 开发中的地位得到了极大的提升。

6. 2009 年：ECMAScript 5 发布 ECMAScript 5 版别引进了许多新特性，如 JSON 支撑、严格方式、拜访器特色等。一同，它还优化了一些老旧的功用和语法，使得 JavaScript 愈加易用和高效。

7. 2010 年：Node.js 的诞生 2010 年，程序员 Ryan Dahl 创立了 Node.js，将 JavaScript 扩展到了服务器端。Node.js 的出现使得 JavaScript 成为一种全栈开发言语。

8. 2015 年：ECMAScript 6（ES2015）发布 ECMAScript 6（也称为 ES2015）是 JavaScript 开展史上最重要的版别之一。ES6（ECMAScript 2015）引进了许多重要的新特性，改进了 JavaScript 言语的编程方式和可读性。这些新特性包含：

   • 类（Class）语法：供给了根据原型的面向方针编程的语法糖。
   • 模块化（Module）：引进了模块化编程的概念，使得开发者能够将代码拆分为可重用的模块。
   • 箭头函数（Arrow Function）：简化了函数界说的语法，一同主动绑定 this 上下文。
   • Promise：供给了一种更好的异步编程方式，协助开发者更简略处理异步操作。
   • 解构赋值（Destructuring Assignment）：一种更简练的变量解构和赋值办法。
   • 默许参数（Default Parameters）：答应函数参数具有默许值。
   • 模板字符串（Template Literals）：供给了一种简略的字符串插值和多行字符串的表明办法。
   • 增强的方针字面量：增加了关于简写特色和办法的支撑。
   • let 和 const 关键字：引进了块级作用域，并答应更精确地声明变量和常量。

9. 2016 年至今：ECMAScript 的年度更新 自 ES6（ECMAScript 2015）发布以来，ECMAScript 规范开端了每年的更新周期。这意味着每年都会有一个新版别的 ECMAScript，其间包含一些新特性和改进。这使得 JavaScript 的开展愈加稳定和可预测。

10. 现代 Web 开发结构和库的鼓起 近年来，跟着 JavaScript 的开展，许多现代 Web 开发结构和库应运而生。这些结构和库（如 Angular、React、Vue.js 等）极大地进步了开发者的生产力，改动了 Web 开发的办法和规划。

基础语法

JavaScript的七种根本数据类型：

这些类型分为两大类：原始类型（Primitive）和方针类型（Object）。

1. Number（数字）： Number 类型用于表明整数和浮点数。在 JavaScript 中，所有数字都是双精度浮点数（64位），遵循 IEEE 754 规范。这意味着 JavaScript 中并没有真实的整数类型。另外，Number 类型还包含特别值如：Infinity（正无穷大）、-Infinity（负无穷大）和 NaN（非数值）。
2. String（字符串）： String 类型表明一串字符。在 JavaScript 中，字符串是不可变的，这意味着一旦创立了一个字符串，就不能对其内容进行修正。字符串能够用单引号、双引号或反引号（模板字符串）括起来。
3. Boolean（布尔值）： Boolean 类型只要两个值：true（真）和 false（假）。布尔值一般用于表明条件、逻辑操作或比较的成果。
4. Null（空值）： Null 类型只要一个值：null。它表明一个空值或不存在的引证。一般用于表明变量没有被赋值，或表明一个空方针。
5. Undefined（未界说）： Undefined 类型只要一个值：undefined。当一个变量声明了，但没有赋值时，其默许值为 undefined。它表明变量的值没有确认。
6. Symbol（符号）： Symbol 类型是 ECMAScript 6（ES2015）引进的新类型。Symbol 类型的值是仅有且不可变的，首要用于创立方针的仅有特色名，以避免特色名抵触。
7. Object（方针）： Object 类型用于表明杂乱的数据结构，如方针、数组和函数。方针是键值对的调集，键是字符串，值能够是任何数据类型。数组是值的有序调集，而函数是可调用的代码块。

在 JavaScript 中，原始类型（Number、String、Boolean、Null、Undefined 和 Symbol）是不可变的根本数据类型，而方针类型（Object）是可变的引证数据类型

声明赋值

//这个表达式涉及到了 JavaScript 中的变量声明、赋值操作以及类型转化
var a = 7 + "2"
//履行进程：
//首要，var a 声明了一个名为 a 的新变量。然后，履行 7 + "2" 的操作。由于其间一个操作数（"2"）是一个字符串，所以 + 会履行字符串衔接操作。在这种状况下，JavaScript 会主动将数字 7 转化为字符串 "7"(隐式转化)，然后将两个字符串衔接起来，得到新字符串 "72"。最后，将得到的字符串 "72" 赋值给变量 a。

让咱们具体分析这个表达式中的意义：

1. var：var 关键字用于声明一个变量。在这儿，var 表明咱们即将创立一个新变量。
2. a：这是咱们声明的变量的称号。变量名能够是任何有用的 JavaScript 标识符，一般用于表明该变量存储的数据的意义。
3. =：赋值操作符，用于将等号右侧的值赋给等号左侧的变量。在这儿，它表明咱们要将等号右侧的表达式的核算成果存储在变量 a 中。
4. 7：这是一个数字字面量，表明整数 7。它的类型是 Number。
5. +：这是一个加法操作符。一般，它用于对两个数字进行加法运算。可是，当它的操作数之一或两者都是字符串时，+ 会变成字符串衔接操作符。在这种状况下，它会将两个操作数衔接成一个字符串。
6. "2"：这是一个字符串字面量，表明字符 “2”。它的类型是 String。留意，这儿的 “2” 是一个字符串，而不是数字。

可是这儿我想要扩充另一个知识点，当咱们换一种方式的话，它的类型转化还会是隐式拼接字符串吗？

let a = 7 - "2"
console.log(a)//5

• a会输出5，且是Number数字类型。由于 - 操作符仅适用于数字，所以 JavaScript 会尝试将字符串 “2” 转化为数字。在这种状况下，字符串 “2” 能够成功转化为数字 2
• 经过这种系列的《黑魔法》式操作会降低可读性，所以咱们应该尽量避免这种操作

Object

在 JavaScript 中，Object（方针）是一种引证数据类型，用于表明一组键值对。方针能够用来存储和操作数据，它是 JavaScript 中最根本和重要的数据结构。

以下包含函数部分全部都是扼要归纳，深化的了解和运用场所还得经过其他视频或许文档或许项目实践去进一步学习

• 键值对（Key-Value Pair）： 方针由一组键值对组成，键是字符串，值能够是任何数据类型（包含原始类型和引证类型）。键也称为特色名（Property Name），而值称为特色值（Property Value）。键和值之间用冒号分隔，键值对之间用逗号分隔。
• 方针字面量（Object Literal）： 方针字面量是创立方针的一种简练表明办法。它运用大括号 {} 包围一组键值对。例如：

//在这个比方中，person 方针有三个特色：name、age 和 greet。name 和 age 别离存储字符串和数字，而 greet 存储一个函数
const person = {
 name: "XiaoYu",
 age: 20,
 greet: function() {
  console.log("Hello, my name is " + this.name);
  }
};

1. 特色拜访（Property Access）： 能够运用点表明法（Dot Notation）或方括号表明法（Bracket Notation）拜访方针的特色。例如：

console.log(person.name); // Output: "XiaoYu"
console.log(person["age"]); // Output: 20

2. 特色操作（Property Manipulation）： 能够经过赋值操作符为方针增加新特色，也能够经过赋值操作符修正现有特色的值。要删去方针的特色，能够运用 delete 操作符。例如：

person.gender = "Man"; // 增加新特色
person.name = "小满"; // 修正现有特色的值
delete person.gender; // 删去特色

3. 办法（Method）： 方针的特色值能够是函数。这种类型的特色称为办法（Method）。办法一般用于表明方针的行为，它们能够拜访和操作方针的其他特色。例如：

person.greet(); // Output: "Hello, my name is XiaoYu"

• this 关键字： 在方针的办法中，能够运用 this 关键字引证该方针本身。这使得办法能够拜访和操作方针的其他特色。例如，在上面的 person 方针中，greet 办法运用 this.name 拜访 name 特色。

  • this是JavaScript中的一大难点，在《你不知道的JavaScript》上卷中，将它分为了默许调用、隐式调用、显式调用、new调用四种状况，具体进程需求自行去学习，或许在我的GitHub中也有供给对应的笔记

Function

函数（Function）是一种特别的方针，它封装了一段可履行的代码。函数的首要作用是完结代码的复用、模块化和笼统。

1. 函数声明（Function Declaration）： 函数声明是界说函数的一种办法。函数声明以 function 关键字开端，后面跟着函数名、一对圆括号（包含参数列表）和一对大括号（包含函数体）

   function greet(name) {
    console.log("Hello, " + name);
   }
   

2. 函数表达式（Function Expression）： 函数表达式是另一种界说函数的办法。函数表达式将一个匿名函数赋值给一个变量。

   const greet = function(name) {
    console.log("Hello, " + name);
   };
   

3. 箭头函数（Arrow Function）： 箭头函数是 ECMAScript 6（ES2015）引进的一种简练的函数语法。箭头函数运用 => 符号，它能够使代码更简练、易读。

   const greet = (name) => {
    console.log("Hello, " + name);
   };
   

4. 参数（Parameters）和实参（Arguments）： 函数能够承受参数（Parameters）。参数是在函数声明或表达式中界说的，用于接纳调用函数时传递的实参（Arguments）。实参是在调用函数时传递给函数的值。

   function add(a, b) {
    return a + b;
   }
   ​
   const sum = add(3, 4); // 传递实参 3 和 4
   

5. 回来值（Return Value）： 函数能够回来一个值，这个值能够是任何数据类型。要回来一个值，能够在函数体内运用 return 语句。假如函数没有 return 语句或许 return 语句后面没有任何值，那么函数的回来值默许为 undefined。

   function add(a, b) {
    return a + b;
   }
   ​
   const sum = add(3, 4); // sum 将接纳回来值 7
   

6. 调用（Calling）或履行（Invoking）函数： 要调用或履行一个函数，能够运用函数名后跟一对圆括号（包含实参列表）。

   greet("Alice"); // Output: "Hello, Alice"
   

7. 作用域（Scope）： 在 JavaScript 中，函数有自己的作用域。这意味着在函数内部声明的变量和函数只能在函数内部拜访。相同，函数外部的变量和函数在函数内部也是可拜访的（除非被其他嵌套函数阻止）。

8. 闭包（Closure）： 闭包是 JavaScript 中一个强壮的特性(也是一个很难的知识点，在《你不知道的JavaScript》上卷中一样有具体介绍)。闭包是指一个函数能够拜访并操作其外部作用域中的变量，即使在外部作用域现已结束或函数已回来之后。闭包的一个常见用处是在一个函数内部创立另一个函数，这样内部函数能够拜访和操作外部函数的变量。

   function makeCounter() {
    let count = 0;
   ​
    return function() {
     count += 1;
     console.log(count);
     };
   }
   ​
   const counter = makeCounter();
   counter(); // Output: 1
   counter(); // Output: 2，数量变成2，证明上一次调用的成果并没有被垃圾回收掉
   //在这个比方中，makeCounter 函数回来一个匿名函数，这个匿名函数能够拜访和操作 makeCounter 函数内的 count 变量。即使 makeCounter 函数现已履行结束，counter（匿名函数的引证）仍然能够拜访和操作 count 变量。这便是闭包的作用。
   

9. 高阶函数（Higher-Order Function）： 高阶函数是指承受其他函数作为参数或回来一个函数作为成果的函数。高阶函数在 JavaScript 中非常常见，特别是在函数式编程中。例如，Array.prototype.map、Array.prototype.filter 和 Array.prototype.reduce 等内置函数都是高阶函数。

   const numbers = [1, 2, 3, 4, 5];
   ​
   const doubled = numbers.map(function(num) {
    return num * 2;
   });
   ​
   console.log(doubled); // Output: [2, 4, 6, 8, 10]
   //在这个比方中，咱们运用 map 高阶函数将一个数组中的每个元素乘以 2。map 函数承受一个函数作为参数，并将这个函数运用于数组的每个元素。这个在React中会经常出现，用来代替for循环
   

三剑客在浏览器中的运转

1. HTTP 恳求：浏览器向服务器发送恳求，获取网页的 HTML、CSS、JavaScript 文件以及其他资源（如图片、字体等）。
2. 构建 DOM 树：浏览器解析 HTML 文件，构建一个 DOM（Document Object Model）树。DOM 树是一个以节点方式表明的 HTML 文档结构。每个节点代表 HTML 文档中的一个元素、特色或文本。
3. 核算 CSS 树：浏览器解析 CSS 文件，构建一个 CSSOM（CSS Object Model）树。CSSOM 树是一个以节点方式表明的 CSS 规矩结构。
4. 排版（Layout）：浏览器将 DOM 树和 CSSOM 树结合，生成一个烘托树（Render Tree）。烘托树包含了 DOM 中的可见元素及其对应的 CSS 规矩。接着，浏览器会核算烘托树中每个节点的方位和巨细，这个进程称为排版或布局（Layout）。
5. 烘托组成：浏览器将烘托树中的各个节点分层，创立烘托层（Render Layers）。每个层包含一个或多个节点，具有独立的制作和组成上下文。
6. 制作（Painting）：浏览器依据烘托层制作每个节点的视觉作用（如文本、颜色、图画、边框、暗影等），生成位图（Bitmaps）。制作进程或许会在 GPU（图形处理器）上完结，以进步功用。
7. 组成（Compositing）：浏览器将烘托层的位图组成为一个完整的屏幕图画，然后显现在屏幕上。组成进程一般由 GPU 完结，以完结高效的图画组成。

在这个进程中，JavaScript 代码的解析与履行或许穿插在各个阶段，由于 JavaScript 能够操作 DOM、CSSOM 和浏览器 API，然后改动页面的内容、款式和交互行为。这些变化或许需求浏览器从头履行排版、制作和组成等使命。因而，在编写 JavaScript 代码时，应尽量削减对 DOM 和 CSSOM 的操作，以进步页面功用。

Browser(V8引擎工作流程)

JavaScript本质上也是一段文本，需求经过解说器才干够运转

1. Source code：JavaScript 源代码作为 V8 引擎的输入。
2. Parser：V8 引擎将 JavaScript 源代码解析成一个笼统语法树（Abstract Syntax Tree，简称 AST）。AST 是源代码的一种树状表明，其间每个节点表明一个源代码中的语法结构（如变量声明、函数调用等）。
3. AST：生成的笼统语法树将用于接下来的编译和优化进程。
4. Ignition：V8 引擎中的 Ignition 是一个解说器（Interpreter），它担任将 AST 转化为字节码（Bytecode）。字节码是一种中心表明，比源代码更接近机器代码，但仍具有渠道无关性。
5. Bytecode Execute：Ignition 解说器履行字节码，完结 JavaScript 源代码的功用。在履行字节码的进程中，V8 会搜集代码的运转时信息（如类型信息等），用于后续的优化进程。
6. Feedback：V8 引擎搜集的运转时信息（如变量类型、函数调用频率等）称为反应（Feedback）。这些信息将用于指导后续的即时编译（JIT）进程，生成更高效的机器代码。
7. TurboFan：V8 引擎中的 TurboFan 是一个即时编译器（Just-In-Time Compiler，简称 JIT），它担任将字节码优化为机器代码。TurboFan 会依据搜集到的反应信息对代码进行特定的优化（如内联函数、消除数组边界查看等），生成功用更好的机器代码。
8. Machine code (Intel, ARM, MIPS)：TurboFan 生成的机器代码是针对特定处理器架构（如 Intel x86/x64、ARM、MIPS 等）的低级代码。这些机器代码能够直接在方针处理器上履行，完结更高的功用。

V8 引擎经过这个工作流程完结了 JavaScript 源代码的高效履行。在实际运用进程中，V8 会依据代码的运转状况动态调整优化战略，保证在不同场景下都能完结最佳功用。

前端言语的协作配合

前端协作开展史

从下面这张图片中，咱们能够看到我现在编写笔记用的markdown语法早在2005年前就诞生了，直到现在依旧是干流便利的编写笔记的好东西。而JavaScript2010年前的技能根本上没有活到现在的，足以体现其一日千里的变化，现在则是Vue、React与Angular各占半边天，越靠近现在的节点，东西类的开展像webpack就越发的繁荣。

经过观察，咱们能发现作为基础的HTML、CSS、JavaScript在各自的道路上跟着时刻的流逝越发的深化，然后诞生在那个时刻段的最佳实践方案，跨端结构、东西链都是这个最佳实践延伸出来的成果

CSS in HTML

JavaScript in HTML

JavaScript 是单线程的，意味着在一个时刻点只能履行一个使命。为了处理异步操作和事情回调，JavaScript 引进了事情循环（Event Loop）。事情循环运用使命行列（Task Queues）来办理要履行的使命。使命行列分为两种类型：宏使命行列（Macro-Task Queue）和微使命行列（Micro-Task Queue）。

1. 宏使命行列（Macro-Task Queue）： 宏使命行列寄存宏使命（Macro-Task），它们一般是由外部事情触发的较大的使命。例如：

• setTimeout 和 setInterval 的回调函数
• I/O 操作（如文件读写、网络恳求等）的回调函数
• 用户交互事情（如点击、翻滚等）的回调函数
• 其他异步 API 的回调函数

事情循环会按顺序履行宏使命行列中的使命。当一个宏使命履行结束后，事情循环会查看微使命行列，履行其间的所有使命，然后再履行下一个宏使命。

1. 微使命行列（Micro-Task Queue）： 微使命行列寄存微使命（Micro-Task），它们一般是 JavaScript 代码中产生的较小的、需求赶快履行的使命。例如：

• Promise 的 then、catch 和 finally 回调函数
• async/await
• MutationObserver 的回调函数
• 其他微使命 API

当事情循环履行一个宏使命后，它会查看微使命行列。在履行下一个宏使命之前，事情循环会一向履行微使命行列中的所有使命，直到微使命行列为空。这意味着在两个宏使命之间，JavaScript 会尽或许多地履行微使命。

事情循环的履行顺序如下：

1. 从宏使命行列中取出一个使命并履行。
2. 查看微使命行列，履行其间的所有使命。
3. 假如有必要，进行烘托操作（如更新 DOM、履行动画等）。
4. 回来第 1 步，重复履行。

经过区别宏使命和微使命，事情循环能够完结对异步操作和事情回调的有用办理。微使命行列保证了在宏使命之间能够赶快履行一些紧急的、矮小的使命，然后进步了全体功用。

• HTML相同能够写在JavaScript中，这个语法的文件后缀名是JSX，延伸的有TSX。别离表明运用JS编写和TS编写。这种 语法在React中特别常见

CSS in JavaScript

React 为了进步 CSS 款式办理的可保护性和部分性，引进了 CSS Modules 和 JSS 等技能。它们别离运用不同的办法来处理组件款式的作用规模和动态化问题。

1. CSS Modules： CSS Modules 是一种将 CSS 款式与 React 组件相关的办法。经过运用模块化的 CSS 文件，能够保证每个组件的款式都是独立的，避免款式污染和命名抵触。运用 CSS Modules 的办法如下：

（1）创立一个模块化的 CSS 文件，文件名一般以 .module.css 结尾，例如 Button.module.css：

/* Button.module.css */
.button {
 background-color: blue;
 color: white;
 padding: 10px;
}

（2）在 React 组件中，运用 import 语句导入 CSS 文件，并将其作为一个方针运用：

// Button.js
import React from 'react';
import styles from './Button.module.css';
​
const Button = ({ children, onClick }) => {
 return (
  <button className={styles.button} onClick={onClick}>
    {children}
  </button>
  );
};
​
export default Button;

经过这种办法，组件的款式将被限制在组件的作用规模内，不会影响其他组件。

2. JSS（JavaScript Style Sheets）： JSS 是一种将 CSS 款式以 JavaScript 方针的方式编写和办理的技能。它答应咱们在 JavaScript 代码中动态生成和修正款式。在 React 中，咱们能够运用 @material-ui/styles 等库来运用 JSS。以下是运用 JSS 的办法：

   （1）安装 @material-ui/styles：

   npm install @material-ui/styles
   

   （2）在 React 组件中，运用 JSS 创立款式：

   运用 JSS，咱们能够在 JavaScript 代码中直接创立和办理款式。这使得款式的动态化和保护愈加便利

   // Button.js
   import React from 'react';
   import { makeStyles } from '@material-ui/styles';
   ​
   const useStyles = makeStyles({
    button: {
     backgroundColor: 'blue',
     color: 'white',
     padding: '10px',
     },
   });
   ​
   const Button = ({ children, onClick }) => {
    const classes = useStyles();
   ​
    return (
     <button className={classes.button} onClick={onClick}>
       {children}
     </button>
     );
   };
   ​
   export default Button;
   

你不知道的HTML

HTML DTD

HTML并非图灵齐备，它仅仅一门符号言语。

标签分类

HTML body 功用性标签

只需求大致了解，不需求去背

HTML ARIA

ARIA（Accessible Rich Internet Applications）是一套让 Web 运用和网站更具可拜访性的技能规范。ARIA 经过在 HTML 中增加特定的特色，协助屏幕阅读器等辅佐技能更好地了解页面内容和交互。

了解ARlA并非仅仅为了供盲人阅读，它能够为咱们规划UI体系供给指导意义

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ARIA Example</title>
</head>
<body>
  <!--为无法经过文本内容描述的元素（如 <nav>）供给一个可拜访的标签-->
 <nav aria-label="Main Navigation">
  <ul>
   <li><a href="#home">Home</a></li>
   <li><a href="#about">About</a></li>
   <li><a href="#contact">Contact</a></li>
  </ul>
 </nav>
 <main>
  <h1 id="home">Welcome to our Website!</h1>
<!--将一个元素相关到一个或多个可见的标签元素，一般是标题元素（如 <h2>）。在这个比方中，咱们将每个 <section> 元素相关到对应的标题元素-->
  <section aria-labelledby="about-section">
   <h2 id="about-section">About Us</h2>
   <p>We are a company that specializes in creating accessible web applications.</p>
  </section>
  <section aria-labelledby="contact-section">
   <h2 id="contact-section">Contact Us</h2>
   <p>Feel free to reach out to us for any questions or inquiries.</p>
  </section>
 </main>
</body>
</html>
​

HTML的规范和特性

HTML5语义化标签

建议：用对比不必好，不必比用错好。虽然这些语义化标签姓名各不相同，但其实本质都是div标签

HTML5表单增强

1. 新的表单元素：HTML5 引进了一些新的表单元素，如 date、time、email、url 等，使得开发者能够更简略地创立各种类型的表单。
2. 主动聚集：在 HTML5 中，能够经过将 autofocus 特色增加到表单元素中，使得页面加载时主动将焦点放在指定的表单元素上，便利用户操作。
3. 表单验证：HTML5 供给了内置的表单验证功用，能够经过增加 required、pattern、min、max、step 等特色来限制表单元素的输入。在用户提交表单时，浏览器会主动验证表单内容，并在不合法时给出相应的提示信息。
4. 自界说过错提示：HTML5 供给了 oninvalid 特色，使得开发者能够自界说表单元素验证失利时的过错提示信息，增强了用户体会。
5. 表单主动保存：HTML5 答应浏览器主动保存表单数据，便利用户在下次填写相同表单时直接调用已保存的数据。
6. 支撑拖放上传文件：HTML5 的拖放功用能够使得用户直接将文件拖到表单区域，完结文件上传操作。

HTML5 存储

术语意义：

1. Cookies：Cookies 是存储在客户端核算机上的小文件，用于存储用户与网站之间的数据。常用于记录用户的登录状态、购物车内容等信息。
2. Local Storage：Local Storage 是 HTML5 新增的一种 Web 存储机制，用于在客户端存储持久化数据。与 Cookies 不同，Local Storage 的数据不会在每次恳求时被发送到服务器，而是保存在客户端的本地存储空间中。
3. Session Storage：Session Storage 与 Local Storage 相似，也是用于在客户端存储数据。不同之处在于，Session Storage 的数据只在用户会话期间有用，即在浏览器窗口或标签页封闭时主动铲除。
4. Capacity：Capacity 指的是 Local Storage 或 Session Storage 能够存储的最大数据量，一般为 5MB 到 10MB 不等。
5. Browsers：Browsers 指的是 Web 浏览器，如 Google Chrome、Firefox、Safari 等。
6. Accessible from：Accessible from 指的是能够从哪些网址拜访到 Local Storage 或 Session Storage 中的数据。一般状况下，只要在同一域名下的页面才干够拜访相同的 Local Storage 或 Session Storage 数据。
7. Expires：Expires 指的是 Cookie 的过期时刻，即 Cookie 将在何时失效。当 Cookie 的 Expires 特色为一个固定的时刻点时，该 Cookie 将在该时刻点失效；当 Expires 特色为 0 时，该 Cookie 将在浏览器封闭时失效。
8. Storage Location：Storage Location 指的是 Local Storage 或 Session Storage 的存储方位。一般状况下，Local Storage 或 Session Storage 的数据是保存在客户端的本地存储空间中，而不是发送到服务器。
9. Sent with requests：Sent with requests 指的是 Cookie 是否跟着 HTTP 恳求一同发送到服务器。一般状况下，浏览器会将 Cookie 的值增加到 HTTP 恳求头中，以便服务器进行身份验证等操作。

Cookies	Local Storage	Session Storage
Capacity	4kb	10mb	5mb
Browsers	HTML4 / HTML5	HTML5	HTML5
Accessible from	Any window	Any window	Same tab
Expires	Manually set	Never	On tab close
Storage Location	Browser and server	Browser only	Browser only
Sent with requests	Yes	No	No

HTML5 IndexedDB

IndexedDB 是 HTML5 中新增的一种客户端存储机制，用于在浏览器中存储很多的结构化数据。它是一种键值对存储办法，相似于联系型数据库，能够经过索引快速拜访数据。

IndexedDB 的首要特色包含：

1. 异步拜访：IndexedDB 的读写操作是异步进行的，不会堵塞主线程，然后进步了页面的功用。
2. 支撑事务：IndexedDB 支撑事务，能够保证数据的一致性和完整性。
3. 支撑索引：IndexedDB 支撑多个索引，能够进步数据的查询功率。
4. 可存储很多数据：IndexedDB 能够存储很多的结构化数据，不会受到存储容量的限制。
5. 支撑离线运用：IndexedDB 能够使得运用在离线状态下也能够正常工作，然后进步用户体会。

HTML5 PWA & AMP

1. PWA（Progressive Web Apps）：PWA 是一种 Web 运用程序的开发办法，旨在供给相似于原生运用程序的用户体会。它运用 Web 技能开发，能够在任何设备上运转，包含桌面、移动设备和平板电脑。PWA 具有以下特色：

   • 可靠性：PWA 能够离线运用，而且具有快速的加载速度。
   • 呼应式规划：PWA 能够自习惯不同的设备和屏幕尺度。
   • 安全性：PWA 运用 HTTPS 进行通讯，保证用户的数据和隐私得到保护。
   • 独立性：PWA 能够增加到设备的主屏幕上，就像原生运用程序一样。

2. AMP（Accelerated Mobile Pages）：AMP 是一种 Web 页面的开发办法，旨在供给快速的加载速度和优化的移动体会。它运用精简的 HTML 和 CSS，以及 AMP JavaScript 库来完结。AMP 具有以下特色：

   • 快速加载：AMP 页面能够快速加载，供给更好的用户体会。
   • 移动友好：AMP 页面被规划为移动优先，习惯各种屏幕尺度。
   • 安全性：AMP 页面运用 AMP CDN 来缓存页面，并运用 HTTPS 进行通讯。
   • 限制性：AMP 页面不能包含一些杂乱的功用和 JavaScript 库，以保证页面的速度和可靠性。

HTML5 Audio

// 创立音频上下文
const audioCtx = new AudioContext();
​
// 创立正弦振动器
const oscillator = audioCtx.createOscillator();
oscillator.type = 'sine'; // 正弦波
oscillator.frequency.value = 440; // 设置频率为 440Hz
​
// 创立音量增幅器
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5; // 设置增益为 0.5
​
// 正弦振动器相关音量增幅器
oscillator.connect(gainNode);
​
// 音量增幅器相关音频上下文的音频输出器
gainNode.connect(audioCtx.destination);
​
// 开端振动
oscillator.start();

HTML5 Video

完结了创立一个媒体源，将该媒体源与一个 video 元素相关，为该媒体源增加媒体数据，并开端播映该视频的功用

// 创立媒体源
const mediaSource = new MediaSource();
​
// 创立 video 元素
const video = document.createElement('video');
​
// 将 video 元素与媒体源相关
video.src = URL.createObjectURL(mediaSource);
​
// 为媒体源增加媒体数据
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
fetch('video.mp4')
  .then(response => response.arrayBuffer())
  .then(buffer => sourceBuffer.appendBuffer(buffer));
​
// 开端播映视频
video.play();
​

HTML5 二进制

完结了一个函数 loadAsText()，用于从本地文件读取数据，并将其转化为不同的格局输出

function loadAsText(file) {
 // 创立一个 FileReader 方针
 const reader = new FileReader();
​
 // 设置加载完结事情处理程序
 reader.onload = function(loadedEvent) {
  // 输出读取到的文件内容
  console.log(loadedEvent.target.result);
  }
​
 // 以文本字符串格局读取文件内容
 reader.readAsText(file);
​
 // 以二进制数组格局读取文件内容
 reader.readAsArrayBuffer(file);
​
 // 以DataURL格局字符串读取文件内容
 reader.readAsDataURL(file);
}

HTML5 API(简略)

GeoLocation API 示例

运用 navigator.geolocation.getCurrentPosition() 办法获取当时设备的地理方位信息。当该办法调用成功时，将履行 position 回调函数，传入一个 position 方针，该方针包含了当时方位的经纬度信息。咱们能够从 position.coords.latitude 和 position.coords.longitude 特色中获取当时方位的纬度和经度，并输出到操控台中。

假如获取当时方位信息失利，将履行 error 回调函数，传入一个 error 方针，该方针包含了过错信息。咱们能够从 error.message 特色中获取过错音讯，并输出到操控台中

// 获取当时方位的经纬度信息
navigator.geolocation.getCurrentPosition(position => {
 const latitude = position.coords.latitude;
 const longitude = position.coords.longitude;
 console.log(`当时方位：纬度 ${latitude}，经度 ${longitude}`);
}, error => {
 console.error(error.message);
});

Drag and Drop API 示例

首要，咱们为拖拽源元素 dragSource 增加 dragstart 事情处理程序。在该处理程序中，咱们运用 event.dataTransfer.setData() 办法设置拖拽数据，该办法承受两个参数：数据类型和数据内容。咱们将数据类型设置为 'text/plain'，数据内容设置为 'Hello, World!'。然后，咱们设置拖拽作用为 'copy'。

接着，咱们为拖放方针元素 dropTarget 增加 dragover 和 drop 事情处理程序。在 dragover 处理程序中，咱们首要阻止默许行为，答应元素被拖放到此处。然后，咱们设置拖放作用为 'copy'。在 drop 处理程序中，咱们相同阻止默许行为，避免浏览器翻开拖放的文件

// 为拖拽源元素增加拖拽事情处理程序
const dragSource = document.getElementById('dragSource');
dragSource.addEventListener('dragstart', event => {
 // 设置拖拽数据
 event.dataTransfer.setData('text/plain', 'Hello, World!');
​
 // 设置拖拽作用
 event.dataTransfer.effectAllowed = 'copy';
});
​
// 为拖放方针元素增加拖放事情处理程序
const dropTarget = document.getElementById('dropTarget');
dropTarget.addEventListener('dragover', event => {
 // 阻止默许行为，答应元素被拖放到此处
 event.preventDefault();
​
 // 设置拖放作用
 event.dataTransfer.dropEffect = 'copy';
});
​
dropTarget.addEventListener('drop', event => {
 // 阻止默许行为，避免浏览器翻开拖放的文件
 event.preventDefault();
​
 // 读取拖拽数据
 const data = event.dataTransfer.getData('text/plain');
​
 // 将拖拽数据输出到操控台中
 console.log(data);
});

HTML5 Web Worker

HTML5 Web Socket

Web Socket 是一种在 Web 运用程序中完结实时通讯的协议。它供给了一种双向通讯机制，答应客户端和服务器之间进行实时的数据传输。与传统的 HTTP 恳求/呼应方式不同，Web Socket 选用了一种持久化的衔接，能够在客户端和服务器之间坚持通讯通道，然后完结实时通讯的功用。

Web Socket 协议根据 TCP 协议完结，运用了相似 HTTP 协议的握手进程来建立衔接。客户端和服务器之间的通讯选用帧（Frame）的方式进行，每个帧包含一个标识、一些附加信息和一段数据。客户端和服务器能够经过发送不同类型的帧来完结不同的功用，比方文本音讯、二进制数据、ping-pong 等。

Web Socket 协议能够与任何支撑该协议的服务器进行通讯，包含自己开发的服务器和第三方供给的服务。它一般被用于完结实时聊天室、实时游戏、实时协作等运用场景。由于其实时性和高效性，越来越多的 Web 运用程序开端选用 Web Socket 技能来完结实时通讯的功用

// 创立 Web Socket 衔接
const socket = new WebSocket('ws://localhost:8080');
​
// 当衔接翻开时，发送一条音讯到服务器
socket.addEventListener('open', event => {
 socket.send('Hello, Server!');
});
​
// 当收到服务器发送的音讯时，输出到操控台中
socket.addEventListener('message', event => {
 console.log(`Received message from server: ${event.data}`);
});
​
// 当衔接封闭时，输出一条音讯到操控台中
socket.addEventListener('close', event => {
 console.log('Web Socket connection closed');
});
​
// 当衔接发生过错时，输出过错音讯到操控台中
socket.addEventListener('error', event => {
 console.error(`Web Socket error: ${event.message}`);
});

HTML5 Shadow DOM

Shadow DOM 是 Web Components 技能中的一部分，用于完结 Web 页面上的组件化开发。它答应开发者将 HTML、CSS 和 JavaScript 封装到一个独立的、可重用的组件中，以便在不同的页面和运用程序中进行复用。

Shadow DOM 经过创立一个“影子树”来完结组件的封装和阻隔。在一个 Shadow DOM 中，组件的 HTML 结构、CSS 款式和 JavaScript 行为都被包裹在一个独立的命名空间中，与外部页面的 HTML、CSS 和 JavaScript 不会互相干扰。这种阻隔性使得组件能够在不同的页面和运用程序中进行复用，而不必担心款式和行为的抵触。

运用 Shadow DOM 能够创立一些高度可定制化的组件，比方自界说的表单控件、交互式组件等。Shadow DOM 还供给了一些 API，能够让开发者愈加便利地操控组件的行为和款式。比方，能够运用 JavaScript 修正组件内部的 DOM 结构、监听组件内部的事情、操控组件内部的款式等。

HTML5 Web Component

HTML5 的 Web Component 是一种根据规范 Web 技能完结的组件化开发模型，它由三个技能规范组成：Custom Elements、Shadow DOM 和 HTML Templates。

Custom Elements 答应开发者自界说 HTML 元素，能够经过 JavaScript API 来创立、注册和运用自界说元素。这样，开发者就能够将多个 HTML 元素封装为一个独立的组件，并在 Web 页面中进行复用。Custom Elements 还供给了一些生命周期办法和事情，能够让开发者操控自界说元素的创立和销毁进程。

Shadow DOM 答应开发者创立一个独立的、封装的 DOM 树，用于包含和阻隔组件内部的 HTML 结构、CSS 款式和 JavaScript 行为。这样，开发者就能够将组件内部的完结细节躲藏起来，避免与外部页面的 HTML、CSS 和 JavaScript 抵触。Shadow DOM 还供给了一些 API，能够让开发者愈加便利地操控组件内部的款式和行为。

HTML Templates 答应开发者将 HTML 片段封装为一个可重用的模板，并在 Web 页面中进行复用。HTML Templates 还支撑运用 JavaScript API 来动态生成和填充模板内容，以习惯不同的运用场景。

代码示例

<!-- 界说一个自界说元素 my-button，运用 Shadow DOM 封装组件内部的款式和行为 -->
<template id="my-button-template">
 <style>
  button {
   background-color: #007bff;
   color: white;
   border: none;
   border-radius: 3px;
   padding: 10px 20px;
   font-size: 16px;
   cursor: pointer;
   }
  button:hover {
   background-color: #0069d9;
   }
 </style>
 <button>Click me!</button>
</template>
​
<!-- 在页面中运用自界说元素 my-button -->
<my-button></my-button>

// 界说一个 MyButton 类，承继自 HTMLButtonElement，用于创立自界说元素
class MyButton extends HTMLButtonElement {
 constructor() {
  super();
​
  // 创立 Shadow DOM，并将模板内容刺进其间
  const shadow = this.attachShadow({ mode: 'open' });
  const template = document.getElementById('my-button-template');
  const clone = template.content.cloneNode(true);
  shadow.appendChild(clone);
​
  // 绑定按钮的点击事情
  const button = shadow.querySelector('button');
  button.addEventListener('click', () => {
   console.log('Button clicked!');
   });
  }
}
​
// 将 MyButton 注册为自界说元素
customElements.define('my-button', MyButton, { extends: 'button' });

HTML5 SVG & Canvas

WebGL & WebGPU

WebGL 是一种在浏览器中呈现 3D 和 2D 图形的 JavaScript API，它是根据 OpenGL ES 2.0 的规范，支撑硬件加速，并可与 HTML、CSS 和 JavaScript 无缝集成。运用 WebGL，开发者能够在浏览器中创立高功用的 3D 游戏、可视化东西和数据展现运用等。

WebGPU 是一个新的 Web 规范，旨在为 Web 渠道供给低级别、跨渠道的图形和核算 API，支撑运用现代硬件的强壮功用。WebGPU 由 Khronos Group 开发，它是 Metal、Vulkan 和 DirectX 12 的 Web 版别，支撑多线程和多 GPU，并能够在 WebAssembly 上运转。WebGPU 的方针是为 Web 开发者供给更高效、更灵敏的图形和核算功用，然后打造愈加丰富和杂乱的 Web 运用。

地址：Some Amazing Demo:davidwalsh.name/webgl-demo

PS：的确特别的震撼，能够经过这儿的链接跳转过去看一看

HTML5 WebAssembly

WebAssembly(WASM)是一种新的编码办法，能够直接在浏览器中运转

WebAssembly（简称为 wasm）是一种新式的虚拟机技能，是一种由 W3C、Mozilla 和其他浏览器厂商一同推出的新 Web 规范。WebAssembly 能够将高功用的 C、C++、Rust 等言语的代码编译成二进制格局，在浏览器中运转，然后供给了比 JavaScript 更高的功用和更好的可移植性。

WebAssembly 具有许多长处，比方：

• 高功用：WebAssembly 的代码能够直接在浏览器中运转，能够比 JavaScript 更高效地利用硬件资源。
• 跨渠道：WebAssembly 的二进制格局是跨渠道的，能够在任何支撑 WebAssembly 的渠道上运转，包含浏览器、移动设备、IoT 设备等。
• 安全性：WebAssembly 的代码运转在沙箱环境中，不会对浏览器和核算机形成安全风险。
• 可扩展性：WebAssembly 能够与 JavaScript 无缝集成，而且能够与浏览器中的其他 Web 技能一同运用，比方 Canvas、WebGL 等。

HTML5 支撑 WebAssembly 技能，而且能够经过 JavaScript 脚原本调用 WebAssembly 的函数，完结更高效、更杂乱的 Web 运用程序。WebAssembly 技能在 Web 游戏、图画和音频处理、虚拟现实和人工智能等方面具有广泛的运用前景。

拓宽共享

Web的风靡

大前端

MVC & MVVM & MVP

MVC、MVVM 和 MVP 是三种常见的前端架构规划方式。

MVC 是 Model-View-Controller（模型-视图-操控器）的缩写。它是一种分层规划方式，经过将运用程序分为三个组件：模型（Model）、视图（View）和操控器（Controller），完结了运用程序逻辑和界面之间的别离。模型表明运用程序的数据和事务逻辑，视图表明用户界面，操控器担任协调模型和视图之间的通讯。

MVVM 是 Model-View-ViewModel（模型-视图-视图模型）的缩写。它是一种根据数据绑定的规划方式，经过将运用程序分为三个组件：模型（Model）、视图（View）和视图模型（ViewModel），完结了数据的双向绑定。模型表明运用程序的数据和事务逻辑，视图表明用户界面，视图模型担任将模型数据绑定到视图上，并处理用户输入的数据。

MVP 是 Model-View-Presenter（模型-视图-表明器）的缩写。它是一种根据事情驱动的规划方式，经过将运用程序分为三个组件：模型（Model）、视图（View）和表明器（Presenter），完结了运用程序逻辑和界面之间的别离。模型表明运用程序的数据和事务逻辑，视图表明用户界面，表明器担任协调模型和视图之间的通讯，并响运用户的事情。

课程总结