前端语言串讲 | 青训营笔记

INcnel
103 阅读24分钟

image.png

前端语言的基本能力

  1. HTML（超文本标记语言）  ： HTML 是 Web 页面的基础结构。它用于描述网页的内容和结构。HTML 使用一系列标记（称为标签）来定义页面元素，如标题、段落、列表、图片和链接等。浏览器解析 HTML 代码，并根据标签的语义来显示页面内容。HTML 为网页提供了基本的骨架，使浏览器能够呈现文本、图像和其他媒体。

  2. CSS（级联样式表）  ： CSS 用于描述 HTML 元素的外观和布局。CSS 允许我们定义如何显示 HTML 元素，例如字体、颜色、大小、间距等。通过使用 CSS，我们可以将样式与 HTML 结构分离，使得网站的设计和维护更加简便。CSS 还允许我们根据不同的设备和屏幕尺寸应用不同的样式(媒体查询)，以实现响应式设计。

  3. JavaScript： JavaScript 是一种脚本语言，用于在浏览器中增加交互性和动态效果。它允许我们编写脚本来处理用户操作，例如点击按钮、输入表单、拖动元素等。通过使用 JavaScript，我们也可以操作 HTML 和 CSS，动态更改页面内容和样式，从而提供丰富的用户体验。JavaScript 也可以与服务器进行通信，以便在不刷新整个页面的情况下获取或提交数据（例如，通过 AJAX）。

Javascript

JavaScript有七种基本数据类型，这些类型分为两大类：原始类型（Primitive）和对象类型（Object），原始类型（Number、String、Boolean、Null、Undefined 和 Symbol）是不可变的基本数据类型，而对象类型（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 中的变量声明、赋值操作以及类型转换

var a = 7 + "2"
//执行过程：
//首先，var a 声明了一个名为 a 的新变量。
//然后，执行 7 + "2" 的操作。
//因为其中一个操作数（"2"）是一个字符串，所以 + 会执行字符串连接操作。
//在这种情况下，JavaScript 会自动将数字 7 转换为字符串 "7"(隐式转换)，然后将两个字符串连接起来，得到新字符串 "72"。
//最后，将得到的字符串 "72" 赋值给变量 a。

let a = 7 - "2"
console.log(a)//5
//a会输出`5`，且是Number数字类型。
//因为 `-` 操作符仅适用于数字，所以 JavaScript 会尝试将字符串 "2" 转换为数字。
//在这种情况下，字符串 "2" 可以成功转换为数字 2

Object

Object（对象）是一种引用数据类型，用于表示一组键值对。对象可以用来存储和操作数据，它是 JavaScript 中最基本和重要的数据结构。

  • 键值对（Key-Value Pair）： 对象由一组键值对组成，键是字符串，值可以是任何数据类型（包括原始类型和引用类型）。键也称为属性名（Property Name），而值称为属性值（Property Value）。键和值之间用冒号分隔，键值对之间用逗号分隔。

  • 对象字面量（Object Literal）： 对象字面量是创建对象的一种简洁表示方式。它使用大括号 {} 包围一组键值对。例如：

//在这个例子中，person 对象有三个属性：name、age 和 greet。
//name 和 age 分别存储字符串和数字，而 greet 存储一个函数

