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

想要变成代码小能手
67 阅读15分钟

一、前端语言的基本能力

  1. HTML：构建框架结构：控制内容布局、为web page（web页面）设计提供层次结构、web页面的基石。
  2. CSS：给网站添加样式：给元素添加样式、识别不同的屏幕尺寸以让网站具有响应、网站的外表和体验的工具。
  3. JavaScript：增加交互体验：处理复杂的函数和特性、使代码保证更高的效率和可用性。

image-20230726162422285

二、HTML

本质：搭建标签构成文本文件，通过浏览器、容器，完成文本到页面内容的转化。是网站做好SEO的关键技术点。

三、CSS

在MDN上查阅相关语法

四、JavaScript

特点：借鉴C语言的基本语法、借鉴Java的数据类型和内存管理、将函数提升到first class地位、使用基于原型（prototype)的继承机制。单线程。

4.1 基本语法

4.1.1 基本数据类型：

String Number Boolean Null Undefined Symbol BigInt

4.1.2 特殊数据类型：

  • Object：对象，可以包含不同类型的属性和方法
  • Array：数组，表示有序的数据集合，元素可以是任意类型的数据，并通过索引进行访问。
  • Function：函数，表示可被调用的过程或子程序，可以接收参数并返回值。
  • Date：日期，表示日期和时间的数据类型。
  • RegExp ：正则表达式，表示用于匹配和操作字符串的模式。

4.1.3 function

function name(param1,param2){
    var a = param1 + "love" + param2;
    return a;
}

name(Me,You);

五、浏览器引擎

两种引擎：渲染引擎、JavaScript引擎

5.1 渲染引擎：

负责将网页的 HTML、CSS 和 JavaScript 转换为可视化的内容。负责处理网页的布局、样式计算、绘制和交互等部分。

工作流程：

  1. 根据html来生成DOM树
  2. 构建CSS树
  3. 结合DOM树和CSS树计算最终页面排版、推断图层
  4. 绘制页面

5.2 JavaScript 引擎：

负责解析和执行 JavaScript 代码。

六、前端语言的协作配合

6.1 CSS in HTML

定义元素样式：

  1. inline class：使用 style 属性直接在 HTML 元素内部指定样式。

    例：

    <p style="color: red; font-size: 16px;">Hello World</p>
    • 优点：直接且简单，适用于修改单个元素的样式。
    • 缺点：样式与内容混合，难以维护和复用，不利于整体样式的管理。

  2. internal class：在 HTML 中使用<style>标签定义样式，位于 <head> 标签内部。

    例：

    <head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>Hello World</p>
</body>
    • 优点：样式定义集中于一个页面内部，便于维护和管理，适用于中小规模的样式设置。
    • 缺点：样式仍与 HTML 混合，页面较大时可能影响加载速度。

  3. external class：将样式定义放在独立的 CSS 文件中，通过 <link> 标签引入到 HTML 页面中。

    例：

    <head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>Hello World</p>
</body>
    • 优点：样式与内容分离，便于维护和复用，适用于大规模项目和多个页面的样式一致性。
    • 缺点：需要额外的 HTTP 请求加载外部 CSS 文件。

6.2 JavaScript in HTML

6.2.1 <script>标签

<script>标签用于在 HTML 页面中嵌入 JavaScript 代码或引入外部 JavaScript 文件，默认定义在全局上。

  1. 内嵌 JavaScript 代码：

    <script>
  // 在这里编写 JavaScript 代码
