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

温文1124
85 阅读11分钟

前言

这是我加入前端青训营写的第4篇笔记。

前端语言的基本能力

前端语言三件套“HTML，CSS和JS” 下图生动说明了这三者之间的关系 image.png
HTML构建了网页的骨骼部分
CSS构建了皮肤的部分
Javascript构建了肌肉的部分,可以使其活动

HTML

HTML（HyperText Markup Language）是一种用于创建网页的标记语言，由网页中的各种元素（例如文本、图像、链接、表格等）和标记组成。HTML（包括版本2.0、3.2、4.01、5.0等）定义了网页结构和内容，并提供了各种标记来描述页面中的不同部分。
HTML是网站做好ICU的关键技术点

CSS

CSS是语法很简单的语言
选择器分为元素选择器,id选择器,等 , 如下表所示

选择器示例
元素选择器p
id选择器#p1
类选择器.span
后代选择器.content p
子代选择器.content > p
兄弟选择器#p1～p
相邻选择器#p1+#p2
群组选择器p,span
全局选择器* body
属性选择器查找type=text 元素 input[type=＂text＂]
伪类选择器:content

优先级排序:
！important>行间样式>ID选择器>属性选择器&&伪类选择器&&类选择器>元素选择器
CSS使用方式如下 :

image.png

Javascript

发展历史

image.png

基本类型

  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Symbol
  • Object

变量命名方式

var a = 5;
var b = "2";
var c = a + b;   // 52
对比项varletconst
变量提升是否否
重复声明允许不允许不允许
块级作用域不是是是
初始化必须赋值否否是
可修改是是否

各对比项说明如下:

  1. 变量提升：var 声明的变量会进行变量提升，即在函数或全局作用域中，变量定义语句可以出现在变量使用语句之后。而 let 和 const 定义的变量不存在变量提升，必须先声明再使用，否则会报错。
  2. 重复声明：var 声明的变量可以多次声明，在同一作用域内后面的声明会覆盖前面的声明。而 let 和 const 声明的变量不允许重复声明，否则会抛出异常。
  3. 块级作用域：var 声明的变量不存在块级作用域，即在if、for等代码块中声明的变量可以在块外部访问，这常常导致变量的值被覆盖。而 let 和 const 声明的变量只在所在的块级作用域内有效。
  4. 初始化必须赋值：使用 const 声明的变量必须在声明时就初始化，并且不可重新赋值。而 let 和 var 声明的变量可以不进行初始化并且后续也可以重新赋值。
  5. 可修改：使用 var、let 声明的变量可以修改其值，而使用 const 声明的变量不可修改其值。但是如果使用 const 声明的变量是对象或数组类型，对象或数组中的属性及元素是可以修改的。

HTML生成页面的过程:

image.png

Browser(V8引擎工作流程)

  1. 词法分析（Lexical Analysis） V8首先对JavaScript代码进行词法分析，将代码字符串分割成一个个token，token是代码中不可再分的最小单元，包括关键字、标识符、操作符、数字、字符串等等，这样有利于后续处理。
  2. 语法分析（Syntax Analysis） V8继续对token进行语法分析，将其转化为抽象语法树（AST），AST是一种描述代码结构的树状结构，它反映了代码中各个数据结构和函数之间的关系。
  3. 字节码生成（Bytecode generation） V8对AST进行遍历，生成机器无关的字节码（Bytecode），字节码类似于汇编语言，它是一种中间代码，与具体的硬件架构无关。这种中间表达形式能够方便地在机器上运行并且提高效率。
  4. 编译器优化（Compiler Optimization） V8引擎在字节码生成之后还会进行一些编译器优化，以提高JavaScript代码的执行速度，其中包括一些常见的优化技术，如内联缓存、分层编译和代码垃圾回收等。
  5. 机器码生成（Machine Code Generation） V8最后将字节码转化为机器码（Machine Code），机器码是一种可执行代码，能够在CPU上直接运行。这个阶段是整个编译过程中最耗时的部分，但也是执行速度最快的部分。在生成完机器码之后，V8就可以以最优方式对JavaScript代码进行运行了。

