繁星点点 Logo 繁星点点

常用前端框架学习记录

本文搜集一些常用前端库的官网和文档

约 6 分钟阅读 作者: 繁星点点
常用前端框架学习记录

前端

常见的必学框架：

原生前端库推荐库官方地址
工具类（数组/对象/日期）lodash 、 day.jslodash 官网 / day.js 官网
AJAX 数据请求axiosaxios 官网
轻量级动画anime.jsanime.js 官网
复杂动画GSAPGSAP 官网
简单 UI 组件ShoelaceShoelace 官网
轻量前端框架Alpine.jsAlpine.js 官网
模板渲染Mustache.jsMustache.js 官网
数据可视化Chart.js 、 D3.jsChart.js 官网 / D3.js 官网
3D 渲染Three.jsThree.js 官网
播放器videojsvideojs 官网

GO语言学习：

Go语言语法中文理解
if如果…，则…
else if否则如果…，则…
else否则…
for对于…，执行…
range遍历…
switch根据不同情况，选择执行…
case情况…，执行…
default默认情况下，执行…
break跳出循环或 switch
continue跳过本次循环，继续下一次循环
select在多个渠道中选择一个进行通信
defer延迟执行，直到函数结束时才执行
return返回函数结果
func定义一个…的功能
var定义一个变量
const定义一个常量
type定义一个新的类型
interface定义一个接口
struct定义一个结构体
map一个东西对应另一个东西
chan用于在 goroutine 之间传递数据
go启动一个新的 goroutine（轻量级线程）
select监听多个通道的操作
make创建一个切片、映射或通道
new创建一个对象并返回其指针
len获取数据的长度
cap获取切片的容量
append向切片添加元素
copy复制切片
panic抛出运行时错误，通常会导致程序崩溃
recover捕获 panic 引发的异常
import从…拿…
open打开…，然后读/写…
:=简短声明并初始化变量
&获取变量的地址
*获取指针指向的值
interface{}任意类型的接口
switch根据不同的条件执行不同的操作

前端JS

JavaScript语法通俗理解
let定义一个可以改变的东西
const定义一个不能改变的东西
箭头函数 (=>)更简洁地定义一个做事的方法
模板字符串 (反引号)可以更方便地做一串话，里面可以插入其他信息
解构从一个大盒子里拿出我们需要的东西
展开/收集把东西放开（复制）或收起来（合并成一个）
async/await让你等某件事完成后再继续做，写法更简洁
Promise承诺过一会儿会告诉你事情是否完成
for...of一个个处理列表中的每一项
for...in检查一个东西里面的每个部分
map遍历列表中的每个元素，做相同的事情并返回新列表
filter从列表中挑选符合条件的元素，留下合适的部分
reduce把列表中的每一项合并成一个结果
Set只有不同的东西才能放进去的集合
Map存放一对一的关系（像名字和电话号码）
Symbol定义独一无二的东西，避免重复的东西
Object.assign()把好几个东西放到一起合并成一个新东西
Object.entries()把东西的名字和值变成列表
Object.values()只取出东西的值，放成一个列表
Array.from()把类数组的东西变成真正的数组
Array.includes()判断某个东西是否在列表里
Array.find()找到符合条件的第一个东西
Array.findIndex()找到符合条件的第一个东西的位置
Array.some()判断列表里有没有符合条件的东西
Array.every()判断列表里每一项是否都符合条件
String.startsWith()判断一段话是否以某个词开头
String.endsWith()判断一段话是否以某个词结尾
String.includes()判断一段话是否包含某个词
import从其他地方拿来一些有用的东西
export把自己做的东西分享给别人使用
default设置一个默认的值，别人不特别指定就使用这个值
dynamic import按需加载东西，只有在需要的时候才去拿
BigInt处理非常大的数字
Nullish Coalescing只有当值是空的或没有时，才用后面的默认值
Optional Chaining如果中间某个部分不存在，不会报错，直接跳过

html

