{"id":13680678,"url":"https://github.com/biaochenxuying/blog","last_synced_at":"2025-10-04T21:55:18.710Z","repository":{"id":39204820,"uuid":"149532949","full_name":"biaochenxuying/blog","owner":"biaochenxuying","description":"大前端技术为主，读书笔记、随笔、理财为辅，做个终身学习者。","archived":false,"fork":false,"pushed_at":"2023-10-27T06:05:30.000Z","size":30003,"stargazers_count":4729,"open_issues_count":67,"forks_count":725,"subscribers_count":115,"default_branch":"master","last_synced_at":"2025-05-28T19:41:31.194Z","etag":null,"topics":["algorithms","element-ui","express","html","javascript","nodejs","react","structure","typescript","vue","vue-typescript-element","vuepress","webpack"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/biaochenxuying.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-09-20T01:22:07.000Z","updated_at":"2025-05-25T12:30:07.000Z","dependencies_parsed_at":"2024-01-14T14:43:48.779Z","dependency_job_id":null,"html_url":"https://github.com/biaochenxuying/blog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/biaochenxuying/blog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/biaochenxuying","download_url":"https://codeload.github.com/biaochenxuying/blog/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278380463,"owners_count":25977216,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["algorithms","element-ui","express","html","javascript","nodejs","react","structure","typescript","vue","vue-typescript-element","vuepress","webpack"],"created_at":"2024-08-02T13:01:20.223Z","updated_at":"2025-10-04T21:55:18.677Z","avatar_url":"https://github.com/biaochenxuying.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"\n![夜尽天明](https://upload-images.jianshu.io/upload_images/12890819-6e2289f29c0d3b39.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n\n## 简介\n\n\u003c!-- 地址：[https://biaochenxuying.cn/](https://biaochenxuying.cn/) --\u003e\n\n\n\u003e **芳华正茂始少年，时光正好，未来可期 ！**\n\n技术为主，读书笔记、随笔、理财为辅，做个终身学习者。\n\n收获不止技术，还有财富。\n\u003c!-- \n\u003e 以最优惠的方式购买极客时间课程：https://github.com/biaochenxuying/preferential-courses ，涵盖了后端、架构、前端、移动、人工智能、大数据、产品、运营、运维、测试等 --\u003e\n\n\u003c!-- \u003e 专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称的项目：https://github.com/FrontEndGitHub/FrontEndGitHub --\u003e\n\n\n\u003c!-- ## 分类\n\n- [JavaScript 数据结构与算法之美](https://github.com/biaochenxuying/blog/projects/10)\n- [JavaScript](https://github.com/biaochenxuying/blog/projects/4)\n- [Vue.js](https://github.com/biaochenxuying/blog/projects/3)\n- [ES 6](https://github.com/biaochenxuying/blog/projects/2)\n- [React.js](https://github.com/biaochenxuying/blog/projects/5)\n- [Node.js](https://github.com/biaochenxuying/blog/projects/7)\n- [MongoDB](https://github.com/biaochenxuying/blog/projects/5)\n- [软技能](https://github.com/biaochenxuying/blog/projects/11)\n- [硬核面试专题](https://github.com/biaochenxuying/blog/projects/12)\n- [前端工程师成长之路](https://github.com/biaochenxuying/blog/projects/14)\n- [半小时硬核理财入门](https://github.com/biaochenxuying/blog/projects/9)\n- [随笔](https://github.com/biaochenxuying/blog/projects/5) --\u003e\n\n\u003c!-- ## 专栏\n\n- [**掘金专栏**](https://juejin.im/user/591d6b4d0ce463006926ae40) --\u003e\n\n## 目录\n\n- [简介](#简介)\n- [目录](#目录)\n- [文章](#文章)\n  - [Vue3.x](#vue3x)\n  - [TypeScript](#typescript)\n  - [前端工程师的成长之路](#前端工程师的成长之路)\n  - [安全](#安全)\n  - [译文](#译文)\n  - [随笔](#随笔)\n  - [JavaScript 数据结构与算法之美](#javascript-数据结构与算法之美)\n  - [前端硬核面试专题](#前端硬核面试专题)\n  - [Vue.js](#vuejs)\n  - [React.js](#reactjs)\n  - [ES 6](#es-6)\n  - [JavaScript](#javascript)\n  - [Puppeteer \u0026 自动化](#puppeteer--自动化)\n  - [Node.js](#nodejs)\n  - [性能优化](#性能优化)\n  - [VuePress \u0026 GitBook](#vuepress--gitbook)\n- [计划](#计划)\n  - [webpack 原理及源码分析](#webpack-原理及源码分析)\n  - [Vue 原理及源码分析](#vue-原理及源码分析)\n  - [小程序入门到熟练](#小程序入门到熟练)\n\n\n## 文章\n\n\n\u003e **文章版权为夜尽天明所有，未经允许，不得转载；如要转载文章，请联系笔者**。\n\n### Vue3.x\n\n- [1. Vue3 全家桶 + TS+ Vite2 + element-plus 搭建简洁时尚的博客网站实战及踩坑记](https://github.com/biaochenxuying/blog/issues/90)\n- [2. 通过10个实例小练习，快速入门熟练 Vue3.0 核心新特性](https://github.com/biaochenxuying/blog/issues/63)\n\n### TypeScript\n\n- [1. TypeScript 中提升幸福感的 10 个高级技巧](https://github.com/biaochenxuying/blog/issues/80)\n\n\u003c!-- ### 软技能\n\n- [1. **GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目**](https://github.com/biaochenxuying/blog/issues/45)\n- [2. GitHub 吸星大法 - 一年收获 2000+ Star 的心得](https://github.com/biaochenxuying/blog/issues/49)\n- [3. 提升 google 使用效率的 30个快捷键、16个扩展插件与 11个前端调试方法](https://github.com/biaochenxuying/blog/issues/58)\n- [4. **Github 近 200k Star 的计算机学习资源，在家也能成为大牛！**](https://github.com/biaochenxuying/blog/issues/62)\n- [5. 推荐一个程序员必备网站之一：Dev Hints ，非常实用！](https://github.com/biaochenxuying/blog/issues/70)\n- [6. 2020 - 2021 年 Web 前端最新导航](https://github.com/biaochenxuying/blog/issues/74)\n- [7. **恕我直言，你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧**](https://github.com/biaochenxuying/blog/issues/75) --\u003e\n\n### 前端工程师的成长之路\n\n\u003c!-- - [1. 我的 2020 年终总结 - 乾坤未定，你我皆黑马](https://github.com/biaochenxuying/blog/issues/79)\n- [1. 我的 2019 年 - 当勤精进，但念无常，何以解忧，唯有暴富](https://github.com/biaochenxuying/blog/issues/55)\n- [2. 前端工程师的 2019 年年终总结 - 真香篇](https://github.com/biaochenxuying/blog/issues/54)\n- [3. 2018 年，我的本命年 - 前端工作师的年终总结](https://github.com/biaochenxuying/blog/issues/19) --\u003e\n- [前端架构师亲述：前端工程师成长之路的 N 问 及 回答](https://github.com/biaochenxuying/blog/issues/33)\n\n### 安全\n\n- [1. 浏览器指纹：原来我们一直被互联网巨头监视，隐私在网上裸奔、无处可藏](https://github.com/biaochenxuying/blog/issues/60)\n\n### 译文\n\n- [1. 惊艳！可视化的 js：动态图演示 Promises \u0026 Async/Await 的过程！](https://github.com/biaochenxuying/blog/issues/64)\n- [2. 惊艳！可视化的 js：动态图演示-事件循环 Event Loop](https://github.com/biaochenxuying/blog/issues/65)\n- [3. 惊艳！小姐姐用动画图解 Git 的 10 大命令，这也太秀了吧！](https://github.com/biaochenxuying/blog/issues/67)\n\n### 随笔\n\n\u003c!-- - [1. 说说最近的状态与一件开心的事：获得了两个奖](https://github.com/biaochenxuying/blog/issues/89)\n- [1. 相亲感悟：关于恋爱择偶的几点直击心灵深处的认知](https://github.com/biaochenxuying/blog/issues/83)\n- [2. 程序员如何优雅的挣零花钱！这里提供 9 种思路打开你挣钱的世界](https://github.com/biaochenxuying/blog/issues/59) --\u003e\n- [程序员不止眼前的逻辑和代码，还应有健康的体魄和精气神](https://github.com/biaochenxuying/blog/issues/6)\n\n\n### JavaScript 数据结构与算法之美\n\n- [1. JavaScript 数据结构与算法之美 - 时间和空间复杂度](https://github.com/biaochenxuying/blog/issues/29)\n- [2. JavaScript 数据结构与算法之美 - 线性表（数组、队列、栈、链表）](https://github.com/biaochenxuying/blog/issues/34)\n- [3. JavaScript 数据结构与算法之美 - 实现一个前端路由，如何实现浏览器的前进与后退 ？](https://github.com/biaochenxuying/blog/issues/30)\n- [4. JavaScript 数据结构与算法之美 - 栈内存与堆内存 、浅拷贝与深拷贝](https://github.com/biaochenxuying/blog/issues/35)\n- [5. JavaScript 数据结构与算法之美 - 递归](https://github.com/biaochenxuying/blog/issues/36)\n- [6. JavaScript 数据结构与算法之美 - 非线性表（树、堆）](https://github.com/biaochenxuying/blog/issues/37)\n- [7. JavaScript 数据结构与算法之美 - 冒泡排序、选择排序、插入排序](https://github.com/biaochenxuying/blog/issues/39)\n- [8. JavaScript 数据结构与算法之美 - 归并排序、快速排序、希尔排序、堆排序](https://github.com/biaochenxuying/blog/issues/40) \n- [9. JavaScript 数据结构与算法之美 - 计数排序、桶排序、基数排序](https://github.com/biaochenxuying/blog/issues/41) \n- [10. JavaScript 数据结构与算法之美 - 十大经典排序算法汇总](https://github.com/biaochenxuying/blog/issues/42) \n- [11. JavaScript 数据结构与算法之美 - **GitHub 上 170K+ Star 的前端学习的数据结构与算法项目**](https://github.com/biaochenxuying/blog/issues/43)\n\n\n### 前端硬核面试专题\n\n- [1. fe-interview：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 数据结构与算法 + Git](https://github.com/biaochenxuying/blog/blob/master/interview/fe-interview.md)\n- [2. GitHub 上 100K+ Star 的前端面试开源项目汇总（进大厂必备）](https://github.com/biaochenxuying/blog/issues/47)\n- [3. 2019 前端秋季社招面试经历总结（二年多经验）](https://github.com/biaochenxuying/blog/issues/48)\n\n\n### Vue.js\n\n- [1. 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构(文字版)](https://github.com/biaochenxuying/blog/issues/28)\n- [2. 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构](https://github.com/biaochenxuying/blog/issues/27)\n- [3. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记](https://github.com/biaochenxuying/blog/issues/25)\n- [4. vue-cli3.x 新特性及踩坑记](https://github.com/biaochenxuying/blog/issues/2)\n- [5. 基于 vue+mint-ui 的 mobile-h5 的项目说明](https://github.com/biaochenxuying/blog/issues/4)\n- [6. 复杂表格设计数据格式](https://github.com/biaochenxuying/blog/issues/7)\n\n### React.js\n\n\n- [1. github 授权登录教程与如何设计第三方授权登录的用户表](https://github.com/biaochenxuying/blog/issues/23)\n- [2. 项目文档说明：react + Ant Design 的 blog-react-admin](https://github.com/biaochenxuying/blog/issues/16)\n- [3. react + Ant Design + 支持 markdown 的 blog-react 项目的文档说明](https://github.com/biaochenxuying/blog/issues/15)\n- [4. react + node + express + ant + mongodb 的简洁兼时尚的博客网站](https://github.com/biaochenxuying/blog/issues/14)\n\n\n### ES 6\n\n- [1. JavaScript ES2021 最值得期待的 5 个新特性解析](https://github.com/biaochenxuying/blog/issues/87)\n- [2. 那些必会用到的 ES6 精粹](https://github.com/biaochenxuying/blog/issues/1)\n\n\n### JavaScript\n\n- [1. 前端解决第三方图片防盗链的办法 - html referrer 访问图片资源 403 问题](https://github.com/biaochenxuying/blog/issues/31)\n- [2. 原生 js 实现一个有动画效果的进度条插件 progress](https://github.com/biaochenxuying/blog/issues/21)\n- [3. 原生 js 实现一个前端路由 router](https://github.com/biaochenxuying/blog/issues/22)\n- [4. js 实现上下改变父 div 的高度，左右上下动态分割孩子的宽高](https://github.com/biaochenxuying/blog/issues/20)\n- [5. js 日期对象 setMonth 的锅](https://github.com/biaochenxuying/blog/issues/13)\n- [6. 细数 JavaScript 实用黑科技(二)](https://github.com/biaochenxuying/blog/issues/12)\n- [7. 细数 JavaScript 实用黑科技(一)](https://github.com/biaochenxuying/blog/issues/11)\n- [8. 面试题之从敲入 URL 到浏览器渲染完成](https://github.com/biaochenxuying/blog/issues/3)\n- [9. JS 是单线程，你了解其运行机制吗 ？](https://github.com/biaochenxuying/blog/issues/8)\n- [10. js 递归调用](https://github.com/biaochenxuying/blog/issues/9)\n- [11. WebKit 技术内幕之浏览器与 WebKit 内核](https://github.com/biaochenxuying/blog/issues/10)\n- [12. 前端工程化必备，语义化版本号扫盲，支持任意版本号位数的比较方法](https://github.com/biaochenxuying/blog/issues/78)\n\n\n### Puppeteer \u0026 自动化\n\n- [1. Puppeteer 自动化的性能优化与执行速度提升](https://github.com/biaochenxuying/blog/issues/69)\n\n### Node.js\n\n- [1. 解秘 Node.js 单线程实现高并发请求原理，以及串联同步执行并发请求的方案](https://github.com/biaochenxuying/blog/issues/86)\n- [2. 基于 node express mongodb 的 blog-node 项目文档说明](https://github.com/biaochenxuying/blog/issues/17)\n- [3. 服务器小白的我，是如何将 node+mongodb 项目部署在服务器上并进行性能优化的](https://github.com/biaochenxuying/blog/issues/18)\n\n\n### 性能优化\n\n- [1. 一次网站的性能优化之路 -- 天下武功，唯快不破](https://github.com/biaochenxuying/blog/issues/24)\n\n### VuePress \u0026 GitBook\n\n- [1. 借助 VuePress 和 GitBook ，10 分钟即可免费部署你的静态博客网站](https://github.com/biaochenxuying/blog/issues/53)\n\n\u003c!-- ### 半小时硬核理财入门\n\n- [1. 用钱生钱，从掌握金钱的规律开始](https://github.com/biaochenxuying/blog/issues/26)\n- [2. 用钱生钱，谈谈我对财富自由的理解](https://github.com/biaochenxuying/blog/issues/82)\n- 精彩待续 ... --\u003e\n\n\u003c!-- ### 学习资源\n\n- [1. **150+ 本技术类常用电子书开源了，包括 前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍**](https://github.com/biaochenxuying/awesome-books)\n- [2. 极客时间上的《TypeScript 开发实战》课程资源，包含课件、思维导图、课程源代码](https://github.com/biaochenxuying/blog/tree/master/typescript-in-action)\n- [3. 视频资料分享 - Vue、React、Node、MongoDB 全栈、打造商城系统、实战项目汇总](https://mp.weixin.qq.com/s/7f767Y5FHM9i2_GeUSz-Iw)\n\n[⬆️ 返回顶部](#目录) --\u003e\n  \n## 计划\n\n以下是笔者往后的计划，计划执行的先后顺序，视情况而定。\n\n### webpack 原理及源码分析\n\n- 精彩待续 ...\n  \n   \n### Vue 原理及源码分析\n\n- 精彩待续 ...\n  \n  \n### 小程序入门到熟练\n\n- 精彩待续 ...\n  \n\u003c!--   \n### Flutter 入门到熟练\n\n- 精彩待续 ...  --\u003e\n\n[⬆️ 返回顶部](#目录)\n\n\u003c!-- \n## 服务器\n\n笔者觉得每个开发者都应该拥有自己的网站和服务器，这可是很酷的事情，学习 Linux、跑跑脚本、建站、搭博客啥的都行啊。\n\n因为笔者就有自己的服务器，而且有两台了，用于平时的学习，还搭建了自己的网站。\n\n有不少读者问过我，为什么我学的那么快的呢 ？ 怎么在一年内学了那么知识的...\n\n其实也没什么秘决，就是平时有自己的服务器了，就爱折腾，学到的知识能很快得到验证，所以学起来兴致高一点。\n\n特别是大三和大四的学生，买了服务器，搭建个项目给面试官看也香，对找工作和面试都加分，还可以熟悉技术栈。\n\n[想学得快，就得有自己的服务器来折腾才行（低于 1 折、89/年、229/3年，比学生机还便宜）](https://biaochenxuying.cn/articleDetail?article_id=5de65dd90283dc742f8f633a)\n\n比如笔者的两个网站：\n\n\u003e https://biaochenxuying.cn/\n\n\u003e https://www.kwgg2020.com/ --\u003e\n\n\u003c!-- \n[⬆️ 返回顶部](#目录) --\u003e\n\n\u003c!-- ## 撩我\n\n\n| 微信 | 公众号 |\n| :------: |  :------: |\n| 微信：**CB834301747** \u003cdiv align=\"center\" style=\"margin-top: 10px;\"\u003e ![CB834301747](./images/CB834301747.jpeg) \u003c/div\u003e | \u003cdiv align=\"center\"\u003e ![](https://upload-images.jianshu.io/upload_images/12890819-50b85ba33dd7ba90.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) \u003c/div\u003e |\n\n\n\u003e 欢迎关注微信公众号 “**[全栈修炼](https://upload-images.jianshu.io/upload_images/12890819-9a13b43f4feb8f84.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)**”，回复 **电子书** 就送你 **1000+** 本精华编程电子书；回复 **1024** 送你一套完整的 **前端** 视频教程。\n\n\n![](https://upload-images.jianshu.io/upload_images/12890819-860e00b3a4b6c418.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n有需要的就来拿吧，**绝对免费，无套路获取**。 --\u003e\n\n\n\u003c!-- [⬆️ 返回顶部](#目录) --\u003e\n\n\n\u003c!-- ## 打赏\n\n\u003e **江山父老能容我，不使人间造孽钱**。\n\n如果你感觉有收获，欢迎给我点个 Star 、或者真心赞赏一下，都是对我最大的鼓励，我会更有动力输出有价值的内容。\n\n\u003cdiv align=\"center\"\u003e\n\n![](https://upload-images.jianshu.io/upload_images/12890819-ffab7bd24d08c00d.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/250)\n\n\u003c/div\u003e --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiaochenxuying%2Fblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiaochenxuying%2Fblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiaochenxuying%2Fblog/lists"}