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

Dillonz
88 阅读7分钟

前言

随着前端的不断探索和进化，传统的前端“三剑客”技术也是日新月异，而且彼此之间联系越来越紧密。本文会帮你复习一下前端的基本知识，“温故而知新”，同时也扩展交流一下周边有趣的小知识。

1.前端语言的基本能力

简介

image.png

image.png

  • HTML构建人的骨骼
  • CSS构建人的皮肤
  • JavaScript作为肌肉控制人的身体和运动能力

image.png

  • 三者结合集合成一个系统，缺一不可

HTML

image.png

CSS

  • css语法方式

image.png

  • css选择器

image.png

  • css常用伪元素和伪类选择器

image.png

  • css文档查看方式
    • 左侧为css分类
    • 中间详细语法说明
    • 右侧解释每个单位的详细作用

image.png

JavaScript

image.png

  • 借鉴C语言的基本语法
  • 借鉴Java语言的数据类型和内存管理
  • 借鉴Scheme语言，将函数提升到“第一等公民”（first class）的地位
  • 借鉴Self语言，使用基于原型（prototype）的继承机制

image.png

  • JavaScript通用作用

    • 校验用户输入
    • 简单的客户端计算
    • 交互控制
    • 平台无关性
    • 处理数据和时间
    • 生成HTML内容
    • 检测用户浏览器

  • 现代JavaScript的功能

    • 块级作用域变量Let/Const
    • 箭头函数
    • 字符串模板
    • 扩展数组方法
    • 默认参数
    • 变量重命名

image.png

  • JavaScript生态产品

  • JavaScript基本语法

image.png

image.png

Browser

  • 渲染引擎的运行过程

image.png

  • JavaScript引擎流程

image.png

2.前端语言的协作配合

Trending

image.png

CSS in HTML

  • CSS编写的三种方式
  • 内联样式，直接在标签内部通过style属性来设置
  • 内部样式，在标签内添加css样式
  • 外部样式，单独放在.css文件中，从外部引入 image.png

JavaScript in HTML

  • 在开头渲染 image.png
  • vue模板写法 image.png
  • 行内写法

image.png

image.png

image.png

--

6fe130b7-8aea-48b0-996f-6d89f4bc7592.gif

HTML in JavaScript

  • 原生js写法 image.png
  • 外部导入 image.png
  • 现代JSX写法 image.png

CSS in JavaScript

  • 通过DOM元素修改属性 image.png
  • React JSX引入class，因class是JavaScript是保留关键字，所以用className表示 image.png
  • vue image.png
  • 解决不同文件类名的冲突问题
  • CSS Module

image.png

  • JSS（JavaScript Style Sheets）： JSS 是一种将 CSS 样式以 JavaScript 对象的形式编写和管理的技术。它允许我们在 JavaScript 代码中动态生成和修改样式

image.png

3.你不知道的HTML（5）

HTML DTD

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

image.png

HTML全部标签分类

image.png

HTML head标签

image.png

HTML body功能性标签

image.png

HTML ARIA

  • 了解ARIA并非只是为了供盲人阅读，它可以为我们设计UI系统提供指导意义

image.png

image.png

image.png

HTML5

image.png

HTML5 语义化标签

  • 建议：用对比不用好，不用比用错好，虽然语义化标签名字各不相同，但其实本质都是div标签 image.png

image.png

HTML5表单增强

image.png

HTML5存储

  • Cookies：Cookies 是存储在客户端计算机上的小文件，用于存储用户与网站之间的数据。常用于记录用户的登录状态、购物车内容等信息。
  • Local Storage：Local Storage 是 HTML5 新增的一种 Web 存储机制，用于在客户端存储持久化数据。与 Cookies 不同，Local Storage 的数据不会在每次请求时被发送到服务器，而是保存在客户端的本地存储空间中。
  • Session Storage：Session Storage 与 Local Storage 类似，也是用于在客户端存储数据。不同之处在于，Session Storage 的数据只在用户会话期间有效，即在浏览器窗口或标签页关闭时自动清除。 image.png

HTML5 IndexedDB

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

IndexedDB 的主要特点包括：

  • 1.异步访问：IndexedDB 的读写操作是异步进行的，不会阻塞主线程，从而提高了页面的性能。
  • 2.持事务：IndexedDB 支持事务，可以确保数据的一致性和完整性。
  • 3.支持索引：IndexedDB 支持多个索引，可以提高数据的查询效率。
    1. 可存储大量数据：IndexedDB 可以存储大量的结构化数据，不会受到存储容量的限制。
  • 5.支持离线应用：IndexedDB 可以使得应用在离线状态下也能够正常工作，从而提高用户体验。

