青训营笔记 | 字节前端初阶训练营6 前端语言串讲

图图学前端
105 阅读7分钟

前情提要

本篇文章为前端方向的第一课的笔记，课上老师主要讲解了html,css,javascript三个前端语言的基本能力，然后介绍了v8引擎的工作流程，之后从前端发展史来切入到三门语言是如何相互协作的，最后拓展了web和大前端的知识。

我采用的是先看课再根据课后ppt的方式进行学习的，这样可以让我专注聆听课堂内容，不需要过多地分散精力去记录笔记，课后再根据 PPT 整理笔记，在这个过程中,我可以主动思考和理解知识点,而不是被动地记录，在整理笔记时,难免会遇到有不懂的问题或者理解的比较模糊的概念，这时我便会借助豆包 MarsCode AI 刷题平台进行深入拓展和学习，这种结合使我能够将理论知识与实践应用紧密结合,大大提高了学习效果。

笔记内容

三大件

  1. HTML：负责网页结构的搭建，就像是人的骨架。
  2. CSS：负责页面的样式和布局，就像是给人的脸进行化妆美。
  3. JavaScript：负责网页的交互功能，就像是给人赋予肌肉，赋予能动性。

image.png

image.png

v8引擎

V8引擎是一个由Google开发的开源JavaScript引擎，主要用于Chrome浏览器和Node.js运行时环境。它的主要任务是将JavaScript代码编译成机器码并执行。V8引擎的工作流程是一个精巧而高效的过程，从JavaScript源代码到最终的机器码执行，经历了多个关键阶段。

首先，V8接收JavaScript源代码（source code）作为输入。这些源代码随即被送入解析器（parser）进行处理。解析器的任务是将源代码转换为抽象语法树（AST），这是一种以树状结构表示代码语法结构的中间表示形式。

接下来，AST被传递给Ignition解释器。Ignition是V8的核心组件之一，它将AST转换为字节码（bytecode）。字节码是一种比源代码更接近机器语言的中间代码。Ignition不仅负责生成字节码，还负责执行这些字节码。在执行过程中，Ignition会收集代码执行的反馈信息，这些信息对后续优化至关重要。

TurboFan优化编译器是V8引擎的另一个关键组件。它利用Ignition收集的执行反馈，对热点代码（即频繁执行的代码段）进行优化。TurboFan将字节码进一步优化，转换为更高效的机器码。

最后，经过优化的机器码（machine code）被生成，这些代码可以直接由CPU执行，从而大大提高了JavaScript代码的执行效率。

这个过程体现了V8引擎的设计哲学：通过多层次的优化，将高级的JavaScript代码逐步转换为高效的机器码，最大限度地提升JavaScript的执行性能。

工作流程图示

image.png

三件套的协作

html in css

主要有三种方式：

  1. Inline CSS (行内样式)
<p style="color: red; font-size: 16px;">这是一个红色的段落。</p>
  1. Internal CSS (内部样式)
<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是一个蓝色的段落。</p>
</body>
</html>
  1. External CSS (外部样式)(最常见的方式)
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>这是一个从外部样式表中获取样式的段落。</p>
</body>
</html>

javascript in html

在 HTML 中可以通过 <script> 标签引入 JavaScript 脚本。JavaScript 的事件机制包括：捕获阶段和冒泡阶段

html in javascript

代码示例： 一个简单的 React 组件示例来展示如何使用JSX语法

import React from 'react'; function Welcome(props) { 
return ( 
    <div> 
        <h1>Hello, {props.name}!</h1> 
        <p>Welcome to our website.</p> 
    </div> ); 
}

// 使用组件 
const element = <Welcome name="Alice" />; 
ReactDOM.render(element, document.getElementById('root'));

