关于javascript:前端这两年的文章总结

这几天整顿的一下过往的文章和笔记，备份到了 Github 上，地址👉 blog。

如果我的内容帮忙到了您，欢送点个 Star 🎉🎉🎉 激励激励 :) ~~~ 👆

我心愿我的内容能够帮忙你。当初我专一于前端畛域，但我也将分享我在无限的工夫内看到和感触到的货色。

后续的内容也会第一工夫整顿的 Github，以下整顿一份分类清单（将跳转至 Github）：

Element 与 Node 的区别
Emmet VS Code 按键绑定以晋升 HTML 编辑效率
Emmet 语法
HTML HTML5 基础知识 — 面试题专用
HTML autocomplete 属性
HTML data 元素
HTML title 属性
HTML translate 属性
HTML 规范 FAQ
HTML 的实体编码（HTML Entity Encode）
alt 和 title 的区别
button 与 input type=”button” 的区别
label 标签触发相干 input 的状态
script 标签上的 defer 和 async 属性是什么？
不要应用 submit 来命名提交按钮
你可能不晓得的几个罕用的 HTML 属性
使 abbr 元素实用于触摸屏、键盘和鼠标
应用 HTML5 download 属性创立可下载的链接
应用 loading 属性提早加载图片
应用 mark 元素突出显示文本
应用 pattern 属性验证输出值
创立编号我的项目的降序列表
在 HTML 中应用 ARIA 的规定
在新标签页中关上所有链接
在链接中应用 # 符号有什么用？
申明式 Shadow DOM
对于在新标签页中关上的链接，始终应用 “noopener” 或 “noreferrer”
对于特定于语言的款式，在 lang 属性选择器上应用 lang 伪类
强制浏览器下载新的 favicon
指定文档类型
按工夫距离刷新页面（不应用 JavaScript）
显示日期、工夫时应用 datetime 属性
正确加载 SVG Favicon
增加键盘快捷键
省略 HTML 布尔属性的值
联合 Google 字体申请
过滤文件输出的文件类型
防止应用 b、i、s 和 u 标签
防止每个页面应用多个 h1 标签
避免浏览器要求翻译
隐式表单提交并不总是无效