image.png

前端语言的协作配合

HTML, CSS以及JS的生态发展图:

image.png

CSS in HTML

image.png
第三种用的人数比较多 ,是主流的使用方式

JavaScript in HTML

image.png

JavaScript 是单线程的，在一个时间点只能执行一个任务
为了处理异步操作和事件回调，JavaScript 引入了事件循环
事件循环使用任务队列来管理要执行的任务
任务队列分为两种类型：宏任务队列和微任务队列。

DOM事件机制

DOM 是 Document Object Model 的缩写，意为文档对象模型，它是一种描述文档内容以及如何访问文档内容的方法和标准。在 DOM 中，每个 HTML 元素都是一个对象，有其自己的属性和方法。

DOM 事件机制是指文档中的事件是如何被处理和传递的。当用户与页面交互时，例如点击按钮、滚动页面、输入文本等，事件就会被触发，并被传递给相应的元素或者文档节点。

  1. 事件捕获 当一个事件发生时，先由最外层的文档对象往下捕获直到目标节点，并逐级执行已注册的事件捕获函数。
  2. 事件处理 当事件捕获完成后，到达目标节点，执行该节点上已注册的事件处理函数。
  3. 事件冒泡 事件处理完后，事件会从目标节点开始向上冒泡，逐级执行已注册的事件处理函数。

在事件处理过程中，可以使用 event 对象来访问事件相关的信息，例如事件类型、目标元素、鼠标坐标等等。事件对象可以通过事件处理程序的参数传递进来，也可以通过 window.event 属性获取。

除了原生事件之外，还可以使用 Event Listener 和 Event Delegation 两种方式来绑定事件处理程序。Event Listener 使用 addEventListener() 方法来添加事件监听器，Event Delegation 则是将事件处理程序绑定到祖先元素上，通过事件冒泡机制来进行事件处理。

使用 DOM 事件机制时，需要注意事件的传播顺序、事件对象的获取方法以及事件的阻止和取消等相关问题。
image.png

CSS in JavaScript

image.png

HTML(5)的新特性

HTML DTD

HTML只是一门标记语言

image.png

HTML标签分类

image.png

head标签

image.png

HTML_body功能的标签

不需要全部掌握,随着学习时间的增加,对一些常用标签熟练即可. image.png

HTML_ARIA

这是供盲人阅读,可以为我们设计UI提供指导意义.

image.png

HTML5 语义化标签

建议:用对比不用好,不用比用错好

image.png

HTML的PWA & AMP

PWA和AMP是两种常见的Web技术标准。以下是它们的详细解释：

PWA：渐进式Web应用程序（Progressive Web Apps），它是一种使用现代Web技术构建的Web应用程序，可在桌面和移动设备上提供本机应用程序的体验。PWA具有与本机应用类似的特性，例如离线访问、推送通知和安装应用等。PWA可以使应用程序更快、更具响应性，并提供更好的用户体验。

AMP：加速移动页面（Accelerated Mobile Pages），它是一种用于创建内容性网页的开源框架，它旨在提高移动页面的性能和质量，从而实现更快的加载速度和更好的用户体验。AMP的页面结构简单，只包含必需的元素和最小化的JavaScript，以加快页面加载速度并提高页面性能。

因此，PWA适用于需要像本地应用程序一样运行的Web应用程序，而AMP适用于需要在移动设备上提供快速和高效用户体验的内容网页。

image.png

HTML Web_worker

Web Worker 是指一种浏览器 API，它允许 JavaScript 代码在单独的线程中运行，从而提高网页的性能和响应速度。与主线程（页面线程）相比，Web Worker 运行在另一个线程中，并且在主线程上执行的 JavaScript 代码不会直接访问 Web Worker 中的数据。这意味着 Web Worker 可以并行工作，并在完成任务后将结果返回给主线程。在使用 Web Worker 时，需要创建一个文件，并在其中编写 JavaScript 代码。然后，将此文件传递给 Web Worker 构造函数，以便在其中创建一个新的 Web Worker 对象。最后，可以将消息传递到 Web Worker，并在回调函数中处理返回值。Web Worker 对于执行大量计算密集型或 I/O 密集型操作的任务非常有用，因为它可以不阻塞主线程，并使应用程序更加流畅。 [文档地址] image.png

