index

这个项目以为创建之初时间比较早，目的就是为了记录自己开发过程中遇到的坑和问题。 后来渐渐演变为记录一些学习知识的一个记录文档， 以为很多东西很感兴趣，但是学习了之后使用场景不多， 导致遗忘比较快， 所以我写文章的时候， 就尽量写的详细， 能整理为一个体系的就尽量整理为一个体系。

当时目标就是 JS 点击就能 run, html 双击就能跑，毫无工程化可言。 我新起了一个项目 node-index-core, 这个项目只放置代码， 本项目只放置学习文章。相互配合，同时更新，前端系列的学习和维护 一直会坚持到我整个职业生涯。

目录

• 专题知识库
  • react 专题
  • ECMAScript 最新语法
  • css 专题
  • javascript 设计模式
  • 基础知识点总结_非常重要
  • canvas 总结
  • 算法学习
  • 学习 javascript 数据结构与算法
  • DOM 和 BOM
  • 深入 webpack 工程化
  • 学习 TypeScript
  • 测试专题
  • 深入浅出 MySQL 数据库开发 优化与管理维护
  • Linux 相关学习
  • 前端数据可视化 D3.js 学习
  • docker&DevOps
  • 小程序
  • RXJS 学习专题 - 已经放弃（因为看不到收益）
  • 微前端专题
  • 好用的库与框架
  • 性能分析与性能优化
  • vue
  • 工程化专题
• 知识库
  • 前端技术知识
    • web 相关
    • web 功能实现
    • 移动端相关
    • 网络与网络安全相关
    • 浏览器相关
    • 前端模板引擎(这个已经落伍了， es6 模板字符串更加强大)
    • 样式与布局
    • 常见的工具方法实现
    • JS 原理与语法相关
    • 静态资源相关研究
    • 项目与工程相关
    • 项目实践相关
    • 零碎基础算法问题
    • 编译与转译
    • TypeScript 相关
    • git 相关
    • 渲染与项目性能优化
    • 图形与图表
  • 技术生态圈
    • jetbrains 体系
    • mac 体系
    • 职业发展与规划
    • 项目思考
    • 展望未来技术方向
    • 其他应用技术方向
  • Node 技术知识
    • Node 基础知识
    • 模块规范
    • node api
    • node 应用技术
    • node 服务端
    • 爬虫
    • 内存优化
    • V8 引擎
    • GraphQL
    • mock 数据
    • Node 项目构建
    • 深入原理研究
    • npm
    • 包管理
    • Deno
    • 展望 Node 未来
  • 日常采坑与记录
  • 优秀技术文档收集与前沿技术归档
  • 优秀的开源项目
  • 基础功能探索
• 发展与 OKR
  • 发布的 npm 开源模块
  • 在折腾的个人项目
  • 研究的项目
  • 研究的问题
  • 源码研究
  • 自我管理

专题知识库

react 专题

• 基础语法使用
• 状态管理
• react-router
• 其他知识点和实战相关知识点
• react hooks
• 源码分析
• 其他经典文章
• 其他的一些研究话题

ECMAScript 最新语法

• let 和 const
• 变量的解构赋值
• 字符串的扩展
• 数值的扩展和 Math 对象的扩展
• 数组的扩展
• 函数的扩展
• 对象的扩展
• Proxy 和 Reflect
• Set 和 Map 数据结构
• Iterator 和 for...of 循环
• Generator
• Promise
• 其他知识点儿的总结
• es10 的新特性

css 专题

• 基础知识
• 进阶与案例
• 其他知识总结

javascript 设计模式

• 第二篇、创建型设计模式
• 第三篇、结构型设计模式
• 第四篇、行为型设计模式
• 第五篇、技巧型设计模式
• 第六篇、架构型设计模式

基础知识点总结_非常重要

canvas 总结

算法学习

学习 javascript 数据结构与算法

