{"id":14978003,"url":"https://github.com/muyunyun/blog","last_synced_at":"2025-05-14T14:07:55.906Z","repository":{"id":37664972,"uuid":"110709562","full_name":"MuYunyun/blog","owner":"MuYunyun","description":"Life is a moment :notebook_with_decorative_cover:","archived":false,"fork":false,"pushed_at":"2025-05-12T02:05:57.000Z","size":264290,"stargazers_count":1619,"open_issues_count":1,"forks_count":229,"subscribers_count":71,"default_branch":"main","last_synced_at":"2025-05-12T03:24:22.150Z","etag":null,"topics":["algorithm","css","data-structure","design-pattern","front-end","javascript","modern-testing","raspberrypi","react","typescript"],"latest_commit_sha":null,"homepage":"http://muyunyun.cn/blog","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MuYunyun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"roadmap.png","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["http://muyunyun.cn/sponsor/"]}},"created_at":"2017-11-14T15:40:02.000Z","updated_at":"2025-04-27T08:41:08.000Z","dependencies_parsed_at":"2023-10-15T02:42:40.718Z","dependency_job_id":"59972ecb-33f0-470a-a4c8-bc76c5ccaa9a","html_url":"https://github.com/MuYunyun/blog","commit_stats":{"total_commits":1050,"total_committers":4,"mean_commits":262.5,"dds":0.003809523809523818,"last_synced_commit":"2d8ba877749d74010ea1cf12c2e105f4fb47ad29"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuYunyun%2Fblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuYunyun%2Fblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuYunyun%2Fblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuYunyun%2Fblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MuYunyun","download_url":"https://codeload.github.com/MuYunyun/blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254160109,"owners_count":22024567,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algorithm","css","data-structure","design-pattern","front-end","javascript","modern-testing","raspberrypi","react","typescript"],"created_at":"2024-09-24T13:56:40.844Z","updated_at":"2025-05-14T14:07:55.877Z","avatar_url":"https://github.com/MuYunyun.png","language":"JavaScript","funding_links":["http://muyunyun.cn/sponsor/"],"categories":[],"sub_categories":[],"readme":"\u003c!--\nabbrlink: z5dbvyod\n--\u003e\n\n![views](https://raw.githubusercontent.com/MuYunyun/blog/traffic/traffic-blog/views.svg)\n![views](https://raw.githubusercontent.com/MuYunyun/blog/traffic/traffic-blog/views_per_week.svg)\n![clones](https://raw.githubusercontent.com/MuYunyun/blog/traffic/traffic-blog/clones.svg)\n![clones](https://raw.githubusercontent.com/MuYunyun/blog/traffic/traffic-blog/clones_per_week.svg)\n\nThis is my personal blog created using \u003ca href='https://github.com/MuYunyun/create-react-doc' target='_blank'\u003ecreate-react-doc\u003c/a\u003e to write and record my daily thoughts. I would be grateful if you could point out any mistakes by clicking on the link [there](https://github.com/MuYunyun/blog/issues/new).\n\n\u003ch2\u003eOutline\u003c/h2\u003e\n\n- [Data Structure](#data-structure)\n- [Design Pattern](#design-pattern)\n- [React Series](#react-series)\n  - [Deep Into React](#deep-into-react)\n  - [Component Design](#component-design)\n  - [React Stack](#react-stack)\n  - [Build React from scratch](#build-react-from-scratch)\n  - [Modern Testing](#modern-testing)\n- [TypeScript](#typescript)\n- [FE Cloud](#fe-cloud)\n  - [JavaScript](#javascript)\n  - [CSS](#css)\n  - [Node.js](#nodejs)\n  - [FE CLOUD](#fe-cloud-1)\n  - [Project Framework](#project-framework)\n- [RaspberryPi](#raspberrypi)\n- [Sponsor](#sponsor)\n- [Thanks](#thanks)\n\n### Data Structure\n\nLet's embark on a journey through the world of data structures together! There's no doubt that this adventure will be incredibly interesting and enjoyable. Before we begin, I want to emphasize two valuable points:\n\n1. Keep your interest and persistence in learning.\n2. Remember that thoughtful understanding is more important than simply taking action.\n\n\u003e [Travel Of LeetCode](https://github.com/MuYunyun/blog/blob/main/LeetCode/README.md)\n\n* [Stack](https://muyunyun.cn/blog/c9b1b7wg)\n* [Queue](https://muyunyun.cn/blog/87unmb8q)\n* [List](https://muyunyun.cn/blog/z4nj8u3b)\n* [Set](https://muyunyun.cn/blog/yqpmr5zs)\n* [Dictionary](https://muyunyun.cn/blog/c1nhctpd)\n* [Hash Table](https://muyunyun.cn/blog/nzpqsh6o)\n* [Binary Tree](https://muyunyun.cn/blog/qykpal2y)\n* [Graph](https://muyunyun.cn/blog/c3ns7c83)\n\n\u003cdetails\u003e\n  \u003csummary\u003ealgorithm\u003c/summary\u003e\n\n* [Algorithm And Complexy](https://muyunyun.cn/blog/cbrpc1ne)\n* [Recursive](https://muyunyun.cn/blog/4id99bn9)\n* [Binary Search](https://muyunyun.cn/blog/ps27a5tp)\n* [Greedy Algorithm](https://muyunyun.cn/blog/pkr9cdeo)\n* [Dynamic Programming](https://muyunyun.cn/blog/wjncoyei)\n\n\u003c/details\u003e\n\n### Design Pattern\n\n* [Singleton Pattern](https://muyunyun.cn/blog/rizxul9p)\n* [Stralegy Pattern](https://muyunyun.cn/blog/d8asfapg)\n* [Proxy Pattern](https://muyunyun.cn/blog/euxm3din)\n* [Iterator Pattern](https://muyunyun.cn/blog/2qm4d8um)\n* [Publish/Subscribe Pattern](https://muyunyun.cn/blog/3cmugmwo)\n* [Command Pattern](https://muyunyun.cn/blog/77vv1d3r)\n* [Composite Pattern](https://muyunyun.cn/blog/1byioyjm)\n* [Template Method Pattern](https://muyunyun.cn/blog/631wdfgg)\n* [Flyweight Pattern](https://muyunyun.cn/blog/m92cq52g)\n* [Chain of Responsibility Pattern](https://muyunyun.cn/blog/k27cb3ml)\n* [Mediator Pattern](https://muyunyun.cn/blog/p9mgwwap)\n* [Decorator Pattern](https://muyunyun.cn/blog/mzqguwi3)\n* [State Pattern](https://muyunyun.cn/blog/s9x6auju)\n* [Adapter Pattern](https://muyunyun.cn/blog/n9yua87r)\n* [Observer Pattern](https://muyunyun.cn/blog/zyhpx5ad)\n\n### React Series\n\nThis section will progressively introduce the world of React. It will cover the principles of React, how to gracefully design React components, and how to build a simple React application from scratch.\n\n#### Deep Into React\n\n* [React16.x 特性剪辑](https://muyunyun.cn/blog/v5nv35eg)\n* [Fiber 数据结构](https://muyunyun.cn/blog/f3uuo1ij)\n* [深入 Fiber 架构](https://muyunyun.cn/blog/bqtcq53y)\n* [流畅性](https://muyunyun.cn/blog/13ymm2xq)\n* [Schedule](https://muyunyun.cn/blog/v6uidkki)\n* [你不知道的 requestIdleCallback](https://muyunyun.cn/blog/lmjv3sgz)\n* [React Suspense 解决了什么](https://muyunyun.cn/blog/9ajh17y7)\n* [React Hooks 深入系列](https://muyunyun.cn/blog/t3in9kmo)\n* [React Hooks 设计模式](https://muyunyun.cn/blog/96j58x88)\n* [React 暗器百解](https://muyunyun.cn/blog/v11si119)\n\n#### Component Design\n\n* [重新认识受控与非受控组件](https://muyunyun.cn/blog/56hn38ez)\n\n- [ ] [Build Mobile First Animation In React](https://muyunyun.cn/blog/n6mg8zen)\n\n\u003cdetails\u003e\n  \u003csummary\u003eMore\u003c/summary\u003e\n\n* [Button](https://muyunyun.cn/blog/1g88yeca)\n* [Icon](https://muyunyun.cn/blog/jv1qrbmc)\n* [Menu](https://muyunyun.cn/blog/5kj24dd3)\n* [Keyboard](https://muyunyun.cn/blog/6ibj18mp)\n* [Carousel](https://muyunyun.cn/blog/n2xngha2)\n* [Tabs](https://muyunyun.cn/blog/sic5ph49)\n* [Affix](https://muyunyun.cn/blog/fd4ap89c)\n* [AddressPicker](https://muyunyun.cn/blog/oe699e2p)\n* [CheckBox](https://muyunyun.cn/blog/91evrivd)\n* [Form](https://muyunyun.cn/blog/yjp6glo1), [oneForm](https://github.com/MuYunyun/oneForm/issues/1)\n* [SearchBar](https://muyunyun.cn/blog/zennyqde)\n* [Modal](https://muyunyun.cn/blog/r5u2z2vr)\n* [Textarea](https://muyunyun.cn/blog/51ezcvd1)\n* [主题色替换方案](https://muyunyun.cn/blog/kvqod8vz)\n* [移动端测试指北](https://muyunyun.cn/blog/x2orssyg)\n\n- [ ] [组件设计实践](https://muyunyun.cn/blog/l25patvw)\n\n\u003c/details\u003e\n\n#### React Stack\n\n* [Redux 与 Mobx 适用场景](https://muyunyun.cn/blog/idu7szrn)\n* [MVVM 框架解析之双向绑定](https://github.com/MuYunyun/FeCloud/issues/11) \u003ca href='https://github.com/MuYunyun/mvvm' target=\"_blank\"\u003e\u003csub\u003e(相关项目)\u003c/sub\u003e\u003c/a\u003e\n* [探索从 MVC 到 MVVM + Flux 架构模式的转变](https://github.com/MuYunyun/blog/issues/14) \u003ca href='https://github.com/MuYunyun/stateManage' target=\"_blank\"\u003e\u003csub\u003e(相关项目)\u003c/sub\u003e\u003c/a\u003e\n* [redux middleware 源码分析](https://github.com/MuYunyun/blog/issues/15)\n* [在 React 使用 immutable 数据的优势](https://muyunyun.cn/blog/4sdxeudx)\n* [路由的简易实现](https://muyunyun.cn/blog/163w51fk)\n* [React 在服务端渲染的实现](https://github.com/MuYunyun/blog/issues/4)\n* [定制自己的 react-script](https://muyunyun.cn/blog/ymisqdg2)\n* [使用 React 全家桶搭建一个后台管理系统](https://github.com/MuYunyun/blog/issues/3)\n\u003ca href='https://github.com/MuYunyun/reactSPA' target=\"_blank\"\u003e\u003csub\u003e(相关项目)\u003c/sub\u003e\u003c/a\u003e\n\n#### Build React from scratch\n\n* [前置准备](https://muyunyun.cn/blog/xn5bap3c)\n* [JSX 和 Virtual DOM](https://muyunyun.cn/blog/zv9zkp1d)\n* [组件 和 state|props](https://muyunyun.cn/blog/bfdttr5b)\n* [生命周期](https://muyunyun.cn/blog/dr9fpnig)\n* [diff 算法](https://muyunyun.cn/blog/3r7gdpzk)\n* [setState 优化](https://muyunyun.cn/blog/um9lmlbq)\n* [ref 的实现](https://muyunyun.cn/blog/jee59i99)\n* [PureComponent 的实现](https://muyunyun.cn/blog/x9xp4uob)\n* [HOC 探索](https://muyunyun.cn/blog/hyavrsmu)\n* [onChange 事件以及受控组件](https://muyunyun.cn/blog/v3n4ihlt)\n\n#### Modern Testing\n\n* [React 现代化测试](https://muyunyun.cn/blog/xghy9857)\n* [Jest 与 react-testing-Library](https://muyunyun.cn/blog/cvrgghl3)\n\n### TypeScript\n\n* [TypeScript 基础篇](https://muyunyun.cn/blog/qy2pz4hv)\n* [TypeScript 中的类型](https://muyunyun.cn/blog/a3a3qa6u)\n* [TypeScript 中的函数使用](https://muyunyun.cn/blog/gqpyuise)\n* [TypeScript 中的工具类型](https://muyunyun.cn/blog/fvrpelzp)\n* [Types vs Interfaces](https://muyunyun.cn/blog/z9tf63bq)\n* [TypeScript extends 精读与实践](https://muyunyun.cn/blog/d1jkxo7l)\n\n### FE Cloud\n\nThis section will explore the colorful world of frontend development.\n\n#### JavaScript\n\n* [你不知道的 JavaScript](https://github.com/MuYunyun/blog/issues/2)\n* [红皮书里的细节](https://muyunyun.cn/blog/cudw5n7t)\n* [探寻 JavaScript 精度问题](https://muyunyun.cn/blog/dzjdfedl)\n* [函数式编程入门](https://muyunyun.cn/blog/hlkezw7u)\n* [Decorator](https://muyunyun.cn/blog/396wjsh1)\n* [Promise](https://muyunyun.cn/blog/l9w7axkn)\u003ca href='https://github.com/MuYunyun/repromise' target=\"_blank\"\u003e\u003csub\u003e(相关项目)\u003c/sub\u003e\u003c/a\u003e\n* [Generator](https://muyunyun.cn/blog/l3p7jbgc)\n* [Async](https://muyunyun.cn/blog/y1nlgvkb)\n* [CommonJS 模块与 ES6 模块间的差异](https://muyunyun.cn/blog/muao7eyd)\n* [ES6 继承与 ES5 继承的差异](https://muyunyun.cn/blog/czmq4cx2)\n* [扩展运算符](https://muyunyun.cn/blog/yvcua1zk)\n* [箭头函数](https://muyunyun.cn/blog/esoqf37z)\n* [Reflect](https://muyunyun.cn/blog/lm3wt8vq)\n\n#### CSS\n\n* [INHERITED AND NON-INHERITED](https://muyunyun.cn/blog/nehdqz9q)\n\n\u003cdetails\u003e\n  \u003csummary\u003emore\u003c/summary\u003e\n\n* [水平布局解决方案](https://muyunyun.cn/blog/mf7g91hg)\n* [聊聊 BFC](https://muyunyun.cn/blog/5wjknen4)\n* [过渡与动画](https://muyunyun.cn/blog/tc5w4yiz)\n\n\u003c/details\u003e\n\n#### Node.js\n\n* [简版 express.js 的实现](https://muyunyun.cn/blog/ni1jporq)\n* [简版 koa.js 的实现](https://muyunyun.cn/blog/pd6i666j)\n* [Node.js 异步异闻录](https://github.com/MuYunyun/blog/issues/7)\n\u003ca href='https://github.com/MuYunyun/demos-of-node.js' target=\"_blank\"\u003e\u003csub\u003e(相关项目)\u003c/sub\u003e\u003c/a\u003e\n* [用 Node.js 把玩一番 Alfred Workflow](https://github.com/MuYunyun/blog/issues/6) \u003ca href='https://github.com/MuYunyun/commonSearch' target=\"_blank\"\u003e\u003csub\u003e(相关项目)\u003c/sub\u003e\u003c/a\u003e\n\n#### FE CLOUD\n\n* [基于 SSR 的预渲染首屏直出方案](http://muyunyun.cn/blog/g3v1c5bq)\n* [SEO 在 SPA 站点中的实践](http://muyunyun.cn/blog/ettzfags)\n* [Talk about TC39](https://muyunyun.cn/blog/sezgk3yj)\n* [跨域二三事](https://muyunyun.cn/blog/j7uygw6y) \u003ca href='https://github.com/MuYunyun/cross-domain' target=\"_blank\"\u003e\u003csub\u003e(相关项目)\u003c/sub\u003e\u003c/a\u003e\n* [HTTP 小册](https://muyunyun.cn/blog/mx6wr51s)\n* [HTML5](https://muyunyun.cn/blog/oizmpcx4)\n* [探寻 webpack 插件机制](https://muyunyun.cn/blog/96xkvdzm) \u003ca href='https://github.com/MuYunyun/analyze-webpack-plugin' target=\"_blank\"\u003e\u003csub\u003e(相关项目)\u003c/sub\u003e\u003c/a\u003e\n* [Babel 执行机制](https://muyunyun.cn/blog/yb1qmuv1)\n* [npm 与 yarn](https://muyunyun.cn/blog/iwwepxpg)\n* [移动端场景知识](https://muyunyun.cn/blog/4ocu6ahz)\n* [原生 JS 实现一个瀑布流插件](https://github.com/MuYunyun/FeCloud/issues/12) \u003ca href='https://github.com/MuYunyun/waterfall' target=\"_blank\"\u003e\u003csub\u003e(相关项目)\u003c/sub\u003e\u003c/a\u003e\n* [实现一个自定义工具类库](https://github.com/MuYunyun/blog/issues/9) \u003ca href='https://github.com/MuYunyun/diana' target=\"_blank\"\u003e\u003csub\u003e(相关项目)\u003c/sub\u003e\u003c/a\u003e\n* [走近 Python](https://github.com/MuYunyun/blog/issues/8)\n\n#### Project Framework\n\n* [CAS 登入流程](https://muyunyun.cn/blog/p7j9m7jg)\n* [RPC 在网关项目中的实践](https://muyunyun.cn/blog/exzzjh9z)\n* [解读 IoC 框架 —— InversifyJS](https://muyunyun.cn/blog/9szgkw3d)\n\n### RaspberryPi\n\nLet's have some fun! This Raspberry Pi journey will unlock your server, Linux, and Nginx skills.\n\n\u003e Thanks for the [pi](https://github.com/zhaoolee/pi) project specially.\n\n1. [树莓派简介\u0026烧录系统](https://muyunyun.cn/blog/rahvuwkb)\n2. [内网穿透](https://muyunyun.cn/blog/fes9wogn)\n3. [基于树莓派搭建家庭服务器](https://muyunyun.cn/blog/r4zxdn6n)\n4. [给树莓派安装 Docker 环境](https://muyunyun.cn/blog/2a97pq3a)\n5. [给树莓派部署 RSSHub](https://muyunyun.cn/blog/wns8hpzc)\n6. [HTTPS 协议配置](https://muyunyun.cn/blog/mx5pvgl1)\n7. [基于树莓派部署 code-server](https://muyunyun.cn/blog/n45adwng)\n8. [基于树莓派部署 filebrowser](https://muyunyun.cn/blog/do5qh9dg)\n\n### Sponsor\n\nIf you enjoy this project, you are welcome to either watch or star it✨. Alternatively, you can show your support by buying me a cup of coffee.\n\n\u003ca href=\"https://muyunyun.cn/sponsor\"\u003e\u003cimg src='https://camo.githubusercontent.com/45ce6667a35b63fd6a1ba6978d030a7f52ff5b1b262c5c8aa3ece29afc469ac8/68747470733a2f2f63646e2e6275796d6561636f666665652e636f6d2f627574746f6e732f76322f64656661756c742d7265642e706e67' width='200' /\u003e\u003c/a\u003e\n\n### Thanks\n\nI would like to thank my dear [rabbit🐰](https://github.com/DaphneChang) for her support.\n\n[![Star History Chart](https://api.star-history.com/svg?repos=MuYunyun/blog\u0026type=Date)](https://star-history.com/#MuYunyun/blog\u0026Date)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuyunyun%2Fblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuyunyun%2Fblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuyunyun%2Fblog/lists"}