const person = {
  name: "A",
  age: 1,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

image.png

Function

闭包（Closure）

闭包是 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 变量。这就是闭包的作用。

高阶函数（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循环。

image.png

基础语言在浏览器中的运行

image.png

  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 的操作，以提高页面性能。

image.png

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 会根据代码的运行情况动态调整优化策略，确保在不同场景下都能实现最佳性能。

前端语言的协作配合

image.png

CSS in HTML

image.png

JavaScript in HTML

image.png

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中尤其常见

image.png

CSS in JavaScript

image.png

你所不知道的HTML（5）

HTML并非图灵完备，它只是一门标记语言。

image.png

标签分类

  • 全部标签分类

image.png

  • head标签

image.png

  • body功能性标签

image.png

  • ARIA

ARIA（Accessible Rich Internet Applications）是一套让 Web 应用和网站更具可访问性的技术规范。ARIA 通过在 HTML 中添加特定的属性，帮助屏幕阅读器等辅助技术更好地理解页面内容和交互。

image.png

HTML语义化标签

image.png

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 请求表头中，以便服务器进行身份验证等操作。

image.png

HTML5 IndexedDB

IndexedDB 是 HTML5 中新增的一种客户端存储机制，用于在浏览器中存储大量的结构化数据。它是一种键值对存储方式，类似于关系型数据库，可以通过索引快速访问数据。

IndexedDB 的主要特点包括：

  1. 异步访问：IndexedDB 的读写操作是异步进行的，不会阻塞主线程，从而提高了页面的性能。

  2. 支持事务：IndexedDB 支持事务，可以确保数据的一致性和完整性。

  3. 支持索引：IndexedDB 支持多个索引，可以提高数据的查询效率。

  4. 可存储大量数据：IndexedDB 可以存储大量的结构化数据，不会受到存储容量的限制。

  5. 支持离线应用：IndexedDB 可以使得应用在离线状态下也能够正常工作，从而提高用户体验。

image.png

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 库，以确保页面的速度和可靠性。

image.png

HTML5 Audio

image.png

image.png

HTML5 Video

image.png

// 创建媒体源
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);
}

image.png

HTML5 API

GeoLocation API（获取位置）

image.png

使用 navigator.geolocation.getCurrentPosition() 方法获取当前设备的地理位置信息。当该方法调用成功时，将执行 position 回调函数，传入一个 position 对象，该对象包含了当前位置的经纬度信息。我们可以从 position.coords.latitude 和 position.coords.longitude 属性中获取当前位置的纬度和经度，并输出到控制台中。

如果获取当前位置信息失败，将执行 error 回调函数，传入一个 error 对象，该对象包含了错误信息。我们可以从 error.message 属性中获取错误消息，并输出到控制台中。

Drag and Drop API（拖拽元素）

image.png

首先，我们为拖拽源元素 dragSource 添加 dragstart 事件处理程序。在该处理程序中，我们使用 event.dataTransfer.setData() 方法设置拖拽数据，该方法接受两个参数：数据类型和数据内容。我们将数据类型设置为 'text/plain'，数据内容设置为 'Hello, World!'。然后，我们设置拖拽效果为 'copy'。

接着，我们为拖放目标元素 dropTarget 添加 dragover 和 drop 事件处理程序。在 dragover 处理程序中，我们首先阻止默认行为，允许元素被拖放到此处。然后，我们设置拖放效果为 'copy'。在 drop 处理程序中，我们同样阻止默认行为，防止浏览器打开拖放的文件。

HTML5 Web Socket

Web Socket 是一种在 Web 应用程序中实现实时通信的协议。它提供了一种双向通信机制，允许客户端和服务器之间进行实时的数据传输。与传统的 HTTP 请求/响应模式不同，Web Socket 采用了一种持久化的连接，可以在客户端和服务器之间保持通信通道，从而实现实时通信的功能。

Web Socket 协议基于 TCP 协议实现，使用了类似 HTTP 协议的握手过程来建立连接。客户端和服务器之间的通信采用帧（Frame）的形式进行，每个帧包含一个标识、一些附加信息和一段数据。客户端和服务器可以通过发送不同类型的帧来实现不同的功能，比如文本消息、二进制数据、ping-pong 等。

// 创建 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 结构、监听组件内部的事件、控制组件内部的样式等。

image.png

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

image.png

image.png

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 应用。

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 游戏、图像和音频处理、虚拟现实和人工智能等方面具有广泛的应用前景。

image.png

拓展分享

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），实现了应用程序逻辑和界面之间的分离。模型表示应用程序的数据和业务逻辑，视图表示用户界面，表示器负责协调模型和视图之间的通信，并响应用户的事件。

image.png

总结

《前端语言串讲》主要讲授了“前端三剑客”的关系和它们的用途，尤其拓展深入讲授了HTML5的整体框架。对于如何入门前端语言给了我一定的思考方向，也希望能从此越拓越深。

avatar
文章
阅读
粉丝