标签用途通俗解释
<html> </html>定义网页的根标签用于包裹整个网页的内容，是 HTML 文档的起始和结束标签。
<head> </head>定义网页的头部信息包含网页的一些元信息，比如标题、样式、字符集等，不会直接显示在页面上。
<body> </body>定义网页的主体内容网页的主要内容区域，用户在浏览器中看到的文字、图片等都在这个区域。
<h1> </h1> 到 <h6> </h6>定义标题，级别从1到6用来定义网页的标题，h1 是最重要的，h6 是最不重要的标题。
<p> </p>定义段落用来表示网页中的一段文字，通常是段落内容。
<a> </a>定义超链接用来创建超链接，用户点击链接后可以跳转到其他页面或资源。
<img> </img>用来插入图片在网页中显示图片，src 属性指定图片的路径，alt 属性提供图片的描述。
<ul> </ul>定义无序列表用来表示一个无序列表，每个列表项用 <li> 标签包裹。
<ol> </ol>定义有序列表用来表示一个有序列表，每个列表项用 <li> 标签包裹，列表项会自动编号。
<div> </div>用来创建块级容器用于将页面中的内容分成多个部分，常用于布局和结构化网页。
<span> </span>用来创建行内容器用来包裹一小段文本或元素，通常用于样式处理或在不影响布局的情况下处理部分内容。
<form> </form>定义表单用来创建用户输入的表单，通常包含各种输入框、按钮等。
<input> </input>定义输入框用于创建各种类型的输入框，比如文本框、密码框、单选框等。
<table> </table>创建表格用来创建表格，<tr> 用于行，<td> 用于单元格，<th> 用于表头单元格。
<style> </style>定义内嵌 CSS 样式用于在 HTML 文档中写 CSS 样式，通常放在 <head> 标签内。
<script> </script>定义 JavaScript 脚本用于在网页中插入 JavaScript 代码，通常用于交互、动态效果等。
<br> </br>换行符用于强制换行，通常用于段落中需要换行的地方。
<hr> </hr>水平线用于在网页中插入一条水平分隔线，常用于分隔不同内容区域。
<meta>提供网页的元数据用于设置网页的字符集、描述、关键词等信息，通常放在 <head> 标签中。
<link> </link>引入外部资源用于链接外部资源，比如外部 CSS 文件、网站图标等。
<iframe> </iframe>嵌入其他网页用于在当前页面中嵌入另一个网页或内容。
<audio> </audio>嵌入音频用于在网页中插入音频文件，controls 属性显示音频控制按钮。
<video> </video>嵌入视频用于在网页中插入视频文件，controls 属性显示视频控制按钮。
<strong> </strong>强调文本用来强调某段文本，通常显示为加粗。
<em> </em>强调文本用来强调某段文本，通常显示为斜体。
<blockquote> </blockquote>引用内容用来表示引用的文本，通常显示为缩进的格式。
<code> </code>显示代码用来显示代码片段，通常显示为等宽字体。
<pre> </pre>保持文本格式用来显示格式化的文本，保留空格和换行，通常用于显示源代码。
<id>唯一标识符用于为页面元素指定唯一的标识符，可以在 JavaScript 或 CSS 中精确引用该元素。
<class>类名用于为多个页面元素指定类名，可以对具有相同类名的元素应用统一的样式。
HTML5 语法效果
<!DOCTYPE html>使浏览器识别这是一个 HTML5 页面，按 HTML5 标准解析文档。
<html lang="en">设置页面的语言为英语，浏览器会根据语言显示页面内容或选择语言特定的格式。
<meta charset="UTF-8">确保网页正确显示中文及其他语言字符，避免出现乱码。
<meta name="viewport" content="width=device-width, initial-scale=1.0">网页在手机等设备上自动调整大小，确保页面适应各种屏幕宽度，不会出现横向滚动条。
<header>页面顶部区域，通常包含网站的标题、导航菜单、logo 等，帮助用户了解页面主题。
<footer>页面底部区域，通常包含版权信息、联系方式等，提供网站的额外信息。
<section>页面中的一个内容区域，通常用于分隔不同主题的内容，提高页面结构的清晰度。
<article>显示独立的内容块，如一篇文章、博客或新闻，通常可以独立阅读或共享。
<nav>显示网站的导航菜单，通常包括链接，方便用户在页面间跳转。
<aside>页面旁边的辅助区域，常显示广告、推荐文章或其他与主要内容相关但不太重要的内容。
<figure>显示图片、图表等，通常带有说明文字，帮助用户理解图像内容。
<figcaption>为 <figure> 中的图片或图表添加描述性文字，帮助用户理解图像的含义或提供相关信息。
<video>页面内嵌视频播放器，允许用户播放视频内容，支持控制播放、暂停、音量等功能。
<audio>页面内嵌音频播放器，允许用户播放音频，支持控制音量、播放等功能。
<canvas>在页面上显示绘制的图形，可以用 JavaScript 动态绘制图形，如画图、游戏等。
<progress>显示一个进度条，帮助用户看到任务的完成进度，如文件上传、下载等。
<meter>显示一个测量结果的条形图，比如表示温度、湿度或其他数值范围的测量结果。
<mark>突出显示页面中的一部分文本，通常用来标记搜索结果中的关键词。
<output>显示用户输入或计算后的结果，通常用来显示表单计算或动态数据的输出结果。
<datalist>提供一个输入框的选项列表，用户在输入时可以选择列表中的建议内容，方便填写。
<input type="email">在表单中创建一个电子邮件输入框，浏览器会验证输入是否符合电子邮件格式。
<input type="url">在表单中创建一个网址输入框，浏览器会验证输入是否符合 URL 格式。
<input type="date">在表单中创建一个日期选择框，用户可以点击选择器选择日期。
<input type="color">在表单中创建一个颜色选择器，用户可以选择颜色并显示颜色值。
<input type="range">创建一个滑动条，用户可以通过拖动滑块选择一个数值范围，常用于音量、亮度等控制。
<textarea>创建一个多行文本框，用户可以输入多行文字，适合长文本输入。
<select>创建一个下拉选择框，用户可以从下拉列表中选择一个选项。
<option>在 <select> 下拉框中显示一个选项，用户可以从中选择。
<button>创建一个按钮，用户可以点击按钮执行操作或提交表单。
<details>创建一个可展开的内容区域，用户点击后会展开或收起内容。
<summary>配合 <details> 使用，显示可展开区域的标题，点击后会展开/收起内容。
<output>显示计算或表单输入后的结果，通常用于动态交互应用。
localStorage将数据保存在用户浏览器中，页面刷新或关闭后数据依然存在，适合存储用户偏好设置等信息。
sessionStorage将数据保存在当前会话中，页面刷新或标签页关闭时数据会丢失，适合存储临时信息。
navigator.geolocation获取用户的地理位置信息，如经纬度，常用于地图、定位等功能。
canvas.getContext("2d")获取 2D 绘图上下文，允许在 <canvas> 元素上绘制图形，常用于绘制游戏、图表等。
fetch()发起网络请求，获取服务器数据，通常用于与后台交互，获取数据进行动态更新。
WebSocket实现浏览器与服务器之间的实时双向通信，常用于实时聊天、在线游戏等应用。
video.play()控制 <video> 元素播放视频，用户点击播放按钮后，视频会开始播放。
audio.play()控制 <audio> 元素播放音频，用户点击播放按钮后，音频会开始播放。
input.files获取用户在 <input type="file"> 中选择的文件，方便上传或处理文件数据。
target="_blank"设置 <a> 标签中的链接在新标签页或窗口中打开，而不是当前页面。
<bdi>保证特定文本部分的方向独立，通常用于多语言环境中，防止文本方向混乱。
<wbr>在文本中插入换行机会，浏览器会根据需要在指定的位置换行。
<time>显示日期或时间，浏览器可以将其格式化为标准的日期/时间格式，适合事件和日志展示。
<svg>在页面上创建矢量图形，支持动态修改和互动，常用于图标、图表等展示。
<source>在 <video> 或 <audio> 中提供多种格式的媒体文件，浏览器会选择支持的格式进行播放。
<track>提供视频或音频的字幕、描述等附加信息，常用于国际化字幕显示。
<bdi>在多语言文本中保持文本方向独立，避免语言之间的文本方向干扰。

标签

前端