01 - 前端语言串讲 | 豆包MarsCode AI刷题

JacksonHe
VIP.1 初学乍练
1 阅读16分钟

课程来自字节内部课

前端语言串讲 - 掘金

以下是我在青训营学习的第一天的笔记，今天的课程内容是前端语言串讲。在我学习前端开发的过程中，尤其是在参与青训营课程期间，我探索出了一套极为有效的学习方法，其中豆包发挥了至关重要的作用。

在参加青训营课程时，我采用分屏模式，一方面专注于聆听授课内容，另一方面在飞书上同步进行简要笔记的记录。由于课堂上老师讲授的内容丰富且节奏较快，提前记录重点内容可以确保关键信息不被遗漏。课程结束后，我进入了学习的“关键环节”。此时，我会提取在飞书上记录的简要笔记，并借助豆包进行深入的拓展与解释。

豆包的表现确实令人赞叹，它能够详细阐述我那些简略记录的要点，使我原本一知半解的知识瞬间变得清晰明了，许多模糊的概念也得到了透彻的解释。更为重要的是，豆包能够针对我笔记中的相关内容提供代码示例。众所周知，前端开发的许多理论知识较为抽象，仅靠死记硬背难以理解。而通过豆包提供的具体代码块示例，我仿佛打开了一扇通往理解的大门。我可以直接在这些代码块中，结合实际的代码逻辑与运行效果，更好地理解那些原本晦涩难懂的知识点。

核心语言

在前端开发中，三大核心语言分别是 HTML、CSS 和 JavaScript：

  1. HTML：负责网页结构的搭建。
  2. CSS：负责页面的样式和布局。
  3. JavaScript：负责网页的交互功能。

V8 引擎的工作流程

V8 引擎是 Chrome 浏览器和 Node.js 中的 JavaScript 引擎。其大致的工作流程为：

  1. source code (源码) ：JavaScript 源代码。
  2. parser (解析器) ：将源码转换为抽象语法树（AST）。
  3. AST：抽象语法树，用于表示代码的结构。
  4. Ignition (解释器) ：将 AST 转换为字节码（bytecode），并执行字节码。Ignition 还会对代码执行反馈。
  5. TurboFan (优化编译器) ：根据反馈，将字节码优化为机器码。
  6. machine code (机器码) ：生成最终的机器代码，供 CPU 执行。

工作流程图示

三件套的协作

前端技术的演变

自 1995 年以来，前端“三件套”即 HTML、CSS 和 JavaScript 各自独立发展，逐步形成了众多框架、工具和方法学。以下是三者在此期间的一些重要里程碑：

  • HTML：从简单的文档标记语言逐步演变为支持语义化标签和多媒体功能的复杂语言。
  • CSS：从基本样式控制发展为支持动态布局、动画、响应式设计等多种功能。
  • JavaScript：随着 V8 引擎、Node.js 等的出现，从简单脚本语言演变成支持模块化、异步编程的现代编程语言。

CSS 的使用方式

在 HTML 中使用 CSS 的主要方式有三种：

  1. Inline CSS (行内样式) ：直接在 HTML 标签中使用 style 属性定义样式。
  2. Internal CSS (内部样式) ：在 HTML 的 <head> 标签中使用 <style> 标签定义样式。
  3. External CSS (外部样式) ：在 <head> 标签中通过 <link> 标签引入外部 CSS 文件。

JavaScript 的使用方式

在 HTML 中可以通过 <script> 标签引入 JavaScript 脚本。JavaScript 的事件机制包括：

  • 捕获阶段：事件从根节点逐层向下传递至目标节点。
  • 冒泡阶段：事件从目标节点逐层向上传递至根节点。

HTML 中的 JS（如 JSX）

在前端框架中，常常会使用像 JSX 这样的语法，把 HTML 写入 JavaScript 代码中，便于组件化和动态数据绑定。

// 引入React和ReactDOM（假设已正确引入）
import React from 'react';
import ReactDOM from 'react-dom';

// 定义一个简单的函数组件
const GreetingComponent = (props) => {
  return (
    <div>
    <h1>Hello, {props.name}!</h1>
  <p>The current time is: {new Date().toLocaleTimeString()}</p>
  </div>
);
};

// 要传递给组件的数据
const personName = "John";

// 将组件渲染到DOM中的指定元素（假设页面上有一个id为"root"的元素）
ReactDOM.render(
  <GreetingComponent name={personName} />,
  document.getElementById('root')
);

CSS in JS

