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

这几天整顿的一下过往的文章和笔记，备份到了 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

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

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

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

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
• 节流和防抖

浏览器

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

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 拜访您的网络摄像头

计算机网络

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

数据结构和算法

• 大 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

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

Magic

Code Golf

WTF

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

VS Code

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

其余文章会陆续整顿 …