前端这两年的文章总结
站长
· 阅读数 325
这几天整理的一下过往的文章和笔记，备份到了 Github 上，地址👉 blog。
如果我的内容帮助到了您，欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~~ 👆
我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。
后续的内容也会第一时间整理的 Github，以下整理一份分类清单（将跳转至 Github）：
HTML
- 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 标签
- 防止浏览器要求翻译
- 隐式表单提交并不总是有效
CSS
- 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 Layout
JavaScript
- ++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
- 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 样式
- 获取元素相对于另一个元素的位置
- 获取或设置文档标题
- 获取文档高度和宽度
- 获取样式
- 获取父级元素
- 获取祖先元素
- 获取选中的文本
- 视口、设备和文档大小
- 触发事件
- 设置样式
- 返回包含给定元素的所有同级的数组
- 选择元素的文本内容
- 通过给定的选择器获取最近的元素
- 重置表单
- 阻止事件的默认操作
- 隐藏所有指定的元素
TypeScript
- 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
时刻保持查阅文档的好习惯，文档时刻在更新，文章不一定。
- 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
Node
- 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 和 GitHub
- 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
- 节流和防抖
浏览器
Web API
- 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 访问您的网络摄像头
计算机网络
数据结构和算法
- 大 O 符号
- 数据结构 — 二叉树
- 数据结构 — 双向链表
- 数据结构 — 图
- 数据结构 — 堆栈
- 数据结构 — 链表
- 数据结构 — 队列
- 每日一算法：Levenshtein 距离
- 每日一算法：k 均值
- 每日一算法：二项式系数
- 每日一算法：冒泡排序
- 每日一算法：分治法
- 每日一算法：归并排序
- 每日一算法：快速排序
- 每日一算法：插入排序
- 每日一算法：斐波那契数列
- 每日一算法：杨辉三角形
- 每日一算法：欧氏距离
- 每日一算法：汉明距离
- 每日一算法：素数
- 每日一算法：阶乘
MongoDB
- 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
Linux
- Bash 常用快捷键
- bash 中的历史命令快捷方式
- curl -fsSL
- curl 和 wget 有什么区别？
- shell 大括号扩展 — {}
- 同时创建多个文件
- 如何在 Linux 中删除在特定端口上运行的进程
Nginx
Magic
WTF
VS Code
其他文章会陆续整理...