在 JavaScript 中操作 CSS 的几种方式：

  1. 使用 style.width、style.cssText 等方法直接设置样式。
  2. 使用 setAttribute 方法动态更新样式。
  3. CSS Modules：将 CSS 与组件隔离，使样式只作用于特定组件。
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.button:hover {
  background-color: darkblue;
}

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return (
    <button className={styles.button}>
      Click Me
    </button>

  );
};

export default Button;

4. JSS：在 JavaScript 中直接编写 CSS，使样式能够动态生成和调整。

npm install jss jss-preset-default

import React from 'react';
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  button: {
    backgroundColor: 'green',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    '&:hover': {
      backgroundColor: 'darkgreen',
    },
  },
});

const DynamicButton = () => {
  const classes = useStyles();

  return (
    <button className={classes.button}>
      Dynamic Click Me
    </button>

  );
};

export default DynamicButton;

HTML 基础

HTML 本身不是图灵完备的，因为它缺少控制流程（例如循环、条件分支）等特性，无法完成所有的计算任务。

标签与元素的区别

  • 标签：通常指 <tagname>，例如 <div>。
  • 元素：包含了标签的内容和属性，例如 <div class="example">Content</div>。

标签分类

  • 文档型：如 <!DOCTYPE>、<head>、<body>。
  • 闭合型：
    • 闭合标签：例如 <p> 标签。
    • 空标签：例如 <br>、<img>、<input>。
  • 换行型：
    • 块级标签：例如 <div>、<h1>。
    • 行内标签：例如 <span>、<a>。
  • HTML5 新元素：
    • 语义化标签：如 <header>、<footer>、<article>。
    • 多媒体标签：如 <audio>、<video>。
    • 表单标签增强：如 <input type="date">。
    • 功能性标签：如 <canvas>、<progress>。

HTML ARIA (无障碍标签)

ARIA（Accessible Rich Internet Applications）用于增强 HTML 标签的可访问性，帮助屏幕阅读器识别网页元素的功能。

HTML5 新特性

HTML5 带来了一些新的特性和功能：

  • 语义化：增加了语义化标签，有助于 SEO 和页面的可访问性。
  • 表单增强：例如 <input type="range">、<input type="date"> 等。
  • 离线存储（可对比以下几种方式）：
    • Cookies：小型存储，适合存储少量数据。
    • Local Storage：存储在本地浏览器中，无过期时间。
    • Session Storage：仅在会话期间有效。
    • IndexedDB：基于对象存储的数据库，适合存储大量数据。
  • PWA & AMP：分别用于渐进式 Web 应用和加速移动页面。
  • 音频与视频：直接使用 <audio> 和 <video> 标签。
  • 浏览器 API：如获取用户位置、拖拽功能等。
  • Web Worker & WebSocket：前者用于多线程，后者用于实时通讯。
  • Shadow DOM：创建组件的独立样式和结构。
  • Web Components：封装独立的组件，增强代码复用性。
  • SVG & Canvas 的区别：
    • SVG：基于矢量图，适合图形绘制和事件处理，灵活且可缩放。
    • Canvas：基于位图，适合游戏和动画渲染。
  • WebGL & WebGPU：用于实现图形渲染和加速。
  • WASM (WebAssembly) ：支持其他编程语言在浏览器中运行，提升计算性能。

大前端

“大前端”指跨平台的前端开发，涵盖了 Web、Android、iOS、小程序等不同终端的应用开发需求

大前端的跨端技术旨在使用一套代码或尽可能复用代码，实现同时在多个不同终端上进行应用开发，以下是几种常见的跨端技术介绍：

一、React Native

  • 原理：由Facebook推出，基于JavaScript和React框架。它采用了桥接的方式，通过JavaScript代码与原生平台（如Android和iOS）进行通信，调用原生组件来渲染界面，使得在性能上相较于纯Web跨端方案有较大提升。
  • 特点：
    • 能复用大量的JavaScript代码，开发效率较高，对于熟悉React的开发者来说上手容易。
    • 可以生成接近原生应用体验的界面效果，因为它利用了原生组件进行渲染。
    • 拥有活跃的社区，遇到问题能较容易找到解决方案和相关资源。

二、Flutter

  • 原理：由Google开发，使用Dart语言。它有自己一套完整的渲染引擎，不依赖于原生平台的渲染机制，通过直接在底层绘制界面来实现跨端。
  • 特点：
    • 性能表现出色，能实现接近原生应用甚至在某些场景下超越原生应用的流畅度。
    • 采用热重载特性，在开发过程中能快速看到代码修改后的效果，大大提高开发效率。
    • 拥有丰富的UI组件库，可方便地构建出美观且复杂的界面。