HTML Web Socket

WebSockets是HTML5中新增的一种网络通信协议，它提供了在单个TCP连接上进行全双工通信的能力。该协议使得客户端和服务器之间可以实时、高效地交换信息，而无需像传统的HTTP请求那样每次都要建立和关闭连接,所以他是多线程的.

WebSockets协议的优势包括：

  1. 实时性：与HTTP请求不同的是，WebSockets使得服务器可以主动向客户端推送消息，从而实现了实时性。
  2. 响应快速：由于WebSockets使用更少的头部信息，因此响应时间更短。
  3. 节省带宽：由于WebSockets只需要在建立连接时发送一次HTTP请求，因此它节省了很多带宽成本。

WebSockets协议分为两个部分：握手和数据传输。在握手过程中，客户端首先向服务器发送一个HTTP请求，该请求包含一些特殊的头部信息，其中包括Upgrade和Connection。如果服务器支持WebSockets协议，则会在响应头部中包含Upgrade和Connection的值，表示协议已经切换到WebSockets。此后，服务器和客户端就开始通过该TCP连接进行全双工通信。

WebSockets已经被广泛应用于实时通信等方面，在在线游戏、聊天室、股票行情、网络视频等应用中都有着广泛的应用。[英文文档地址]

image.png

// 创建 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}`);
    }
);

HTML SVG & Canvas

HTML5 中的 SVG（Scalable Vector Graphics）和 Canvas 是两种不同的绘图技术。SVG 采用基于 XML 的描述性语言绘制图形，而 Canvas 则是通过 JavaScript 在 HTML5 中动态绘制图像。

SVG可以创建各种形状，比如矩形、圆形、线条、文本等，并且对于每个形状都可以定义样式、动画和事件。因为 SVG 是矢量图形，所以可以在任何大小的屏幕上无损缩放，而且图像保持清晰和精细。同时，由于 SVG 基于 XML，所以可以使用 CSS 等技术来样式化和格式化图形。SVG 可以被搜索、索引、脚本化和压缩，适用于高分辨率显示器和打印机。

Canvas则是在 HTML5 中通过 JavaScript 绘制图形的一种方式。与 SVG 不同，Canvas 是基于像素的，它提供了像素级别的控制，可以用于游戏、图表或其他需要即时反馈和动画的应用。Canvas 允许开发人员直接操作像素，可以针对所需的每一帧进行重新绘制，支持各种效果（例如模糊、阴影、色彩调整等），但它不容易改变大小和复杂度。

下面是两种技术之间的简要区别：

SVGCanvas
矢量图形基于像素绘制
无损缩放不容易改变大小
易于搜索、索引和脚本化不支持事件处理器
支持动画和交互支持特效和复杂性

扩展分享

Web的火热

image.png

大前端

image.png

image.png

MVC　＆　MVM　＆　MVP

  1. MVC（Model-View-Controller）：MVC 是一种分离关注点的设计模式。在这个模式中，应用程序被分为三个部分：模型、视图和控制器。模型负责数据存储和逻辑，视图负责展示数据，控制器协调模型和视图之间的通信。
  2. MVVM（Model-View-ViewModel）：MVVM 模式是基于 MVC 的架构模式，它的核心思想是通过数据绑定来将视图和模型解耦。在 MVVM 中，视图和模型之间由一个叫做 ViewModel 的中间层进行通信和交互。
  3. MVP（Model-View-Presenter）：MVP 是另一种基于 MVC 的设计模式，与 MVVM 不同，它并不涉及数据绑定。在 MVP 中，Presenter 负责处理用户的输入，并根据需要更新模型和视图。

image.png

小结 :

image.png

avatar
文章
阅读
粉丝