css in javascript

  • 内联样式：使用 style 属性直接设置元素的样式。这种方法简单直接，适用于少量的样式修改。
  • setAttribute：通过 setAttribute 方法设置 style 属性，可以一次性设置多个样式。
  • CSS Modules：CSS Modules 是一种将 CSS 与组件隔离的技术，确保每个组件的样式只作用于该组件，避免了全局样式的冲突。
  • JSS：JSS 是一个用于在 JavaScript 中编写 CSS 的库，支持动态生成和调整样式。它提供了丰富的功能，如主题、条件渲染等。
  • Styled Components：Styled Components 是另一种流行的 CSS-in-JS 库，它允许你使用实际的 CSS 语法来编写样式，并且样式会自动作用于组件。

拓展内容

web为何风靡

image.png

大前端

随着技术的发展和互联网应用的多样化，前端开发的边界不断扩展，涉及到了更多的平台和设备。

多平台开发
  • Web 前端：传统的浏览器端开发，使用 HTML、CSS 和 JavaScript 构建网页应用。
  • 移动应用：包括原生应用（iOS 和 Android）和跨平台应用（如 React Native、Flutter、Ionic 等）。
  • 桌面应用：使用 Electron、Tauri 等框架构建桌面应用。
  • 小程序：微信小程序、支付宝小程序、百度小程序等。

软件架构模式（MVC&MVVM&&MVP）

1. MVC（Model-View-Controller）

MVC 是最经典的架构模式之一，广泛应用于各种类型的软件开发中，特别是 Web 应用。

  • Model（模型） ：负责数据的存储和业务逻辑。模型与数据库交互，处理数据的获取、存储和验证。
  • View（视图） ：负责显示数据给用户。视图通常是用户界面的一部分，如 HTML 页面。
  • Controller（控制器） ：负责处理用户的输入，与模型和视图进行交互。控制器接收用户请求，调用模型的方法来处理数据，然后更新视图以反映新的数据状态。

优点：

  • 分离关注点，使代码更加模块化和易于维护。
  • 有利于团队协作，不同的开发人员可以分别专注于模型、视图和控制器。

缺点：

  • 控制器可能变得臃肿，处理过多的逻辑。
  • 视图和控制器之间的耦合较高。
2. MVVM（Model-View-ViewModel）

MVVM 是在 MVC 基础上发展起来的一种架构模式，特别适合现代的前端框架，如 Vue.js 和 Angular。

  • Model（模型） ：与 MVC 中的模型相同，负责数据的存储和业务逻辑。
  • View（视图） ：负责显示数据给用户，通常是一个模板或 UI 组件。
  • ViewModel（视图模型） ：充当模型和视图之间的桥梁。ViewModel 通过数据绑定机制与视图保持同步，当模型数据变化时，视图会自动更新；反之亦然。

优点：

  • 数据绑定机制简化了视图和模型之间的数据同步。
  • ViewModel 与视图解耦，提高了代码的可测试性和可维护性。
  • 适合复杂的用户界面和动态数据更新。

缺点：

  • 数据绑定机制可能导致性能问题，特别是在数据量较大时。
3. MVP（Model-View-Presenter）

MVP 是另一种常用的架构模式，特别适合桌面应用和移动应用开发。

  • Model（模型） ：与 MVC 和 MVVM 中的模型相同，负责数据的存储和业务逻辑。
  • View（视图） ：负责显示数据给用户，通常是一个 UI 组件。
  • Presenter（呈现器） ：充当视图和模型之间的中介。Presenter 接收来自视图的用户输入，调用模型的方法来处理数据，然后更新视图以反映新的数据状态。Presenter 通常包含视图的逻辑，但不直接操作视图。

优点：

  • 视图和模型完全解耦，提高了代码的可测试性和可维护性。
  • Presenter 可以独立于视图进行单元测试。

缺点：

  • 视图和 Presenter 之间的通信较为复杂，需要通过接口或回调函数。
  • 代码结构可能比 MVC 更复杂，尤其是在处理大量视图逻辑时。
视图演示

image.png

avatar
文章
阅读
粉丝