• 01 章、javascript 基础
• 03 章、栈
• 04 章、队列
• 05 章、链表
• 06 章、集合
• 07 章、字典和散列表
• 08 章、树
• 09 章、图
• 10 章、排序和搜索算法

DOM 和 BOM

深入 webpack 工程化

• 基础
• webpack 优化问题
• 其他补充知识点
• 实战案例
• webpack 插件和 loader 开发
• 其他
• 遗留问题待解决

学习 TypeScript

• 一文读懂 TypeScript 泛型及应用（ 7.8K 字）
• 你不知道的 TypeScript 泛型（万字长文，建议收藏）
• 1.2W 字 | 了不起的 TypeScript 入门教程
• TypeScript 中的声明文件
• 结合实例学习 Typescript
• 一份不可多得的 TS 学习指南（1.8W 字）

测试专题

• 01 篇 javascript 单元测试框架 mochajs 详解
• 02 篇 断言库 chai
• 03 篇 代码覆盖率工具 Istanbul 入门教程
• 04 篇 node 层服务端 api 接口测试
• 05 篇 TypeScript 测试
• 06 篇 Jest 测试框架
• 07 篇 react 测试: jest+enzyme
• 08 篇 E2E
• 其他

深入浅出 MySQL 数据库开发 优化与管理维护

Linux 相关学习

• 基础部分
• 应用服务器
• 数据库服务
• 其他服务
• shell
  • Shell 重定向 ＆>file、2>&1、1>&2 、/dev/null 的区别
• vim
• nginx
• CI&CD

前端数据可视化 D3.js 学习

docker&DevOps

小程序

RXJS 学习专题 - 已经放弃（因为看不到收益）

微前端专题

好用的库与框架

性能分析与性能优化

vue

• vue 项目实际开发总结
• MVVM 双向绑定原理研究与简单的双向绑定实现(包含简单的事件绑定)
• 深度解析！Vue3 & React Hooks 新 UI 组件原理：Modal 弹窗
• ** 史上最强 vue 总结---面试开发全靠它了
• vue 使用的转场特效插件 - vueg
• 全面解析 vue3.0 diff 算法

工程化专题

[谷歌扩展程序](/books/专题知识库/22、chorme extensions/readmd.md)

知识库

前端技术知识

web 相关

• web-component
• [译] 2018 来谈谈 Web Component
• 前端存储除了 localStorage 还有啥
• 忍法，scroll 翻滚之术！
• 这些 Web API 真的有用吗?

web 功能实现

• 层叠轮播图的简易制作
• js 焦点图片层叠轮播切换滚动
• 原生 js 实现图片层叠轮播切换效果
• 瀑布流
• 原生 JavaScript 实现造日历
• 15 个元素实现无限滚动 **
• H5 直播的疯狂点赞动画是如何实现的？(附完整源码)
• 模仿实现一个直播的点赞动画
• 基于 HTML5 技术的幻灯片编辑、播放、控制的全套方案

移动端相关

• 移动端 rem 转换的办法和策略
• vue 移动端 h5 适配解决方案（rem or vw）
• 关于 JS 的触摸方法
• 微信小程序 - 扩展插件（发送请求、Promise API、表单验证、Restful API）
• 你了解过移动端适配吗

网络与网络安全相关

• 深入 fetch
• 手写 axios 核心原理，再也不怕面试官问我 axios 原理
• 骚年，你确定没有人在折腾你的站点吗？
• axios 的一些基本用法
• Ajax,jQuery ajax,axios 和 fetch 介绍、区别以及优缺点
• 《HTTP 权威指南》每章的知识点总结

浏览器相关

• Chrome 调试技巧
• 关于屏幕高度，可见区域高度，目标元素高度，文档高度研究
• ** 近万字新手 chrome 扩展开发简单入门
• 从零开始写一个采集图片的 chrome 插件
• 当浏览器全面禁用三方 Cookie
• 浏览器里的本地数据库：IndexedDB
• Chrome 插件开发全攻略 **
• Chrome DevTools 之 NetWork 面板