image.png

image.png

image.png

HTML5 PWA&AMP

  • PWA
    • PWA 是一种 Web 应用程序的开发方式，旨在提供类似于原生应用程序的用户体验。它使用 Web 技术开发，可以在任何设备上运行，包括桌面、移动设备和平板电脑

image.png

  • AMP
    • AMP（Accelerated Mobile Pages）：AMP 是一种 Web 页面的开发方式，旨在提供快速的加载速度和优化的移动体验。它使用精简的 HTML 和 CSS，以及 AMP JavaScript 库来实现

image.png

HTML5 Audio

image.png

image.png

HTML5 Video

image.png

image.png

HTML5 二进制

image.png

image.png

HTML5 API

  • GeoLocation API

image.png

  • Drag&Frop API

image.png

image.png

HTML5 Web Worker

image.png

image.png

HTML5 Web Socket

  • Web Socket 是一种在 Web 应用程序中实现实时通信的协议。它提供了一种双向通信机制，允许客户端和服务器之间进行实时的数据传输。与传统的 HTTP 请求/响应模式不同，Web Socket 采用了一种持久化的连接，可以在客户端和服务器之间保持通信通道，从而实现实时通信的功能。
  • Web Socket 协议基于 TCP 协议实现，使用了类似 HTTP 协议的握手过程来建立连接。客户端和服务器之间的通信采用帧（Frame）的形式进行，每个帧包含一个标识、一些附加信息和一段数据。客户端和服务器可以通过发送不同类型的帧来实现不同的功能，比如文本消息、二进制数据、ping-pong 等。
  • Web Socket 协议可以与任何支持该协议的服务器进行通信，包括自己开发的服务器和第三方提供的服务。它通常被用于实现实时聊天室、实时游戏、实时协作等应用场景。由于其实时性和高效性，越来越多的 Web 应用程序开始采用 Web Socket 技术来实现实时通信的功能

image.png

image.png

HTML5 Shadow DOM

  • Shadow DOM 是 Web Components 技术中的一部分，用于实现 Web 页面上的组件化开发。它允许开发者将 HTML、CSS 和 JavaScript 封装到一个独立的、可重用的组件中，以便在不同的页面和应用程序中进行复用。 image.png

HTML5 Web Componet

  • HTML5 的 Web Component 是一种基于标准 Web 技术实现的组件化开发模型，它由三个技术规范组成：Custom Elements、Shadow DOM 和 HTML Templates。 image.png

image.png

HTML5 SVG&Canvas

image.png

image.png

WebGL&WebGPU

  • WebGL 是一种在浏览器中呈现 3D 和 2D 图形的 JavaScript API，它是基于 OpenGL ES 2.0 的标准，支持硬件加速，并可与 HTML、CSS 和 JavaScript 无缝集成。使用 WebGL，开发者可以在浏览器中创建高性能的 3D 游戏、可视化工具和数据展示应用等。 image.png

image.png

HTML5 WebAssembly

  • WebAssembly（WASM）是一种新的编码方式，可以直接在浏览器中运行

image.png

image.png

image.png

4.扩展分享

Web的风靡

image.png

大前端

  • Android通过XML方式编译一个View image.png
  • IOS支持多个View的层叠，来构建不同的图层 image.png
  • 微信小程序通过特殊语法的运用，经过Json的方式来构建应用 image.png

MVC & MVVM & MVP

image.png

  • MVC

    • Model：模型层，维护渲染界面所需要的数据层
    • View：视图层，用于与用户实现交互的页面
    • Controller：控制层，用于连接Model层和View层，完成Model层和View层的交互。还可以处理页面逻辑，它接收并处理来自用户的请求，并将Model返回给用户 image.png

  • MVP

    • 从MVC模式演变而来，将Controller改名为Presenter的同时改变了通信方向 image.png

  • MVVM

    • 采用了双向绑定,View的变动，自动反映在ViewModel
    • ViewModel层把Model和View层的数据同步自动了，解决了MVP框架中的数据同步比较麻烦的问题，不仅减轻了ViewModel层的压力，同时使得数据处理更加方便-只需告诉View层展示的数据是Model层中的哪一部分即可

image.png

引用

  • 字节内部课：前端语言串讲-字节前端初阶训练营
avatar
文章
阅读
粉丝