三、Weex

  • 原理：由阿里巴巴推出，类似于React Native也是采用JavaScript进行开发。它通过将前端代码转换为原生视图的方式来实现跨端，同样借助桥接与原生平台交互。
  • 特点：
    • 与阿里的生态结合紧密，比如在与淘宝等应用的一些业务场景配合中有一定优势。
    • 具备较好的性能表现，能够满足一般移动应用的开发需求。
    • 支持动态更新，方便在应用上线后对部分功能进行更新而无需重新发布整个应用。

四、小程序跨端框架

  • 例如Taro、uni-app等：
    • 原理：这类框架一般是基于Vue或React等前端框架进行二次开发。以uni-app为例，它通过一套代码可以同时编译生成微信小程序、支付宝小程序、H5、App（Android和iOS）等多种端的应用。采用条件编译等方式来处理不同端的差异。
    • 特点：
      • 开发成本低，对于已有Vue或React基础的开发者来说很容易上手。
      • 能快速实现一个应用在多个小程序平台以及H5和App端的部署，非常适合创业团队或者快速迭代项目的开发需求。

五、Electron

  • 原理：基于Chromium和Node.js，主要用于桌面应用跨端开发。它将Web技术（HTML、CSS、JavaScript）应用到桌面应用场景，通过将这些Web页面打包成桌面可执行程序来实现跨平台运行。
  • 特点：
    • 开发效率高，开发者可以利用熟悉的Web开发技能来开发桌面应用，无需深入掌握特定的桌面开发语言如C++等。
    • 跨平台性好，能在Windows、Mac、Linux等主流操作系统上运行。
    • 方便更新和维护，因为本质上是基于Web技术，更新内容时相对简单。

交互范式

交互范式定义了界面组件之间的数据流和控制逻辑，常见的三种范式是：

一、MVC（Model-View-Controller）

1. Model（模型） ：

  • 负责处理应用程序的数据逻辑。它包含了数据的结构定义、数据的存储（如从数据库获取数据、本地存储数据等）以及数据的操作方法（如增删改查等业务逻辑）。例如，在一个电商应用中，Model层可能负责处理商品信息的获取、订单数据的存储等。

2. View（视图） ：

  • 主要负责展示数据给用户，是用户直接与之交互的界面部分。它通常由HTML、CSS等构建而成，用于呈现出各种页面元素，如按钮、文本框、列表等。比如电商应用中的商品列表页面、商品详情页面的布局和样式就是由View层来实现的，它会根据Model层提供的数据将商品信息以合适的形式展示出来。

3. Controller（控制器） ：

  • 起到了连接Model和View的桥梁作用。它接收用户在View层的操作事件（如点击按钮、输入文本等），然后根据这些事件调用相应的Model层的业务逻辑方法进行数据处理，处理完后再将更新的数据反馈给View层进行展示。例如，当用户在电商应用的搜索框输入关键词并点击搜索按钮时，Controller会接收到这个操作，然后调用Model层的搜索商品数据的方法，最后将搜索结果返回给View层展示出来。

二、MVP（Model-View-Presenter）

1. Model（模型） ：

  • 与MVC中的Model类似，负责管理应用程序的数据和业务逻辑。比如在一个天气预报应用中，Model层负责从气象数据接口获取天气数据，并对数据进行处理和存储等操作。

2. View（视图） ：

  • 同样是负责向用户展示界面，但在MVP中，View层通常是比较“被动”的，它主要就是接收来自Presenter层的数据并进行展示，自身不包含过多的业务逻辑。例如天气预报应用的主页面视图，它只负责根据Presenter传递过来的天气数据展示出相应的温度、天气状况等信息。

3. Presenter（主持人/呈现者） ：

  • 它是MVP模式的核心，承担了处理用户交互逻辑和更新视图的重要任务。Presenter层一方面接收View层传递过来的用户操作事件（如切换城市查看天气），然后调用Model层的相关业务逻辑方法获取或处理数据，另一方面，它会将处理好的数据再传递给View层进行展示。在天气预报应用中，当用户切换城市时，Presenter会接收到这个操作，调用Model层获取新城市天气数据的方法，然后将得到的数据传递给View层更新页面显示。

三、MVVM（Model-View-ViewModel）