前端模板引擎(这个已经落伍了， es6 模板字符串更加强大)

• doT 模板引擎基础语法知识点
• handlebars 使用大全
• handlebars-helpers 主要使用说明和源码解析

样式与布局

• flex 布局的学习
• 清除浮动的解决方案总结
• 移动端弹出层滚动时禁止 body 滚动，静止滚动
• css3 新单位 vw、vh、vmin、vmax 的使用详解
• 非常厉害的关于 css 样式
• 垂直和水平居中方案
• CSS3 的 calc()使用
• 纯 CSS 实现多行文字截断
• 你未必知道的 49 个 CSS 知识点
• 灵活运用 CSS 开发技巧(66 个实用技巧，值得收藏)
• 不受控制的 position:fixed
• Flex 弹性布局（附超 Q 小 demo 🐸 小青蛙 ） **
• 灵活运用 CSS 开发技巧
• 前端展示太长，截取为点点点
• 如何让 json 转为 style 样式字符串， 适用于小程序

常见的工具方法实现

• 数字金额转繁体中文大写字符串
• js 整理常见数组方法和字符串方法操作
• 深入 javascript 中 Math 算数对象与精确到小数位的向上舍入和向下舍入解决办法

JS 原理与语法相关

• 关于闭包的研究

• You Don't Need jQuery

• 关于 this 指针的研究

• 实现函数防抖

• 实现函数节流

• 深入理解 JavaScript 中的尾调用

• FormData 使用方法详解

• 基于 JavaScript 判断浏览器到底是关闭还是刷新

• 实现 js 熔断机制

• 如何避开 JavaScript 浮点数计算精度问题（如 0.1+0.2!==0.3）

• 通过实现 25 个数组方法来理解及高效使用数组方法(长文,建议收藏)

• 为了性能选择 for 循环遍历？

• JavaScript 装饰器

• js 中的 pipe

• 每个 JavaScript 工程师都应懂的 33 个概念

• 常用的正则验证例子

• css 加载会造成阻塞吗？

• Base64 原理

• 复杂判断的优雅写法

• 异步问题

  • 深入理解 JavaScript 异步
  • JavaScript 异步、栈、事件循环、任务队列
  • 在 JS 循环中正确使用 async 与 await

• 深浅拷贝

  • Object.assign()与深拷贝
  • 如何写出一个惊艳面试官的深拷贝?
  • 引用、浅拷贝及深拷贝 到 Map、Set（含对象 assign、freeze 方法、WeakMap、WeakSet 及数组 map、reduce 等等方法） **
  • 关于深拷贝和浅拷贝的实现

• reduce 使用

  • 你为什么这么强，什么都敢盘（reduce）
  • ** 25 个你不得不知道的数组 reduce 高级用法

• call、apply、bind

  • 深入 call、apply、bind 实现原理
  • 深入研究 call 和 apply(实现继承)

静态资源相关研究

• 关于图片预加载的研究
• 《SVG 精髓》 阅读笔记
• canvas 导出图片方法总结
• 点击链接下载图片研究
• 一文了解文件上传全过程（1.8w 字深度解析，进阶必备）

项目与工程相关

• ts 配置文件详解
• Yarn Workspace 使用指南
• 项目规范（包含 git 管理项目的使用）
• 指定文件、指定行、指定代码块不使用 ESLint 语法检查
• eslint 配置文件 eslintrc 参数详解
• 常用 eslint 配置
• 常用 tslint 配置
• eslint 检测 TS 项目
• Commitizen(git-cz)配置
• 使用 husky、prettier、lint、commitlint 构建规范化项目实践
• lerna
  • 使用 lerna 管理大型前端项目
  • lerna 的基础使用
  • Lerna 中文教程详解
  • All in one：项目级 monorepo 策略最佳实践
  • Monorepo 的这些坑
• commitLint
  • commitlint+husky 规范 commit 日志
  • Git commit message 和工作流规范
  • Git 提交消息: git-cz