</script>

    通过在 <script> 标签之间编写 JavaScript 代码，可以直接在网页中执行 JavaScript，实现动态的交互效果和功能。

  2. 引入外部 JavaScript 文件：

    <script src="script.js"></script>

    通过设置 src 属性，并指定外部 JavaScript 文件的路径，可以将外部的 JavaScript 文件引入到 HTML 页面中。实现代码复用和分离。

  3. 延迟加载（异步执行） JavaScript 文件：

    <script src="script.js" defer></script>

    使用 defer 属性可以指示浏览器延迟加载 JavaScript 文件，在 HTML 解析完毕后再执行 JavaScript。这样可以加快页面加载速度，同时确保 JavaScript 代码在正确的上下文中执行。

  4. 异步加载 JavaScript 文件：

    <script src="script.js" async></script>

    使用 async 属性可以指示浏览器异步加载 JavaScript 文件，不会阻塞页面的加载。当 JavaScript 文件下载完毕后立即执行，不考虑 HTML 解析的顺序。适用于独立的脚本文件，且彼此之间无依赖关系。

  5. 在 HTML 中输出动态内容：

    <script>
  document.write("Hello World");
</script>

    使用 document.write() 可以在 HTML 页面中输出动态的内容。可以用于根据条件或运算结果动态生成页面内容。

6.2.2 DOM

（1）DOM基本概念

DOM（文档对象模型）是一种将HTML、XML等文档解析为结构化的树形数据结构的方式。它提供了一种编程接口，使开发者可以通过JavaScript等脚本语言来操作和修改这个树形结构，从而操作网页的结构、内容和样式。

  • DOM的基本概念包括：

    1. 元素节点（Element Node）：表示HTML或XML文档中的元素标签，如<div>、<p>等。通过DOM可以获取和修改元素的属性、样式、内容等。
    2. 属性节点（Attribute Node）：表示元素的属性，如id、class等。可以通过DOM获取和修改元素的属性值。
    3. 文本节点（Text Node）：表示元素之间的文本内容，如<p>这是一个段落</p>中的"这是一个段落"部分。可以通过DOM获取和修改文本节点的值。
    4. 根节点（Root Node）：文档的最顶层节点，通常是html元素。

  • 一些常用的DOM操作包括：获取元素、修改元素、添加元素、删除元素、事件操作。

（2）DOM的事件机制

DOM的事件机制：特定事件发生时，通过JavaScript对其进行监听和处理的机制。分为事件捕捉和事件捕获。

  • 作用：

    • 事件传播机制能够正确地将事件传递到相应的处理程序。
    • 多个元素可以共享同一个事件处理程序。例如，通过在父元素上绑定事件处理程序，事件可以通过传播机制冒泡到父元素，从而实现多个元素共享同一个事件处理逻辑。

  • 事件目标：每个事件都有一个目标元素，即触发该事件的DOM元素。可以通过 JavaScript 获取目标元素，并为其添加事件监听器（监听器是一个函数，用于定义事件触发后的操作）。

    例：当id为"myElement"的元素被点击时，handleClick函数会被触发执行，并在控制台输出一条消息。

    const element = document.getElementById("myElement");
​
function handleClick(event) {
  console.log("点击事件被触发！");
}  //处理点击事件
​
element.addEventListener("click", handleClick, true); // 在捕获阶段监听事件
// 或
element.addEventListener("click", handleClick, false); // 在冒泡阶段监听事件

  • image-20230727110717218

    事件捕获阶段：从document向下传播一直到button（目标元素)。方便计算机找到精准的触发元素。

    事件冒泡阶段：定位到button后，逐级向上传播。方便开发者做事件代理相关的功能。

  • 大多数浏览器默认采用事件冒泡机制。但是可以通过在绑定事件时设置addEventListener的第三个参数为true，来明确地将事件处理程序安装在事件捕获阶段。

6.2.3 JS的事件循环机制

JavaScript的事件循环机制是用于管理和执行异步代码的一种机制。它负责处理异步任务，确保它们按照正确的顺序执行。JS是单线程的，但通过异步编程和事件循环机制，可以处理并发的异步任务，防止程序阻塞。

