mini-code

流行框架与库的源码分析与最小实现
授权协议 Readme
开发语言 JavaScript
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 不详
投 递 者 龙高歌
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

流行框架与库的源码分析与最简实现

大家好,我是山月,这是我新开的一个坑:手写源码最小实现每一行代码都有注释

当我们在深入学习一个框架或者库时,为了了解它的思想及设计思路,也为了更好地使用和避免无意的 Bug,源码研究是最好的方法。

对于 koavdom 这种极为简单,而应用却很广泛的框架/库,莫不如是。为了验证是否已足够了解它,可以实现一个仅具备核心功能的迷你的库。正所谓,麻雀虽小,五脏俱全。

对于源码,我将尽可能注释每一行代码,并以文章讲述原理与实现过程。目前已实现列表为:

由于目前浏览器对 ESM 已支持良好,对于客户端相关源码使用 ESM 书写,比如 vDOM、React 等。而对于服务端使用 CommonJS 书写,如 koa、express 等。

运行与目录结构

本项目采用 monorepo 进行维护,如果你对它不了解,可直接忽略。

所有的迷你版本实现置于 code 文件夹,源文件置于 index.js 中,示例文件置于两个位置:

  • example.js
  • example/

关于查看及运行示例,请使用命令 npm run example

$ git clone git@github.com:shfshanyue/mini-code.git

# 在 npm v7 中,会对所有 workspace 中的依赖进行安装
$ npm i

# 在 monorepo 中运行某个源码示例
# 或者进入代码目录,再运行示例: cd code/express && npm run example
$ npm run example -w express

如果你对 monorepo 不了解:

$ git clone git@github.com:shfshanyue/mini-code.git

$ npm i
$ cd example/express
$ npm i
$ npm run example

源码之前

在调试了千万遍源码之后,才能对源码稍微理解,摆在这里的问题是:如何调试源码?

TODO: 以前三篇文章,随后附上

  1. 浏览器中如何调试源码?
  2. Node 中如何调试源码?

与我交流

添加我的微信 shanyue94:

  • 拉你进仓库对应的源码交流群,和 5000+ 小伙伴们一起交流源码
  • 山月的原创文章与分享

推荐阅读源码清单

以下源码按次序,从易到难进行阅读,否则碰到大块头(比如 React),读不下去,容易怀疑自我,从简单的开始读起,有助于培养自信心

偏客户端

  • ms: 时间转换器,Vercel 出品,周下载量 8000 万,几乎是 npm 下载量最高的 package 之一,从它看起,让你知道看源码/发包其实也很简单。
  • github markdown style: 以为很简单,实际上很难。锻炼 CSS 的最好方法,就是给 markdown 写一个主题。
  • lru-cache: LRU Cache,前端及服务端框架中的常用依赖。
  • tsdx: 零配置的 npm 库开发利器,与 CRA 相似,不过它主要面向库开发者而非业务开发者,了解它是如何提供零配置功能,看懂默认配置做了那些优化,并了解它的所有工具链 (prettier、eslint、size、bundleanalyzer、rollup、typescript、storybook)。
  • create-react-app: React 最广泛的脚手架,读懂三点。一,如何生成脚手架;二,如何实现 eject;三,了解 cra 的所有重要依赖,读懂默认 webpack 配置。
  • webpack (runtime code): 读懂两点。一、打包 cjs/esm 后的运行时代码;二、打包有 chunk 后的运行时代码。
  • axios: 请求库,了解它是如何封装源码且如何实现拦截器的。
  • immer: 不可变数据,可提升做深拷贝时的性能,可应用在 React 中。
  • use-debounce: React 中的一个 debounce hook。减少 React 的渲染次数,可提升性能。
  • react-virtualized: React 中的虚拟列表优化,可提升性能。
  • react-query: 用以请求优化的 react hooks,可提升性能。
  • react-router: React 最受欢迎的路由库
  • redux/react-redux: React 最受欢迎的状态库
  • vite: 秒级启动及热更行,可大幅提升开发体验。
  • vue3: 最难的放到最后边,读懂 vue3 的性能优化体验在哪些方面。
  • react: 最难的放到最后边,读懂 Fiber 及其它所提供的性能优化。