• 项目创建从 editorconfig 和 prettier 开始
• 一文搞懂 peerDependencies
• 使用 ESLint+Prettier 来统一前端代码风格
• 重新认识 package.json
• 谷歌出品的 Web 打包方案：Web Bundles 技术揭秘

项目实践相关

• 讲道理，仅 3 行核心 css 代码的 rate 评分组件
• 基于 HTML5 Canvas 的拓扑组件开发
• 使用 WebGL 去实现一个拖拽式 UI 代码生成 App
• 为什么 Vue3.0 使用 Proxy 实现数据监听？defineProperty 表示不背这个锅
• Ant Design 中使用 CodeMirror2 代码编辑器
• 请你实现一个大文件上传和断点续传
• 编写一个 axios 这样的库
• 前端轻量化部署脚手架实践
• 手动实现高仿 github 的内容 diff 效果
• 原生 JS 封装拖动验证滑块你会吗？
• 1 小时搞定 cropper.js 制作头像/图片上传、裁剪、并发送至后端
• 一张刮刮卡竟包含这么多前端知识点
• 可视化拖拽组件库
  • 可视化拖拽组件库一些技术要点原理分析 **
  • 可视化拖拽组件库一些技术要点原理分析（二）**
  • 可视化拖拽组件库一些技术要点原理分析（三）
• 2021 如何让你的 Table 组件无限可能
• React 实现简易的图片拖动排序
• 从破解某设计网站谈前端水印
• 实现 Web 端自定义截屏

零碎基础算法问题

• 手写算法并记住它：快速排序（5 行代码简单版）
• 树形对象查找
• 前端该如何准备数据结构和算法？

编译与转译

• AST 抽象语法树

  • AST 入门
  • 抽象语法树（AST）
  • AST 详解与运用
  • AST 原理，让你蜕变为高级前端工程师的原理
  • 平庸前端码农之蜕变 — AST

• babel

  • 深入浅出 Babel 上篇：架构和原理 + 实战
  • 深入浅出 Babel 下篇：既生 Plugin 何生 Macros
  • babel 配置-各阶段的 stage 的区别

TypeScript 相关

• 从零开始配置 TypeScript 项目
• 会写 TypeScript 但你真的会 TS 编译配置吗？

git 相关

• git 常用命令汇总/git 命令行
• git 使用 SSH 密匙配置
• README 文件语法解读，即 Github Flavored Markdown 语法介绍
• MarkDown 添加图片的三种方式 - 找时间自己总结一边
• GithubPages 教程 在 GithubPages 上搭建个人主页
• Git Submodule 项目子模块管理
• git commit message emoji 使用指南
• Github 上开源项目 readme 里好看的高大上的有趣的徽章从何而来
• gitbook-use
• 你可能不知道的 15 个有用的 Github 功能
• git clone 太慢了的解决办法
• github 开发人员在七夕搞事情：remote: Support for password authentication was removed on August 13, 2021.
• Github 自动发版机器人配置
• Github 实用技巧
• GitHub 如何选择合适的 license

渲染与项目性能优化

• 高性能渲染十万条数据
• ** 如何实现高性能的在线 PDF 预览
• 关于内存泄漏的文章

图形与图表

• Three.js 零基础入门教程
• 一步步带你实现 web 全景看房——three.js

技术生态圈

jetbrains 体系

• WebStrom Live Template 建代码块
• jetbrains:同步服务器代码
• 在 WebStorm 中，配置能够识别 Vue CLI 3 创建的项目的别名 alias @
• WebStorm 关闭自动保存功能添加*星星标记

mac 体系

• Mac 机上安装 nvm 遇到的坑--nvm command not found
• brew 常用命令行
• Mac 系统占用空间大、空间不够、查看系统文件大小分布
• mac Homebrew 装包加速
• 解决 mac 安装 homebrew 后报错-bash: brew: command not found
• mac 上安装 nvm 遇到的坑