主要组成部分：

  1. 执行栈（Execution Stack）：执行栈是一个存储执行上下文的栈结构。当JavaScript代码执行时，会创建全局执行上下文并推入执行栈中。每当函数被调用，其对应的执行上下文也会被推入栈中，函数执行完毕后则从栈中弹出。
  2. 任务队列（Task Queue）：任务队列用于存储待执行的异步任务。包括浏览器提供的宏任务（如定时器、DOM事件处理等）和微任务（如Promise、MutationObserver等）。当异步任务完成后，它会被推送到相应的任务队列中。
  3. 事件循环（Event Loop）：事件循环是一个持续运行的过程，不断地从任务队列中获取任务并将其推入执行栈中执行。它会不断地检查执行栈是否为空，如果为空则从任务队列中取出最早的任务推入执行栈。这个过程循环进行，直到执行栈和任务队列都为空。
  4. 宏任务和微任务：在事件循环中，宏任务会优先执行。当执行栈为空时，会执行当前宏任务队列中的一个任务。而微任务则会在当前宏任务执行完毕后立即执行，以保证在下一个宏任务之前完成。
  5. 渲染（Rendering）：事件循环中的渲染阶段用于更新页面的显示。在执行栈和任务队列的处理过程中，浏览器会在适当的时机检查是否需要进行页面重新渲染。

6.3 HTML in JavaScript

主要用于动态修改html内容

  1. 原始的DOM方法
  2. 现成的渲染框架（常用）

image-20230727130002956

6.4 CSS in JavaScript

  1. DOM方法

  2. 通过jsx ，vue

image-20230730154423790

  1. CSS Moudule 和 JSS ：本质上都是解决CSS全局类名容易冲突的问题。

    image-20230730154500297

七、你不知道的HTML

HTML是前端开发中最基本、最简单的语言，不能完成一些控制流，没有对数据操作的能力，并非图灵完备，只是一门标记语言。

7.1 基本语法：

image-20230730154534250

  • 文本：不能包含<>字符。若有，则必须转译，但放在<![CDATA[text]]>标签中就不用转译。
  • DTD：用于声明文档中可以有哪些标签，每个标签有哪些语法特性。即语法定义文档。（但浏览器没有必要每次都查询文档定义，因此最新的HTML5.0规范用上了最简单的<!DOCTYPE html>。

7.2 HTML标签的分类:

  • image-20230730154603653
  • head里的内容一般是功能性的，用户一般看不到。image-20230730154631965
  • 功能性标签：不需死记硬背，一方面只是一些附带样式，可以通过CSS实现，另一方面，现代化的组件已经把很多功能化的标签包含进去了，只需大致了解一些。image-20230730155207884

7.3 HTML ARIA（可访问的互联网富文本应用）

让HTML代码更容易被理解的一种工具。

image-20230730154735557

7.4 HTML5

不再是单纯的文本语言，定义了一些规范和特性。

WHATWG：

是推动HTML规范的一个组织。定义了很多特性：新的标签、Canvas、音视频、拖拽、浏览器页面的信息传送方式、与服务端交互的Web Sockets、多线程的Web Workers

W3C：

Web Storage、RDFa

HTML5&related technologies：

MathML（用来定义数学公式）、矢量图SVG、L1等级的复杂选择器Selectors、 计时功能、地理位置、点击事件的确定、CSS3

语义化标签：

便于维护网站结构，便于使用SEO对网站进行整理。

  • <header>可以放置网页的头部搭配<nav>来做导航条。
  • <aside>来做侧边栏。
  • <nav>也可以做菜单。
  • 网页的主体部分可以用<section>来做分割。
  • <footer>、<address>等。

表单增强：

Submit、Radio、Checkbox、drop-down list （下拉框）、optgroup（包含颜色选择器、时间选择器）等。

离线存储

image-20230728220104693

使用cookie存储数据，请求的体积可能会变得很大，而Local Storage和Session Storage只为前端服务。

IndexedDB：

可以存储任何类型的数据。支持索引。异步访问数据。速度并不是特别理想，但类似数据库的方式，访问数据便捷。

image-20230728220333628

PWA & AMP（基于存储的应用）

PWA基于Service Worker，提高页面访问效率。

AMP便于搜索引擎爬取，提高网站关键内容的曝光访问速度。

image-20230730154816821