偏服务端

  • koa
  • body-parser: express 甚至是大部分服务端框架所依赖的用以解析 body 的库
  • next
  • ws: 了解 websocket 是如何构造 Frame 并发送数据的 (在此之前可阅读 node/http 源码)
  • node: 最难的放到最后边

TODO

  • ws
  • native http server
  • native http client
  • lru cache
  • trie router
  • vdom
  • react
  • redux
  • react-query
  • use-debuounce
  • axios
  • vue
  • vite
  • dataloader
  • mustable
  • parser (re/js/css/md)
  • stream pipeline (nodejs)
  • code highlighter
  • babel
  • html-webpack-plugin
  • 苹果设备没更新一次,版本都得维护一下,不然后台分析就老说收集到不明手机型号。��为大家献上新的获取iPhone 6,iPhone 6s,iPhone6Plus, iPhone6sPlus,iPad Air2, iPad Mini 4的设备型号获取方式 附上苹果官网设备型号表供参考 官网型号对照链接 https://www.theiphonewiki.com/wiki/Models //获得设备型

  • 回顾一下 Vuex 的基础用法 // store/index.js import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex) export default new Vuex.Store({ state: {}, getters: {}, actions: {}, mutations: {}, }) // main

  • #include <stdio.h> #include <stdlib.h> #define MAX_SIZE 4 #define MAX_TOTAL 10 void inputMatrices( int matrix[MAX_SIZE][MAX_SIZE], int size ); void printMatrices( int matrix[MAX_SIZE][MAX_SIZE], int s

  • Given a nested list of integers represented as a string, implement a parser to deserialize it. Each element is either an integer, or a list -- whose elements may also be integers or other lists. Note:

  • on startup: ./.erlang $HOME/.erlang From [url]http://mryufeng.iteye.com/blog/pdf[/url] [quote]io:format("~s~n", [binary_to_list(erlang:system_info(info))]). netstat -n | awk '/^tcp/ {++S[$NF]} END {fo

 相关资料
  • 本文向大家介绍CI框架Session.php源码分析,包括了CI框架Session.php源码分析的使用技巧和注意事项,需要的朋友参考一下 CI的Session并不是原生的session,正是我前面所有的cookie based session,另外,CI可以根据用户选择配置是否将session存入数据库中,本人很喜欢这个功能,还有就是“闪出数据”的功能,既闪出数据只是对下次服务器请求可以,之后就

  • 问题 你想写解析并分析Python源代码的程序。 解决方案 大部分程序员知道Python能够计算或执行字符串形式的源代码。例如: >>> x = 42 >>> eval('2 + 3*4 + x') 56 >>> exec('for i in range(10): print(i)') 0 1 2 3 4 5 6 7 8 9 >>> 尽管如此,ast 模块能被用来将Python源码编译成一个可被分

  • 本文向大家介绍javascript运动框架用法实例分析(实现放大与缩小效果),包括了javascript运动框架用法实例分析(实现放大与缩小效果)的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript运动框架用法。分享给大家供大家参考,具体如下: 该运动框架可以实现多物体任意值运动 运行效果截图如下: 例子: 更多关于JavaScript运动效果相关内容可查看本站专题:《Ja

  • 本文向大家介绍CI框架安全类Security.php源码分析,包括了CI框架安全类Security.php源码分析的使用技巧和注意事项,需要的朋友参考一下 CI安全类提供了全局防御CSRF攻击和XSS攻击策略,只需要在配置文件开启即可: 并提供了实用方法: CI也提供了安全函数: xss_clean()//xss过滤 sanitize_filename()//净化文件名 do_hash()//md

  • 本文向大家介绍CI框架装载器Loader.php源码分析,包括了CI框架装载器Loader.php源码分析的使用技巧和注意事项,需要的朋友参考一下 顾名思义,装载器就是加载元素的,使用CI时,经常加载的有: $this->load->library() $this->load->view() $this->load->model() $this->load->database() $this->l

  • 本文向大家介绍Java实现AOP功能的封装与配置的小框架实例代码,包括了Java实现AOP功能的封装与配置的小框架实例代码的使用技巧和注意事项,需要的朋友参考一下 本文通过是动态代理实现的AOP功能的封装与配置的小框架.加深对动态代理和AOP编程的理解 设计 根据配置文件的键xxx对应的值(类全名)创建相应类的对象。 当且仅当xxx对应的值为com.iot.proxy.aopframework.P