BEM 命令标准
BFC 及其利用
CSS @Supports
CSS Bulma 框架
CSS Reset 与 Sprites
CSS background 属性
CSS content-visibility 属性 — 推延内容渲染
CSS outline 属性
CSS scroll-behavior 属性 — 纯 CSS 平滑滚动
CSS vertical-align 属性
CSS will-change 属性 — 优化渲染性能
CSS 单位及其须要留神的中央
CSS 实现文本溢出省略成果
CSS 盒模型
CSS 继承、级联和特异性
CSS 选择器
CSS 重置元素款式
Flex 布局
Normalize 和 Reset 的区别
PostCSS
SASS 预处理器
calc() 工作原理
[display-none 与 – [hidden] 的区别 ](https://github.com/lio-zero/b…)
style=”width: ” 与 width=”“
为 body 元素增加行高
仅 CSS 增加暗黑模式
仅应用 CSS 的打字机成果
应用 CSS aspect-ratio 个性使 iframe 响应式缩放
应用 CSS overscroll-behavior: contain 来避免滚动链
应用 CSS 创立一个三角形
应用 SVG 图标
应用 Sass 默认参数的实用技巧
应用 currentColor 关键字重用以后色彩
应用指针事件来管制鼠标事件
创立自定义表情符号光标
只为 Firefox 编写 CSS 规定
在打印模式下显示链接
罕用的一些 CSS 技巧一
罕用的一些 CSS 技巧三
罕用的一些 CSS 技巧二 — 选择器（伪类与伪元素）
疾速输出色彩变量
批示短少 alt 属性的 img 元素
用 rem 来调整全局大小；用 em 来调整部分大小
给“默认”链接定义款式
本义 CSS 类名
防止应用 CSS @import
避免锚链接隐没在粘性题目前面
暗藏 Microsoft Edge 的明码显示按钮

CSS 多列（column）
三栏布局
侧边栏布局
卡片布局
固定头部
固定页脚
图片和文字垂直居中

++value 和 value++ 的区别
6 个罕用的正则表达式
== 与 === 的区别
Blob 对象
Clipboard — 剪贴板操作
ES JSON 模块提案
ES2016（ES7）
ES2017（ES8）
ES2018（ES9）
ES2019（ES10）
ES2020（ES11）
ES2021（ES12）
JS 作用域和作用域链
JSDoc
JavaScript BOM 详解
JavaScript JSON
JavaScript RegExp 对象 — 正则表达式
JavaScript 严格模式（’use-strict’）
JavaScript 中响应图像的最大宽度和高度
JavaScript 中定义函数的办法
JavaScript 中循环之间的差别
JavaScript 中清空数组
JavaScript 中的 setTimeout 和 setInterval 办法
JavaScript 中的“this”关键字
JavaScript 中的一等函数
JavaScript 中的函数和变量晋升
JavaScript 中的异样解决
JavaScript 中的数字截断
JavaScript 中的模块倒退计划
JavaScript 中的短路求值
JavaScript 中的自定义事件
JavaScript 中的虚值是什么？
JavaScript 中的闭包
JavaScript 函数办法 — call()，apply() 和 bind()
JavaScript 反转字符串
JavaScript 合成函数
JavaScript 媒体查问
JavaScript 数组去重
JavaScript 数组办法总结
JavaScript 替换所有呈现的字符串
JavaScript 立刻执行函数表达式（IIFE）
JavaScript 纯函数
JavaScript 获取字符串的最初一个字符
JavaScript 运算符总结
JavaScript 运行机制 — 事件循环（Event-Loop）
JavaScript 逗号运算符
JavaScript 链式调用
JavaScript 高阶函数
Map 与 WeakMap 的区别
Number() 和 parseInt() 的区别
Object 与 Map 的区别
Object.freeze() 与 Object.seal() 的区别
Object.getOwnPropertyNames() 与 Object.keys() 的区别
Object.is() 和 === 的区别
Object.keys/values/entries
UMD
const、let 与 var 的区别
delete obj.property 与 obj.property = undefined 的区别
encodeURI 与 encodeURIComponent 的区别
for-in 和 for-of 的区别
in 运算符与 Object.hasOwnProperty 的区别
instanceof 与 typeof 的区别
null 与 undefined 的区别
[object.property 和 object[‘property’] 的区别 ](https://github.com/lio-zero/b…’property’%5D%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
slice 与 splice 的区别
[string charAt(i) 和 string [i] 的区别 ](https://github.com/lio-zero/b…)
substr 和 substring 的区别
undefined 和 void 的区别
variable === undefined 与 typeof variable === undefined 的区别
下载文件
为 contenteditable 元素增加占位符
为什么递归函数中返回后果为 undefined？
从剪贴板粘贴图像
从数组中删除反复的对象
应用 CSS Transition 通过扭转 Height 来开展收起元素
应用 JavaScript 上传和解决不同的文件
应用 JavaScript 解构函数参数的办法
应用代理（Proxy）对象来强壮您的 -JavaScript- 不变性函数
应用单选按钮切换 CSS 自定义属性
应用焦点款式丰盛用户体验
创立可调整大小的拆分视图
制作一个可调整大小的元素
制作可拖动元素
前端文件上传
动静加载脚本文件
匹配汉字
变量赋值与原始对象可变性
只容许输出特定字符
图片懒加载
在列表中拖放元素
在单击地位显示自定义上下文菜单
在浏览器中截屏
在浏览器和 Node.js 中更准确地测量执行工夫
在解构 {} 时应用默认值避免谬误
如何从 JavaScript Date 对象获取月份名称？
如何在 JavaScript 中替换两个变量？
如何在 JavaScript 中应用管道（管道运算符）？
如何在 JavaScript 中判断一个值是否为数组？
如何在 JavaScript 中判断一个对象是否为空？
如何在 JavaScript 中判断数组是否蕴含某个值？
如何在 JavaScript 中合并两个数组？
如何在 JavaScript 中对对象数组进行排序？
如何在 JavaScript 中将字符串转换为数字
如何在 JavaScript 中将数组拆分为一组数组
如何在 JavaScript 中将数组转为对象
如何在 JavaScript 中查看对象中是否存在某个属性？
如何在 JavaScript 中查看数字是负数还是正数
如何在 JavaScript 中增加千位逗号（每三位数）
如何在 JavaScript 中获取对象的长度
如何在 JavaScript 中抉择或疏忽对象的属性
如何在 JavaScript 中遍历任意深度的对象
如何在 JavaScript 对字符串去空
如何在 JavaScript 将数字拆分为单个数字
如何在用户进行输出 JavaScript 后执行函数
如何翻转对象中的键和值？
将 JSON 数据下载为文件
将文件拖到元素上时突出显示该元素
将表格导出到 csv
平滑滚动到一个元素
序列化表单数据
打印图像
拖动页面滚动
革新纯可折叠 details 元素
数组中的最大值 - 最小值
数组平均值与中位数
数组扁平化
无框架 Web 组件
显示构造函数模式 — Revealing-Constructor-Pattern
显示模块模式 — Revealing-Module-Pattern
更改网站图标
构造函数模式 — Constructor Pattern
柯里化
格式化输入 JSON
查看数组是否已排序
查看是否反对触摸事件
查看页面的浏览器选项卡是否聚焦
检测 JavaScript 字符串中的表情符号
检测大写锁定是否开启
检测是否为挪动浏览器
检测暗模式
检测用户是否处于闲暇状态或处于非活动状态
浅拷贝和深拷贝
滚动到页面顶部的多种实现
点符号与括号符号
特色检测、特色推断和应用 UA 字符串之间有什么区别？
生成一个指定范畴内的随机数
类构造函数与原型中的办法
计算 textarea 的字符数
调整图像大小
调整文本框的宽度以主动适应其内容
过滤并排序字符串列表
反复字符串的多种办法
重定向到另一个网页

DOM 中 Element 与 Node 有何区别
DOMContentLoaded 与 load 的区别
HTMLCollection 和 NodeList 的区别
JavaScript 事件流传机制
clientY 与 pageY 的区别
keydown、keypress 和 keyup
key、keyCode 和 which
mouseenter 与 mouseover 的区别
naturalWidth 与 width 的区别
nodeName 与 tagName 的区别
parentElement 与 parentNode 的区别
stopImmediatePropagation 与 stopPropagation
事件对象上的 currentTarget 与 target 属性
从 DOM 中移除一个元素
从 DOM 元素中移除所有子元素
从给定文本中去除 HTML
应用 JavaScript 从多个元素中增加和删除 CSS 类
应用 JavaScript 将文本和 HTML 注入元素的四种不同办法
应用 JavaScript 查看复选框是否被选中
应用 JavaScript 获取、设置和删除属性
应用 JavaScript 获取和设置 CSS 属性的三种办法
应用 closest 和 matches 办法来检测元素是否存在某选择器
使页面在浏览器中可编辑
切换 HTML 元素的类
切换类
创立一次性事件处理程序
创立元素
创立本人的查问选择器简写
判断页面是否加载实现
匹配元素
辨别鼠标左键和右键单击
在指定元素的结尾之前或开端之后插入 HTML 字符串
在指定的 DOM 元素中渲染给定的 DOM 树
实现页面文本内容不可选中 — 不可复制
将光标挪动到输入框的开端
将给定的 CSS 代码注入以后文档
关上模态时避免身材滚动
显示指定的所有元素
最小化 DOM 拜访
查找元素最近的绝对地位先人
查看元素是否可滚动
查看元素是否在视口中
查看父元素是否蕴含子元素
检查用户是否滚动到页面底部
查看给定元素是否具备指定的类
检测元素是否被聚焦
增加款式
统计以后页面呈现的所有标签
获取、设置和删除 data- 属性
获取元素的 CSS 款式
获取元素绝对于另一个元素的地位
获取或设置文档题目
获取文档高度和宽度
获取款式
获取父级元素
获取先人元素
获取选中的文本
视口、设施和文档大小
触发事件
设置款式
返回蕴含给定元素的所有同级的数组
抉择元素的文本内容
通过给定的选择器获取最近的元素
重置表单
阻止事件的默认操作
暗藏所有指定的元素

JavaScript 和 TypeScript 中的 void
JavaScript 和 TypeScript 中的布尔值
TypeScript DefinitelyTyped 我的项目
TypeScript keyof 关键字
TypeScript 中的类型收窄
TypeScript 根底 — Null 和 Undefined
TypeScript 根底 — Object 类型
TypeScript 根底 — const 和 readonly 的区别
TypeScript 根底 — _.d.ts 和 _.ts 的区别
TypeScript 根底 — interface 中的函数和属性
TypeScript 根底 — interface 和 type 的区别
TypeScript 根底 — interface 接口
TypeScript 根底 — namespace 命名空间
TypeScript 根底 — string 和 String 的区别
TypeScript 根底 — 元组
TypeScript 根底 — 函数
TypeScript 根底 — 枚举
TypeScript 根底 — 泛型
TypeScript 根底 — 类
TypeScript 根底 — 类型断言（Type Assertion）
TypeScript 根底 — 类型谓词
TypeScript 根底 — 联结类型
TypeScript 工具类型 — Utility Types
TypeScript 文字联结类型与字符串枚举
TypeScript 类型转换
TypeScript 装璜器
TypeScript 中的 const 断言
在 TypeScript 中应用 unknown 而不是 any
缩短 TypeScript 中的导入门路

时刻放弃查阅文档的好习惯，文档时刻在更新，文章不肯定。

Vue 3 中的新的响应式 API
Vue CSS 变量 — 响应式款式 RFC
Vue Computed — 计算属性
Vue Context 参数 — Composition API
Vue Mixins
Vue Props
Vue Router active-class 属性
Vue keep-alive
Vue nextTick
Vue v-model 指令
Vue vue-loader
Vue 事件处理
Vue 依赖注入应用 Provide 和 Inject
Vue 动静组件
Vue 插槽
Vue 条件渲染 v-if 与 v-show
Vue 的深度 CSS 选择器
Vue 过渡和动画
Vue 递归组件
Vue 错误处理 — onErrorCaptured 钩子
Vue2 与 Vue3 生命周期变动
Vue3 Suspense 组件
Vue3 Teleport 组件
Vue3 中应用 defineAsyncComponent 提早加载组件
Vue3 应用 Event Bus
Vue3 注册全局组件
Vuex
watch 与 watchEffect 的区别
应用 v-once 和 v-memo 指令来晋升性能
应用导航守卫爱护 Vue 路由
创立您的第一个 Vue 自定义指令
制作您的第一个 Vue 插件
在 Vue 中应用 $emit 自定义事件
在 Vue2 与 Vue3 中构建雷同的组件

React Hooks
React 入门
<> 与 React.Fragment 的区别
应用 React 主动聚焦字段
应用 Styled Components 编写款式化组件

Express 中的 app.use() 办法
Express 中的错误处理中间件
JavaScript Lodash 工具库
Node Koa 框架
Node 工具 — PM2 备忘录
Node 工具 — nodemon 详解
Node.js Buffer 模块 — 缓冲区
Node.js HTTP 和 HTTPS 模块
Node.js Net 模块
Node.js OS 模块
Node.js assert 模块
Node.js path 模块
Node.js readline 模块
Node.js 中的 util.promisify() 办法
Node.js 文件系统模块
Node.js 读取 CSV 文件
Node.js 递归获取文件夹中的所有文件
open 模块
package.json 中的 browserslist 字段
package.json 详解
process.nextTick() 在 Node.js 中是如何工作的？
应用 Day.js 模块实现国际化日期
应用 Express 上传文件
应用 Node.js 显示整个对象
应用 Node.js 递归创立目录
应用 fs 模块的举荐办法
应用 fs.extra 模块代替 fs
应用 node-cron 在 Node.js 中调度工作
应用 sendFile() 在 Express 中发送动态文件
应用 zx 编写在 Node 中编写 Bash 脚本
创立 GUID、UUID
在 ES 模块（Node.js）中导入 JSON 文件
在 Node.js 中应用 execa 运行命令
在 Node.js 中将 Buffer 转换为 JSON 和 Utf8 字符串
如何下载和解压 Node 中的 gz 文件
如何在 Node.js 中应用 ES6 导入语法
如何在 Node.js 中管制没有依赖项的日志音讯
如何在 Node.js 应用程序中应用 ESLint
如何对 npm package 进行发包
罕用的 npm 命令
关上包的主页或存储库
查看 npm 模块更新
递归删除 node_modules
避免 npm 装置不反对的 Node.js 版本

Git Amend
Git Cherry Pick
Git Diff
Git hooks
Git status 的简短版本和不同的 –porcelain 模式
Git 罕用配置和技巧
Git 日志
GitHub repo 疾速筛选文件
git clean 删除未跟踪的文件或目录
git init 和 git init –bare 有什么区别？
git pull 和 git fetch 的区别
为不同的 GitHub 帐户应用多个 SSH 密钥
删除本地和近程 Git 分支
在不切换分支的状况下查看不同分支中的文件
将本地 git 标签推送到 GitHub 上的近程仓
用于 GitHub markdown 和 Git 提交的 emoji 表情

仅执行一次函数
实现 JSON.parse
实现 Object.assign
实现 Object.create
实现 call、apply、bind
实现 instanceof 运算符
实现 new 运算符
实现 reduce
实现 sleep 函数
实现一个 AJAX HTTP 申请库
实现一个 Event Bus
实现一个 add 办法
实现一个简略的单页利用
实现数组洗牌函数
构建一个虚构 DOM
构建模块打包器
模仿 setInterval
节流和防抖

强缓存与协商缓存
浏览器 Hack
浏览器内核
浏览器同源策略
浏览器如何解析 CSS 选择器？
浏览器如何解析 CSS？
浏览器如何解析 HTML？
浏览器重绘和回流（Repaint & Reflow）

Battery API
Picture in Picture
Resize Observer API
Screen Capture API
Web Bluetooth API
Web Fullscreen API
Web Geolocation API
Web Share API
Web Vibration API
应用 MediaDevices API 拜访您的网络摄像头

HTTP 中 GET 和 POST 的区别？
TCP 和 UDP 的区别
URL 重定向
常见的 HTTP 状态码
常见的网络端口及对应服务

大 O 符号
数据结构 — 二叉树
数据结构 — 双向链表
数据结构 — 图
数据结构 — 堆栈
数据结构 — 链表
数据结构 — 队列
每日一算法：Levenshtein 间隔
每日一算法：k 均值
每日一算法：二项式系数
每日一算法：冒泡排序
每日一算法：分治法
每日一算法：归并排序
每日一算法：疾速排序
每日一算法：插入排序
每日一算法：斐波那契数列
每日一算法：杨辉三角形
每日一算法：欧氏间隔
每日一算法：汉明间隔
每日一算法：素数
每日一算法：阶乘

MongoDB 删除数据库
MongoDB 删除文档
MongoDB 删除汇合
Mongoose Populate
Mongoose Schema 和 SchemaTypes
Mongoose aggregate
Mongoose create() 办法
Mongoose 中的 ObjectIds
Mongoose 中的 Promise
Mongoose 中的枚举
Mongoose 惟一索引（unique）
Mongoose 插入文档
Mongoose 数组
Mongoose 工夫戳（timestamps）
Mongoose 查问文档
Mongoose 更新文档
Mongoose 的 save() 办法
Mongoose 解决 Query was already executed 问题
应用 Mongoose 连贯到 MongoDB
在 Mongoose 中应用 MongoDB Explain

Bash 罕用快捷键
bash 中的历史命令快捷方式
curl -fsSL
curl 和 wget 有什么区别？
shell 大括号扩大 — {}
同时创立多个文件
如何在 Linux 中删除在特定端口上运行的过程

Nginx 配置旧域名重定向到新域名
Nginx 动态文件与 root 和 alias 混同
查找 Nginx 配置文件

Code Golf

什么是 CSRF 攻打？
什么是 CSS？
什么是 NPM？
什么是 REST？
什么是 XSS 攻打？
什么是 YAML？
什么是包管理器？
什么是繁多职责准则？

VS Code 快捷键
从 GitHub 疾速转至 VS Code

其余文章会陆续整顿 …

关于javascript:前端这两年的文章总结

HTML

CSS

CSS Layout

JavaScript

DOM

TypeScript

Vue

React

Node

Git 和 GitHub

手写系列

浏览器

Web API

计算机网络

数据结构和算法

MongoDB

Linux

Nginx

Magic

WTF

VS Code