sunhui-blog / blog-1

Life is a moment :notebook_with_decorative_cover:

该系列随笔是对前端知识架构的梳理。内容涉及前端工程化、JavaScript/CSS、数据结构、设计模式、React 技术栈等。 📔

基础篇

• 水平布局解决方案
• 聊聊 BFC
• 跨域二三事_{(相关项目)}
• HTTP 小册
• HTML5 精粹
• 你不知道的 JavaScript
• 红皮书里的细节
• 从 JavaScript 到 TypeScript _{(相关项目)}
• 探寻 JavaScript 精度问题
• 探寻 webpack 插件机制_{(相关项目)}
• babel 执行机制
• npm 与 yarn
• 移动端场景知识
• 重构笔记
• 源码映射

更多章节

进击的 React

从 0 到 1 实现 React

• 前置准备
• JSX 和 Virtual DOM
• 组件 和 state|props
• 生命周期
• diff 算法
• setState 优化
• ref 的实现
• PureComponent 的实现
• HOC 探索
• onChange 事件以及受控组件

组件开发实践

• Form
• Swipe
• Tabs
• Affix
• Button
• CheckBox
• Form
• SearchBar
• Modal
• TextArea
• 编写具有弹性的组件
• 主题色替换方案
• 移动端组件测试指北

相关技术栈

• Redux 与 Mobx 适用场景
• MVVM 框架解析之双向绑定 _{(相关项目)}
• 探索从 MVC 到 MVVM + Flux 架构模式的转变_{(相关项目)}
• redux middleware 源码分析
• 在 react 使用 immutable 数据的优势
• 路由的简易实现
• React 在服务端渲染的实现
• 定制自己的 react-script
• 使用 React 全家桶搭建一个后台管理系统 _{(相关项目)}

• React16.x 特性剪辑
• Fiber 数据结构
• 深入 Fiber 架构
• 流畅性
• Schedule
• 你不知道的 requestIdleCallback
• React Suspense 解决了什么
• React Hooks 深入系列
• React Hooks 深入系列 —— 设计模式

• 二生万物,hooks
• React 暗器百解

编程范式

• 函数式编程入门

ES6 札记

• Decorator
• Promise_{(相关项目)}
• Generator
• Async
• CommonJS 模块与 ES6 模块间的差异
• ES6 继承与 ES5 继承的差异
• 扩展运算符
• 箭头函数
• Reflect

数据结构

• 栈
• 队列
• 链表
• 集合
• 字典
• 哈希表
• 二叉树
• 图
• 排序|查找
• 动态规划
• 贪心算法

LeetCode

设计模式

• 单例模式
• 策略模式
• 代理模式
• 迭代器模式
• 发布-订阅模式
• 命令模式
• 组合模式
• 模板方法模式
• 享元模式
• 职责链模式
• 中介者模式
• 装饰者模式
• 状态模式
• 适配者模式
• 观察者模式

issue

TypeScript

• 基础篇

Node.js

• 简版 express.js 的实现
• 简版 koa.js 的实现
• Node.js 异步异闻录 _{(相关项目)}
• 用 Node.js 把玩一番 Alfred Workflow _{(相关项目)}

番外

• 原生 JS 实现一个瀑布流插件 _{(相关项目)}
• 实现一个自定义工具类库 _{(相关项目)}
• 走近 Python

项目架构

• CAS 登入流程
• RPC 在网关项目的实践
• 解读 IoC 框架 —— InversifyJS

文章采用知识共享署名 4.0 国际许可协议进行许可。

RoadMap