Audio，Video接口

  • 本质上是一个拓扑图，支持从不同的音频来源，最终输出到音频的输出设备。

    image-20230730154952290

    image-20230730155012740

  • 大部分时候使用<viedo>标签就可以完成视频的播放。若需要订制性的能力则需要使用MediaSource,但最后的输出通过给video指定src来实现。

    image-20230729120030751image-20230729115833914

    实现一个可定制化的MediaSource能力。

二进制支持能力

FileReader读取的文件一般为Blob对象（二进制对象的基类）。

Data Url是一片内存的标识，指向内存中的一片地址，可以快速访问比较大的二进制对象。

ArrayBuffer能读不能写，可以通过TypedArray,DataView对ArrayBuffer进行封装，可具备对字节的操作能力。

image-20230729121904421

image-20230729121920306

API

GeoLocation API、Drag & Drop API等

Web Worker

是一个多线程的方式。

  1. 在主线程中w = new Worker(),则存在一个Worker Thread。

  2. 主线程和Worker线程可以通过postMessage来互传信息，通过onmessage监听到信息。

  3. 主线程可通w.terminate()来销毁Worker线程。

Service Worker方式

页面上可以存在Web Worker和Service Worker。

Service Worker主要用于拦截请求，并且通过自己的Cache来返回一些缓存好的文件。

Web Socket

是一种全双工通信方式。服务端和客户端具有双向通信的能力。

看起来是http，但本质是TCP的连接请求。

image-20230730155044077

Shadow DOM

可以避免自己内部的元素被外部的元素访问到。image-20230729124445463

Web Component

赋予我们可以自定义标签的能力。

SVG & Canvas

SVG：是基于XML的向量化图片，可以用来交互。矢量的，屏幕或画布尺寸变化时不会明显失真；本身就是DOM元素，故对事件处理支持的更好；不能绘制很复杂的图形，对游戏支持不好；draw（素描） the program。

Canvas：是一个HTML元素，可以画各种各样的图形。点阵方式绘制，尺寸变化时会失真，所以每次尺寸变化时都要调整；并不支持事件处理；很多HTML5游戏是基于Canvas绘制；paint（水彩） the program。

WebGL & WebGPU

JS借助WebGL和WebGPU通过着色器语言（GLSL和WGSL）可以直接跟GPU交互来绘制图形。

WebGPU几乎把GPU的能力暴露给前端开发者，对专业的图像开发人员是一个福音。

原理：Mesh（网格对象：由许多顶点组成），通过顶点着色器Vertex Shader来计算顶点，投影到屏幕的位置gl_Position，再通过片段着色器Fragment Shader来绘制物体的外观。

some amazing demo：davidwalsh.name/webgl-demo

WebAssembly（WASM）

是一种二进制格式文件，由C/C++等通过转译工具生成，前端需要ArrayBuffer加载.wasm文件，并编译和实例化。

加载和实例化：

const buffer = await
  fetch('...')
  .then(resp => resp.arrayBuffer());
const instance = 
      WebAssembly.instantiate(buffer);

WebAssembly和JS的运行环境是完全隔离的，因此需要ImportObj和ExportObj进行通信。

WebAssembly的用途：容器化为未来重点突破方向image-20230730104932957

八、拓展交流

Web风靡

image-20230730105615351

大前端，小程序等。

交互范式

  • MVC：

    • VIEW：处理web界面相关的交互
    • MODEL：维护渲染界面所需要的数据层
    • CONTROLLER：主要处理业务逻辑。会判断输入框内容是否正确，不正确则VIEW给出提示，正确则MODEL进行数据更新，并返回给VIEW。

  • MVP：

    MVC的一种改进，把所有操作都内聚到了PRESENTER层，即需要同时处理事物层和数据层的相互操作，以及整个状态统一。

  • MVVM：

    本质与MVP类似，但实现了双向保密的能力，让VIEW MODEL层的负担大大减弱，同时VIEW MODEL不需要和VIEW层耦合，具备了可复用性。

    image-20230730131042884

avatar
文章
阅读
粉丝