第六届字节跳动青训营-前端基础-《前端语言串讲》笔记

内容一览

230726字节前端基础.svg

前端基本能力

html

JavaScript

前生叫ECMAScript
设计初衷
- 借鉴了c语言基本语法
- 借鉴了Java的数据类型和内存管理
- 简介Scheme语言把函数提高到一等公民（first class）的地位
- 借鉴了Self语言，使用基于原型（prototype）的继承机制
基本类型

JavaScript的数据类型一共有六种,其中包括
1. String
2. Number
3. Boolean
4. Null
5. Undefined
6. Symbol
另外还包含种其他类型
- Object
  - Array
  - Function
- 现代化Bigint

css

选择器
- 伪类选择器
- 元素类型选择器
- 类选择权
- 属性选择器
- 全选择器
- 伪元素选择器
- id选择器
- 后台选择权
- 紧邻的兄弟选择器
- 一般的兄弟选择器

Browser

渲染引擎
- 加载页面根据html生成dom树的结构
- 获取css资源生成cssom树
js引擎
- 根据词法语法解析把js源码转化为AST树
- 通过Ingnition转化位字节码

前端语言协作

CSS in HTML

内部css
在头文件中引入css
在头部编写css

JavaScript in HTML

script标签

CSS in JavaScript

HTML in JavaScript

HTML

HTML的基本语法包括：标签元素、文本、注释、DTO、处理信息

分类

其中html包含：文档型、闭合性、换行型、行内标签。HTML5还对包括：语义化标签、媒体标签、表单标签、功能标签在内的许多html功能进行了拓展。

head标签

一份head标签一般可以包含 title、base、meta、link、script个部分。

title：代表标题，全局唯一
~~base~~：base可以面向页面所有URL提供前缀，在当前版本下base因为会造成高耦合所以不再建议使用。
meta：meta通常是约定好的键值对，例如：charset、http-equiv。
link：link标签代表需要引入的内容，其中rel代表数据类型，href数据引入地址
script：script标签代表脚本代码其中：type指定MIME类型可内嵌代码，href决定引用类型

ARIA

HTML5

语义化标签
表单增强
储存 > 我在下文中列举了各种存储方式的区别
- Clookies
  - 4kb
  - 会被请求的时候被发送
  - 存在过期时间问题
  - 可以存储在Server端
  - 在HTML4/5中允许使用
  - 可以通过同window访问
- Local Storage
  - 10mb
  - 在HTML5中允许使用
  - 可以通过同window访问
- Session Storage
  - 5mb
  - 在HTML5中允许使用
  - 只能通过同Table访问
  - Table被关闭的时候自动清空
- IndexedDB
  - 性能不如SQLite
  - 适用于复杂场景
  - 异步操作
  - 允许任何数据
  - 包含多个objectStore
PWA&AMP
Audio音频能力
HTML5 Video
HTML5 二进制
HTML5 API 在HTML5 API中允许使用位置操作、拖拽操作等许多全新的API
Web Worker

Web Worker中采取多线程的方式进行操作
Web Socket

Web Socket 是一种支持全双工通信的TCP通信方式
Shadow DOM
- 一种特殊的节点，在Document下可以挂载很多DOM节点
- 如果选择一个DOM作为Shadow Host 内部可以构建更复杂的Shadow Tree
- 在Shadow Tree内部可以构建像DOM一样的Shadow节点
- Shadow节点是可以无限延伸的
- Shadow DOM可以避免内部元素被外部元素访问到，这样可以让自己作为一个有着内聚功能的HTML元素。
Web Component
- Web Component是一种用于构建可重用的自定义元素和组件的Web平台标准。
SVG&Canvas
- SVG是基于XML的向量化的图片，可以用来交互
  - SVG实际上是矢量的
  - SVG是可扩展的，尺寸发生变化不会失帧
  - 可以对事件特殊处理
  - 对游戏支持不好，不能绘制复杂图形
  - draw
- Canvas是一个HTML元素，可以用它来画各种各样的图形
  - Canvas使用点阵的方式绘制的
  - 尺寸发生变化的时候会失帧
  - 无法对事件特殊处理
  - 可以绘制复杂图形，很多游戏都用它
  - paint
WebGL&WebGPU

WebGL和WebGPU是用于在Web浏览器中进行图形渲染的技术。WebGL是当前广泛使用的技术，它提供了一种基于JavaScript的高性能图形渲染方式。而WebGPU是WebGL的下一代标准，旨在提供更高的性能和更好的可编程性，以满足日益增长的图形和计算需求。
WebAssembly

拓展交流

WEB可以火热的原因

对用户友好
对开发者友好
领域成熟度
未来的方向

大前端

交互方式

MVC

MVC（Model-View-Controller）是一种软件设计模式，用于将应用程序的逻辑和用户界面分离。它将应用程序分为三个主要部分：

1. 模型（Model）：模型代表应用程序的数据和业务逻辑。它负责处理数据的读取、存储、更新和验证，并且通常与数据库或其他数据源进行交互。
2. 视图（View）：视图是用户界面的可视化表示。它负责展示数据给用户，并接收用户的输入。视图通常是被动的，它根据模型的状态来更新自己，并将用户的输入传递给控制器。
3. 控制器（Controller）：控制器是模型和视图之间的中介。它接收用户的输入，并根据输入更新模型的状态。控制器还负责将更新后的数据反映到视图上，以便用户可以看到最新的状态。

MVC的核心思想是分离关注点，使得应用程序的各个部分可以独立地进行开发和测试。模型负责数据和业务逻辑，视图负责展示数据，控制器负责处理用户的输入和更新模型的状态。这种分离使得代码更加模块化、可维护性更高，并且可以更容易地进行功能扩展和重用。

MVP

MVP（Model-View-Presenter）和MVVM（Model-View-ViewModel）是基于MVC的衍生模式，它们在MVC的基础上做了一些改进和扩展。

MVP模式将控制器替换为了Presenter，Presenter负责处理用户的输入和更新视图。它将视图和模型完全解耦，使得视图可以更加独立地进行开发和测试。Presenter通过接口与视图进行交互，这样可以更好地实现单元测试和模块化开发。

MVVM

MVVM模式引入了ViewModel的概念，ViewModel是视图和模型之间的中介。它负责将模型的数据转换为视图可以使用的形式，并处理视图的状态和行为。ViewModel还支持数据绑定，使得视图可以自动更新，而不需要手动操作。

总的来说，MVC、MVP和MVVM都是用于组织和管理软件应用程序的设计模式。它们都强调关注点分离，使得应用程序的不同部分可以独立地开发、测试和维护。选择哪种模式取决于具体的应用场景和需求。

前端语言串讲｜青训营