职业发展与规划

• 前端职业规划 - 写给那些想去和刚去大厂的年轻人(鸡汤有毒)
• 简析解决问题的通用方法论
• 技术人员升级打怪的方法论

项目思考

• 【深度思考】如何优雅告知用户，网站正在升级维护？
• 测试金字塔实战
• ** 前端代码质量-圈复杂度原理和实践

展望未来技术方向

• 从 GraphQL 到前端数据管理的革命 - GraphQL 干货笔记

其他应用技术方向

• 手把手教你快速搭建专属的 storybook

Node 技术知识

Node 基础知识

• 【译】Node.js 子进程：你需要知道的一切
• 关于 node.js 中流的理解
• 深入理解 Node.js 中的进程与线程

模块规范

• CommonJs 模块规范
• require 时，exports 和 module.exports 的区别你真的懂吗？

node api

• node 基础 api_path
• node 基础 api_Buffer
• node 基础 api_event
• node 基础 api_fs

node 应用技术

• 把文档文本文件(*.docx)转换文 html
• 前后端对称加解密解决方案
• 封装日志模块 - 基于 chalk
• WebSocket 和 Socket.io
• 使用 Proxy 构建响应式系统
• 【图文详解】200 行 JS 代码，带你实现代码编译器（人人都能学会）
• 如何优雅的实现消息通信？

node 服务端

• 用于 node.js 的 HTTP 请求日志程序中间件:morgan
• linux 安装 mongoDB 与 NodeJs 远程连接
• 前端工程师须知的 CORS 知识
• 《大前端进阶 Node.js》系列 双十一秒杀系统（进阶必看）
• 项目部署
  • pm2 实践指南
  • 快速线上部署的模块 now
• orm
  • Sequelize 文档的中文版本

爬虫

• node 爬虫

内存优化

• node 内存优化

V8 引擎

• V8 引擎初步介绍
• JavaScript-V8 引擎

GraphQL

• GraphQL + Apollo + Vue 牛刀小试
• apollo-graphql 自己使用的一点姿势

mock 数据

• 5 分钟教你用 nodeJS 手写一个 mock 数据服务器
• 前端 mock 解决方案

Node 项目构建

• 从 0 构建一个 TS-Node 项目

深入原理研究

• 使用四十行代码实现一个核心 koa
• 你不能不知道的 Koa 实现原理

npm

• 发布、安装自己的 npm 模块
• npm 镜像源的切换问题
• 分分钟教会你搭建企业级的 npm 私有仓库

包管理

• Pnpm: 最先进的包管理工具

Deno

• Deno 正式发布，彻底弄明白和 node 的区别

展望 Node 未来

• [译] Node.js 新特性将颠覆 AI、物联网等更多惊人领域

日常采坑与记录

• audio 标签兼容性自动播放解决方案
• 填坑-输入中文时，拼音阶段会触发 input 事件

优秀技术文档收集与前沿技术归档

• 目录索引

优秀的开源项目

• 优秀开源项目搜藏目录

基础功能探索

• 人民币大小写互换

发展与 OKR

发布的 npm 开源模块

• koa2 日志监控中间件:koa-logs-middleware
• 前端工程化
• 前端工程化 - 模板项目
• 小程序接入 redux

在折腾的个人项目

• 在折腾的个人项目 - 总目录
• 基于 vue 和 express 的一个小型电商全栈项目
• react 新闻站项目 pc+移动双端
• 基于 socket.IO 的一个较为复杂的项目案例，参考自《node.js 实战》
• react 实战项目实战一：基于 socket.io 和 express 的一个全栈项目
• 基于 vue 的一些列 vue 全家桶的技术实现实例
• webpack3 的学习与代码示例
• 基于 vue 的移动端在线音乐播放器
• koa2 的学习笔记项目 demo

研究的项目

研究的问题

源码研究

• 源码研究

自我管理

• 待研究知识 **
• 规划
• 思考