1. Model（模型） ：

  • 依然是负责处理应用程序的数据逻辑，包括数据的获取、存储和基本的业务逻辑操作。以一个音乐播放应用为例，Model层可能负责从音乐库获取音乐列表数据，管理歌曲的播放进度等信息。

2. View（视图） ：

  • 负责展示数据给用户，不过在MVVM中，View层和ViewModel层之间有更紧密的绑定关系。它主要通过数据绑定等方式从ViewModel层获取数据并展示出来，自身不需要过多地去处理业务逻辑。比如音乐播放应用的播放列表页面视图，它通过数据绑定从ViewModel层获取音乐列表数据并展示出来。

3. ViewModel（视图模型） ：

  • 它是MVVM模式的关键部分，一方面它从Model层获取数据并进行处理和转换，使其适合在View层展示；另一方面，它通过数据绑定等机制将处理好的数据提供给View层，并且还能接收View层反馈的用户操作信息，再根据这些信息调用Model层的业务逻辑方法进行数据处理。在音乐播放应用中，ViewModel层会从Model层获取音乐列表数据，对其进行格式转换等处理，然后通过数据绑定让播放列表页面视图展示出来，当用户点击播放某首歌曲时，ViewModel层会接收到这个操作，再调用Model层的播放歌曲的方法。

MVC、MVP、MVVM的区别

1. 职责划分：

  • MVC：Controller起到了比较关键的协调作用，View和Model之间虽然也有一定联系，但相对间接，主要通过Controller来交互。Controller既要处理用户操作又要协调数据处理和视图更新，职责相对较杂。
  • MVP：Presenter承担了大部分的交互逻辑处理和视图更新的任务，View相对更专注于展示数据，Model则主要负责数据相关的业务逻辑，职责划分相对清晰，使得各层之间的耦合度有所降低。
  • MVVM：ViewModel成为了连接Model和View的核心，它将数据处理和视图更新的功能整合得更加紧密，通过数据绑定等方式让View和Model之间的交互更加自动化，View和Model几乎不需要直接交互，各自职责也更加明确。

2. 数据流向：

  • MVC：用户操作View层，触发Controller的动作，Controller调用Model层进行数据处理，然后Model将处理结果返回给Controller，再由Controller更新View层。数据流向相对复杂，存在多次中转。
  • MVP：用户操作View层，View层将操作传递给Presenter，Presenter调用Model层进行数据处理，Model层将处理结果返回给Presenter，Presenter再更新View层。数据流向相对清晰，有比较明确的传递路径。
  • MVVM：用户操作View层，View层通过数据绑定机制将操作反馈给ViewModel，ViewModel调用Model层进行数据处理，Model层将处理结果通过数据绑定返回给ViewModel，ViewModel再通过数据绑定更新View层。数据流向更加自动化，借助数据绑定减少了手动传递数据的步骤。

3. 耦合度：

  • MVC：由于Controller要同时协调View和Model，使得View和Model之间也存在一定的间接耦合，如果Controller的代码逻辑发生变化，可能会影响到View和Model的相关部分，整体耦合度相对较高。
  • MVP：通过Presenter将View和Model进行了一定程度的隔离，使得View和Model的耦合度有所降低，各层可以相对独立地进行开发和维护，但Presenter层与View层和Model层的交互仍然比较频繁，存在一定的耦合关系。
  • MVVM：利用数据绑定技术，使得View和Model之间几乎不存在直接的耦合关系，ViewModel与View和Model的耦合度也相对较低，各层可以更加独立地进行开发和工作，提高了代码的可维护性和可扩展性。

MVC、MVP、MVVM的联系

1. 目的相同：

  • 这三种模式都是为了实现更好的前端开发中的数据处理、用户交互和视图展示的管理，都是为了提高应用程序的可维护性、可扩展性和开发效率，让前端开发更加有条理和高效。

2. 基础架构相似：

  • 它们都包含了数据处理部分（Model）、视图展示部分（View）以及连接数据和视图的中间部分（Controller、Presenter、ViewModel），整体架构上有相似之处，都是围绕着如何更好地协调数据和视图的关系来构建的。

3. 演进关系：

  • MVP可以看作是对MVC模式的一种改进，通过引入Presenter层，进一步明确了各层的职责，降低了耦合度。而MVVM则又是在MVP的基础上，利用数据绑定等技术进一步优化了各层之间的交互方式，使得耦合度更低，开发效率更高，所以它们之间存在一定的演进关系，不断推动着前端开发交互范式的发展。
avatar
文章
阅读
粉丝