Day1 前端语言串讲｜青训营前端语言的基础能力三件套：HTML、CSS、JS 。在JS中,原始类型Number、S

前端语言的基础能力

三件套：HTML、CSS、JS

JavaScript

七种基本数据类型：

String
Number
Boolean
Null
Undefined
Symbol
Object
- Array
- Function

在 JavaScript 中，原始类型（Number、String、Boolean、Null、Undefined、Symbol）是不可变的基本数据类型，而对象类型（Object）是可变的引用数据类型.

Browser V8 现有工作流程

V8 现有工作流程.jpg

前端语言的协调配合

发展史

前端发展史.jpg

CSS in HTML

行内

<p style="color:red;">hhhh</p>

内部

<style>
p {
color:red;
}
</style>

外部

<link type="text/css" rel="stylesheet" href="style.css" />

JS in HTML

// 行内 
<button onclick="show()">button</button>
// 外部引入
<link rel="stylesheet" href="jsdemo.js"/>
// 在script标签内部
<script>
...
</script>

事件机制

捕获阶段

事件从最顶层的节点依次向下，朝事件目标节点（如用户鼠标单击的元素）传播的过程；
冒泡阶段

事件从事件目标节点向上回溯传播至最顶层节点的过程。

任务队列分为两种类型：宏任务队列和微任务队列。当一个宏任务执行完毕后，事件循环会检查微任务队列，执行其中的所有任务，然后再执行下一个宏任务。

HTML in JavaScript

主要是动态修改HTML内容。

JS DOM方法
Mustache模板
JSX

CSS in JavaScript

CSS in JavaScript.jpg

CSS Module
JSS

HTML

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

HTML标签分类

文档型：<!DOCTYPE>、<head>、<body>
闭合型：闭合标签<p></p>,空标签<br>、<img>、<input>
换行型：块级标签，行内标签
H5新元素：语义化标签、媒体标签、表单标签、功能标签

HTML head标签

title：标题，全局唯一
base：向页面所有相对URL提供前缀，全局唯一，不建议使用
meta: 通常是约定好的键值对，如charset、http-equiv
link：rel决定类型，href决定引入地址
script：type指定MIME类型，可内嵌代码，可外链文件

HTML5

HTML5语义化标签

<article></article>
<section></section>
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>

表单增强

引入了一些新的表单元素等。
HTML5储存

Cookies,LocalStorage，SessionStorage存储机制。
IndexedDB

轻量级事务型(NoSQL)数据库，提供索引功能实现高性能搜索。键值对储存、异步操作、支持事务、同源限制、储存空间大、支持二进制储存
PWA&AWP

渐进式 Web 应用（Progressive Web App，PWA）、AMP（加速移动页面）
Audio、Video

二进制

// 输出文本字符串格式
reader.readAsText(file);  
// 以二进制数组格式 
reader.readAsArrayBuffer(file); 
// 输出DataURL格式
reader.readAsDataURL(file); 
}

API
Web Worker

Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。
Web Socket

Web Socket 是一种在 Web 应用程序中实现实时通信的协议。它提供了一种双向通信机制，允许客户端和服务器之间进行实时的数据传输。与传统的 HTTP 请求/响应模式不同，Web Socket 采用了一种持久化的连接，可以在客户端和服务器之间保持通信通道，从而实现实时通信的功能。
Shadow DOM

避免内部元素被外部访问到。
Web Component

允许创建可重用的定制元素（它们的功能封装在你的代码之外）并且使用。
SVG & Canvas
WebGL & WebGPU
WebAssembly

WebAssembly(WASM)是一种新的编码方式，可以直接在浏览器中运行。

交互范式

MVC
MVP
MVVM

总结

经过该课程的学习，简单回顾了前端三件套的一些内容。对html5的一些内容似懂非懂，没有完全掌握，只是大致了解了一下，个人觉得目前也不必死记硬背。各方面的学习都是手写代码理解会比硬背高效一点。

Day1 前端语言串讲｜ 青训营