├── docs ├── public │ ├── ikun │ │ ├── ikun.css │ │ └── ikun.mp4 │ ├── vue3.jpeg │ ├── vue │ │ └── arch.jpg │ ├── wechat2.png │ ├── wechat3.jpeg │ ├── about-page.png │ ├── react │ │ └── arch.jpg │ ├── source │ │ └── arch.png │ ├── wanzhuanvue.jpg │ ├── algorithm │ │ ├── all.png │ │ ├── arch.png │ │ ├── head.jpeg │ │ └── intro.png │ ├── gongzhonghao.jpeg │ ├── blockchain-2018.jpg │ ├── interview │ │ └── index.jpeg │ ├── vue.svg │ ├── al.svg │ ├── subtitle │ │ └── index.html │ ├── sijiao.svg │ ├── gray.js │ ├── vite.svg │ ├── site.html │ ├── gray1.html │ ├── ikun-danmu.html │ ├── bili.svg │ ├── react.svg │ ├── gray.html │ ├── interview.svg │ ├── ad.html │ └── ikun.html ├── books │ └── morden-jslib.md ├── interview │ ├── vue │ │ ├── 16-until.md │ │ ├── 19-v-focus.md │ │ ├── 26-v-model.md │ │ ├── 7-raw-api.md │ │ ├── 10-lifecycle.md │ │ ├── 13-dom-portal.md │ │ ├── 15-useToggle.md │ │ ├── 17-useCounter.md │ │ ├── 2-ref-family.md │ │ ├── 23-custom-ref.md │ │ ├── 25-useMouse.md │ │ ├── 27-global-css.md │ │ ├── 6-shallow-ref.md │ │ ├── 305-capitalize.md │ │ ├── 5-watch-family.md │ │ ├── 8-effect-scope.md │ │ ├── 11-next-dom-update.md │ │ ├── 18-useLocalStorage.md │ │ ├── 208-tree-component.md │ │ ├── 22-custom-element.md │ │ ├── 232-key-modifiers.md │ │ ├── 24-v-active-style.md │ │ ├── 20-v-debounce-click.md │ │ ├── 3-losing-reactivity.md │ │ ├── 323-prop-validation.md │ │ ├── 4-writable-computed.md │ │ ├── 14-dynamic-css-values.md │ │ ├── 21-functional-component.md │ │ ├── 218-h-render-function.md │ │ ├── 9-dependency-injection.md │ │ ├── 12-optimize-perf-directive.md │ │ ├── 243-prevent-event-propagation.md │ │ ├── index.md │ │ └── 1-hello-world.md │ ├── index.md │ └── js │ │ ├── gray.md │ │ └── limit.md ├── react │ ├── arch │ │ ├── 06.file-upload.md │ │ ├── 04.role.md │ │ ├── 01.arch.md │ │ ├── 05.data-render.md │ │ ├── 03.infra.md │ │ └── 02.typescript.md │ ├── intro │ │ ├── 02.stack.md │ │ └── 01.intro.md │ └── index.md ├── blog │ ├── 2024-09-22-learn-web3.md │ ├── 2023-01-28-guangsanyuan.md │ ├── remot-tools.md │ ├── 2023-03-03-remote-jobs.md │ ├── 2022-11-29-english.md │ ├── 2023-02-15-996.md │ ├── tools.md │ ├── 2022-12-05-gray-filter.md │ ├── 2022-12-04-chatgpt.md │ └── itwords.md ├── infra │ └── index.md ├── sijiao │ └── index.md ├── word.md ├── ppt │ └── fe-decorate-worker.md ├── algorithm │ └── index.md ├── .vitepress │ ├── theme │ │ ├── BFrame.vue │ │ ├── Sound.vue │ │ ├── WordList.vue │ │ ├── test.ts │ │ ├── Member.vue │ │ ├── index.ts │ │ ├── CalCom.vue │ │ ├── Word.vue │ │ ├── NotFound.vue │ │ ├── theme.css │ │ └── MyLayout.vue │ ├── util.ts │ └── config.ts ├── project │ ├── index.md │ └── vue-bili.md ├── node │ └── nest.md ├── coach.md ├── 1v1.md ├── about.md ├── vue │ └── index.md ├── source │ └── index.md ├── life │ └── 2023.md ├── index.md ├── template.md ├── funnycoder.md └── me.md ├── scripts ├── help.js └── guangsanyuan.js ├── .npmrc ├── README.md ├── package.json ├── .github └── workflows │ ├── check.yml │ └── main.yml ├── LICENSE └── .gitignore /docs/public/ikun/ikun.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/books/morden-jslib.md: -------------------------------------------------------------------------------- 1 | # XX读书笔记 -------------------------------------------------------------------------------- /docs/interview/vue/16-until.md: -------------------------------------------------------------------------------- 1 | 16-until -------------------------------------------------------------------------------- /docs/interview/vue/19-v-focus.md: -------------------------------------------------------------------------------- 1 | 19-v-focus -------------------------------------------------------------------------------- /docs/interview/vue/26-v-model.md: -------------------------------------------------------------------------------- 1 | 26-v-model -------------------------------------------------------------------------------- /docs/interview/vue/7-raw-api.md: -------------------------------------------------------------------------------- 1 | 7-raw-api -------------------------------------------------------------------------------- /docs/react/arch/06.file-upload.md: -------------------------------------------------------------------------------- 1 | # 大文件如何上传 -------------------------------------------------------------------------------- /scripts/help.js: -------------------------------------------------------------------------------- 1 | console.log('help') 2 | -------------------------------------------------------------------------------- /docs/blog/2024-09-22-learn-web3.md: -------------------------------------------------------------------------------- 1 | # web3入门科普 -------------------------------------------------------------------------------- /docs/infra/index.md: -------------------------------------------------------------------------------- 1 | # 前端工程化 2 | ✅ 3 | 4 | 1. -------------------------------------------------------------------------------- /docs/interview/vue/10-lifecycle.md: -------------------------------------------------------------------------------- 1 | 10-lifecycle -------------------------------------------------------------------------------- /docs/interview/vue/13-dom-portal.md: -------------------------------------------------------------------------------- 1 | 13-dom-portal -------------------------------------------------------------------------------- /docs/interview/vue/15-useToggle.md: -------------------------------------------------------------------------------- 1 | 15-useToggle -------------------------------------------------------------------------------- /docs/interview/vue/17-useCounter.md: -------------------------------------------------------------------------------- 1 | 17-useCounter -------------------------------------------------------------------------------- /docs/interview/vue/2-ref-family.md: -------------------------------------------------------------------------------- 1 | 2-ref-family -------------------------------------------------------------------------------- /docs/interview/vue/23-custom-ref.md: -------------------------------------------------------------------------------- 1 | 23-custom-ref -------------------------------------------------------------------------------- /docs/interview/vue/25-useMouse.md: -------------------------------------------------------------------------------- 1 | 25-useMouse -------------------------------------------------------------------------------- /docs/interview/vue/27-global-css.md: -------------------------------------------------------------------------------- 1 | 27-global-css -------------------------------------------------------------------------------- /docs/interview/vue/6-shallow-ref.md: -------------------------------------------------------------------------------- 1 | 6-shallow-ref -------------------------------------------------------------------------------- /docs/sijiao/index.md: -------------------------------------------------------------------------------- 1 | # 大圣前端私教课 2 | 3 | 辅导+全部课程 -------------------------------------------------------------------------------- /docs/interview/vue/305-capitalize.md: -------------------------------------------------------------------------------- 1 | 305-capitalize -------------------------------------------------------------------------------- /docs/interview/vue/5-watch-family.md: -------------------------------------------------------------------------------- 1 | 5-watch-family -------------------------------------------------------------------------------- /docs/interview/vue/8-effect-scope.md: -------------------------------------------------------------------------------- 1 | 8-effect-scope -------------------------------------------------------------------------------- /docs/interview/vue/11-next-dom-update.md: -------------------------------------------------------------------------------- 1 | 11-next-dom-update -------------------------------------------------------------------------------- /docs/interview/vue/18-useLocalStorage.md: -------------------------------------------------------------------------------- 1 | 18-useLocalStorage -------------------------------------------------------------------------------- /docs/interview/vue/208-tree-component.md: -------------------------------------------------------------------------------- 1 | 208-tree-component -------------------------------------------------------------------------------- /docs/interview/vue/22-custom-element.md: -------------------------------------------------------------------------------- 1 | 22-custom-element -------------------------------------------------------------------------------- /docs/interview/vue/232-key-modifiers.md: -------------------------------------------------------------------------------- 1 | 232-key-modifiers -------------------------------------------------------------------------------- /docs/interview/vue/24-v-active-style.md: -------------------------------------------------------------------------------- 1 | 24-v-active-style -------------------------------------------------------------------------------- /docs/interview/vue/20-v-debounce-click.md: -------------------------------------------------------------------------------- 1 | 20-v-debounce-click -------------------------------------------------------------------------------- /docs/interview/vue/3-losing-reactivity.md: -------------------------------------------------------------------------------- 1 | 3-losing-reactivity -------------------------------------------------------------------------------- /docs/interview/vue/323-prop-validation.md: -------------------------------------------------------------------------------- 1 | 323-prop-validation -------------------------------------------------------------------------------- /docs/interview/vue/4-writable-computed.md: -------------------------------------------------------------------------------- 1 | 4-writable-computed -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers=true 2 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /docs/interview/vue/14-dynamic-css-values.md: -------------------------------------------------------------------------------- 1 | 14-dynamic-css-values -------------------------------------------------------------------------------- /docs/interview/vue/21-functional-component.md: -------------------------------------------------------------------------------- 1 | 21-functional-component -------------------------------------------------------------------------------- /docs/interview/vue/218-h-render-function.md: -------------------------------------------------------------------------------- 1 | 218-h-render-function -------------------------------------------------------------------------------- /docs/interview/vue/9-dependency-injection.md: -------------------------------------------------------------------------------- 1 | 9-dependency-injection -------------------------------------------------------------------------------- /docs/word.md: -------------------------------------------------------------------------------- 1 | # 生词记录 2 | 3 | italicized refain disheveled fierce 4 | -------------------------------------------------------------------------------- /docs/ppt/fe-decorate-worker.md: -------------------------------------------------------------------------------- 1 | # 前端 & 装修工人 2 | 3 | 4 | --- 5 | 6 | -------------------------------------------------------------------------------- /docs/interview/vue/12-optimize-perf-directive.md: -------------------------------------------------------------------------------- 1 | 12-optimize-perf-directive -------------------------------------------------------------------------------- /docs/interview/vue/243-prevent-event-propagation.md: -------------------------------------------------------------------------------- 1 | 243-prevent-event-propagation -------------------------------------------------------------------------------- /docs/public/vue3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/vue3.jpeg -------------------------------------------------------------------------------- /docs/public/ikun/ikun.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/ikun/ikun.mp4 -------------------------------------------------------------------------------- /docs/public/vue/arch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/vue/arch.jpg -------------------------------------------------------------------------------- /docs/public/wechat2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/wechat2.png -------------------------------------------------------------------------------- /docs/public/wechat3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/wechat3.jpeg -------------------------------------------------------------------------------- /docs/public/about-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/about-page.png -------------------------------------------------------------------------------- /docs/public/react/arch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/react/arch.jpg -------------------------------------------------------------------------------- /docs/public/source/arch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/source/arch.png -------------------------------------------------------------------------------- /docs/public/wanzhuanvue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/wanzhuanvue.jpg -------------------------------------------------------------------------------- /docs/public/algorithm/all.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/algorithm/all.png -------------------------------------------------------------------------------- /docs/public/algorithm/arch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/algorithm/arch.png -------------------------------------------------------------------------------- /docs/public/gongzhonghao.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/gongzhonghao.jpeg -------------------------------------------------------------------------------- /docs/public/algorithm/head.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/algorithm/head.jpeg -------------------------------------------------------------------------------- /docs/public/algorithm/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/algorithm/intro.png -------------------------------------------------------------------------------- /docs/public/blockchain-2018.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/blockchain-2018.jpg -------------------------------------------------------------------------------- /docs/public/interview/index.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hug-sun/blog/main/docs/public/interview/index.jpeg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # challenages 2 | 3 | https://cdn.jsdelivr.net/gh/woniuppp/static/commit.png 4 | ![](https://cdn.jsdelivr.net/gh/woniuppp/static/commit.png) 5 | -------------------------------------------------------------------------------- /docs/interview/vue/index.md: -------------------------------------------------------------------------------- 1 | # Vue 挑战题 2 | 3 | 推荐大家直接在StackBlitz上在线写代码，这样可以直接看到效果，不用下载代码到本地运行，欢迎大家持续贡献Vue相关的测试题，我也会录制配套的解答视频 4 | 5 | 6 | 题目来源 [https://github.com/webfansplz/vuejs-challenges](https://github.com/webfansplz/vuejs-challenges) 7 | -------------------------------------------------------------------------------- /docs/algorithm/index.md: -------------------------------------------------------------------------------- 1 | # 前端学算法 2 | 3 | 4 | 5 | ![](/algorithm/head.jpeg) 6 | ![](/algorithm/intro.png) 7 | ![](/algorithm/arch.png) 8 | ![](/algorithm/all.png) 9 | 10 | 11 | ![](https://visitor-badge.glitch.me/badge?page_id=shengxinjing.algorithm) 12 | -------------------------------------------------------------------------------- /docs/blog/2023-01-28-guangsanyuan.md: -------------------------------------------------------------------------------- 1 | # 算法喝酒 2 | 3 | 4 | ```mermaid 5 | graph TD 6 | A[西] --> |动物园|B[犀牛, 蜥蜴] 7 | A --> |植物园|C[西蓝花, 西芹] 8 | A --> |果园|D[西柚, 西瓜, 西梅] 9 | A --> |xing|E[猩猩, 杏鲍菇, 杏] 10 | A --> |xiang|F[香菇,香蕉, 响尾蛇] 11 | 12 | ``` -------------------------------------------------------------------------------- /docs/public/vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/BFrame.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /docs/blog/remot-tools.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # 远程工作工具推荐 4 | 5 | 6 | 7 | ## 面试经验 8 | 9 | https://www.onsites.fyi/ 10 | 11 | https://twitter.com/acghnu/status/1701840791143100776 12 | 13 | https://twitter.com/bitfool1/status/1692403747635560518 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/project/index.md: -------------------------------------------------------------------------------- 1 | # 企业级实战要素 2 | 3 | 每个需求，都可以做成可以写在简历里的内容 4 | 5 | * Typescript 6 | * css解决方案 7 | * axios封装 8 | * promise封装 9 | * 前端工程化 10 | * vite插件+进阶 11 | * 组件设计 12 | * 性能优化 13 | * 一万数据量渲染优化 14 | * eslint团队规范 15 | * 前端监控 16 | * 发布部署 17 | * ab测试 18 | * 低代码 19 | 20 | 21 | ## 常见需求实现 22 | * 键盘快捷键 23 | * 秒杀 24 | * 分步表单 25 | * 数据大屏 26 | * 文件上传 -------------------------------------------------------------------------------- /docs/react/arch/04.role.md: -------------------------------------------------------------------------------- 1 | # 权限系统和布局 2 | 3 | 4 | --- 5 | 6 | 7 | ## Header 8 | 9 | 用户信息、通知、设置、退出登录 10 | 11 | https://ant.design/docs/react/customize-theme-cn 12 | 13 | 14 | 15 | --- 16 | 17 | 18 | ## 侧边栏 19 | 20 | 21 | --- 22 | 23 | ## 面包屑导航 24 | 25 | --- 26 | 27 | 28 | ## 路由缓存 29 | 30 | 31 | --- 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /docs/node/nest.md: -------------------------------------------------------------------------------- 1 | # Nest 2 | 3 | 4 | ```bash 5 | nest new node-server 6 | 7 | # crud模块 8 | nest g resource user 9 | 10 | ``` 11 | 12 | 13 | ``` 14 | brew services start mongodb-community@6.0 15 | brew services stop mongodb-community@6.0 16 | 17 | brew services list 18 | 19 | mongod 20 | mongosh 21 | 22 | ``` 23 | 24 | 25 | https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-red-hat/#install-mongodb-community-edition 26 | 27 | ``` 28 | sudo rm -rf /tmp/mongodb-27017.sock 29 | sudo service mongod start 30 | ``` -------------------------------------------------------------------------------- /docs/.vitepress/theme/Sound.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/WordList.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 23 | 24 | -------------------------------------------------------------------------------- /docs/react/arch/01.arch.md: -------------------------------------------------------------------------------- 1 | # 企业级实战思路 - 什么是亮点 2 | 3 | 实现CRUD后，我们能做什么 4 | 5 | --- 6 | 7 | 8 | 9 | --- 10 | 11 | ## 大数据量 12 | 1. 懒加载 & 执行 13 | 2. 分批执行 14 | 3. 不断地思考如何优化（面试官喜欢的场景） 15 | 16 | 用大文件上传来举例 17 | 18 | --- 19 | 20 | ## 研发效率 21 | 1. 规范 (统一开发规则) 22 | 2. 组件化和hooks封装 (复用) 23 | 3. 脚手架 （多个项目初始化效率） 24 | 4. 联调 (多人协作效率) 25 | 5. 自动化部署 (部署效率) 26 | ... 27 | 28 | --- 29 | 30 | ## 开发质量 31 | 1. 单元测试 （代码帮你测试代码） 32 | 2. 监控报警 （线上问题提前预支） 33 | 3. 代码Review ( 多人协作规范) 34 | 4. 规范 (统一代码、Git风格) 35 | ... 36 | --- 37 | 38 | ## 性能和用户体验 39 | 1. 性能指标 40 | 2. 更快的加载和执行 41 | 3. 交互反馈 42 | 4. 骨架屏 43 | ... 44 | -------------------------------------------------------------------------------- /docs/coach.md: -------------------------------------------------------------------------------- 1 | The essence of most Internet projects is to Create, Read, Update, and Delete data, called CRUD. 2 | Front-end frameworks are tools for the CRUD of the browser elements, and back-end frameworks are for the CRUD of the data. 3 | 4 | 5 | Let's use the front-end framework as an example. First, we must understand how the framework interacts with the browser because the list application requires input elements, buttons, and lists to display. 6 | 7 | We need to get the users' inputs and the list of data to add or delete, but also synchronize to the browser, and this step will give birth to MVC, MVMM, and other development concepts. 8 | 9 | On this website https://todomvc.com/, you can see most of the front-end frameworks to achieve the code for our0 Todo-list application. -------------------------------------------------------------------------------- /docs/public/al.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/react/arch/05.data-render.md: -------------------------------------------------------------------------------- 1 | # 大数据量如何渲染 2 | 3 | 4 | https://cdn.jsdelivr.net/gh/woniuppp/static/virtual.webp 5 | 6 | https://cdn.jsdelivr.net/gh/woniuppp/static/virtual1.gif 7 | 8 | 1. 减少不必要渲染 9 | 2. 减少不必要的加载 10 | 11 | 12 | --- 13 | 14 | ## 虚拟列表 15 | 16 | 0. 可视区的高度固定 viewHeight 17 | 1. 每个列表高度height (也可能不定) 18 | 2. 可视区域的数据索引start和end 19 | 3. 基于startIndex计算出offset偏移 20 | 4. 渲染数据 21 | -- 22 | 23 | ## 虚拟列表 24 | 25 | 1. 总高度(只漏出可视区) = height * list.length 26 | 2. start = Math.floor(scrollTop / height) 27 | 3. end = start + Math.ceil(viewHeight / height) 28 | 4. offset = scrollTop - (scrollTop % height); 29 | 5. onScroll event 30 | 31 | --- 32 | 33 | ## 高度不确定 34 | 1. 先离屏渲染 (不可见区域)，获取高度后 再计算 首次渲染会卡顿 35 | 2. 预估大致高度，先渲染一部分，再计算高度+缓存 36 | 37 | 38 | 39 | --- 40 | ## todo 41 | 1. 二分查找优化 （findIndex) 42 | 2. 用IntersectionObserver优化scroll的性能 -------------------------------------------------------------------------------- /docs/1v1.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: false 3 | prev: false 4 | next: false 5 | editLink: false 6 | aside: false 7 | --- 8 | 9 | # 1V1聊天 10 | 11 | 最近有十几个同学找我聊了，很高兴能解答一些同学的疑惑，单独开个页面吧 12 | 13 | 简单的问题私信我会回复，复杂的问题需要找我1V1的话，腾讯会议/谷歌会议，聊什么话题都可以，说不定今天就是合适的日子 14 | 15 | 16 | 19 | 20 | 21 | 1. 改简历和模拟面试 22 | 2. 前端技术发展和职业生涯 23 | 3. 海外remote和英语 24 | 4. 自由职业，讲师经验 25 | 5. 房车，旅行，自由职业 26 | 27 | ## 费用（一小时） 28 | * 888 人民币 （微信支付宝） 29 | * 125 美元 (Wise or USDT) 30 | 31 | 32 | 33 | 34 | 35 | 时间不够的话还可以选择一小时 36 | 37 | 38 | 39 | 预约后记得加我微信沟通和付款 40 | 41 | 42 | 43 | 44 | :::tip 45 | 1. 可以提前把想聊的话题发给我，方便我提前准备 46 | 2. 临时有事记得提前告知 47 | 3. 最好能做一下自我介绍，让我能更好的了解你的现状 48 | ::: -------------------------------------------------------------------------------- /docs/public/subtitle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 29 | 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fa-advanced-interview", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "dev": "vitepress dev docs --port 8080 --max-old-space-size=50000", 9 | "build": "vitepress build docs", 10 | "serve": "vitepress serve docs" 11 | }, 12 | "dependencies": { 13 | "@ant-design/icons-vue": "6.1.0", 14 | "@vueuse/core": "^10.5.0", 15 | "ant-design-vue": "3.2.15", 16 | "axios": "1.2.0", 17 | "bilibili-live-ws": "6.2.1", 18 | "bing-chat": "0.2.1", 19 | "dotenv": "16.0.3", 20 | "mermaid": "9.1.7", 21 | "node-fetch": "3.3.0", 22 | "pinyin": "3.0.0-alpha.4", 23 | "sound-play": "1.1.0", 24 | "vitepress": "1.0.0-alpha.50", 25 | "vitepress-plugin-mermaid": "2.0.8", 26 | "vue": "3.2.41" 27 | }, 28 | "keywords": [], 29 | "author": "", 30 | "license": "ISC" 31 | } 32 | -------------------------------------------------------------------------------- /docs/interview/vue/1-hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | aside: true 3 | --- 4 | # 热身 5 | 6 | 大概就是让你熟悉一下Vue.js的渲染，把页面渲染的`Hello World`改成`msg`就可以了，这里 7 | 8 | 9 | 10 | 11 | 12 | 13 | 题目要求和代码 14 | ```vue 15 | 19 | 20 | 26 | ``` 27 | 28 | 解答 29 | 30 | [解答地址](https://stackblitz.com/edit/angular-nyboi3?file=App.vue) 31 | ```diff 32 | 37 | ``` 38 | 39 | 视频 40 | 41 | -------------------------------------------------------------------------------- /docs/public/sijiao.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/gray.js: -------------------------------------------------------------------------------- 1 | let style = document.createElement('style') 2 | let graySelector = 'gray-filter' 3 | style.setAttribute('type', 'text/css') 4 | // style.setAttribute('data-vite-dev-id', id) 5 | style.textContent = `.${graySelector}{ 6 | -webkit-filter: grayscale(100%); 7 | -moz-filter: grayscale(100%); 8 | -ms-filter: grayscale(100%); 9 | -o-filter: grayscale(100%); 10 | filter: grayscale(100%); 11 | -webkit-filter: gray; 12 | filter: gray; 13 | -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1); 14 | filter: progid:dximagetransform.microsoft.basicimage(grayscale=1); 15 | }` 16 | document.head.appendChild(style) 17 | 18 | let root = document.querySelector('html') 19 | let btn = document.querySelector('#set-gray') 20 | btn.addEventlistener('click',()=>{ 21 | if(root.className.indexOf(graySelector)>-1){ 22 | root.className = root.className.replace(graySelector,'') 23 | }else{ 24 | root.className += ' '+graySelector 25 | } 26 | },false) -------------------------------------------------------------------------------- /docs/.vitepress/theme/test.ts: -------------------------------------------------------------------------------- 1 | function getContainer(root) { 2 | root ||= document.body; 3 | if (!root.innerText) return null; 4 | const totalWords = root.innerText.match(/\S+/g).length; 5 | let ps = root.querySelectorAll('p'); 6 | if (!ps.length) ps = root.querySelectorAll('div'); 7 | if (!ps.length) return null; 8 | 9 | let container = null; 10 | let maxWords = 0; 11 | for (let p of ps) { 12 | const numWords = p.innerText.trim().length; 13 | if (numWords > maxWords) { 14 | maxWords = numWords; 15 | container = p; 16 | } 17 | } 18 | let selectedWords = maxWords; 19 | while (selectedWords / totalWords < 0.5 && container !== root) { 20 | container = container.parentElement; 21 | selectedWords = container.innerText.match(/\S+/g).length; 22 | } 23 | 24 | if (container.tagName === 'P') { 25 | container = container.parentElement; 26 | } 27 | 28 | return container; 29 | } 30 | // setTimeout(()=>{ 31 | // let a = getContainer() 32 | // console.log(a) 33 | // },2000) 34 | -------------------------------------------------------------------------------- /docs/blog/2023-03-03-remote-jobs.md: -------------------------------------------------------------------------------- 1 | # 2023前端已死怎么办？ 2 | 3 | 2023年好多人说前端已死，讲的是前端不好找工作了，但是同时很多团队又找不到合适的前端，前端是一个脑力工作者，但是大部分前段本质上是体力劳动者，天天做增删改查，肯定会被年轻人或者AI取代，如何避免这种情况呢 4 | 5 | 我反而觉得现在是前端工程师最好的时代，待会解释一下 6 | 7 | 首先前端确实没有以前那么高的涨幅了，就像房子不好卖了，工地上的工友工资涨幅就不会高了，那我们怎么办呢，我提供几个思路 8 | 9 | 先认清自己的定位，如果公司是一个工地，后端负责盖楼，运维负责水电，测试负责验收，那前端就是装修，我们的工作就是把盖好的楼装修的好, 只干体力活是没有未来的 ，你非得跟后端比盖楼的技术水平，没必要，我们要发挥装修的特色，交互体验，而且我们可以做全栈，自己就能盖个小房子，讲究居住体验的时候，盖别墅不需要那么多高并发知识，js技术栈完全hold得住，是程序员里唯一一个可以做全端应用的 10 | 11 | 12 | 做一些有资源积累或者有护城河的事情 13 | 14 | 15 | 16 | 1. node做后台 17 | 2. vue或者react做前端 18 | 3. uni-app做 微信，支付宝，字节小程序 19 | 4. react-native开发安卓，ios 20 | 5. electron开发桌面应用 21 | 22 | 23 | 24 | 2023年前端工程师如何保持竞争力 25 | 26 | 1. 一定要有自己的强项，修炼自己的亮点 27 | 1. 亮点！亮点！亮点！ 28 | 2. 性能优化，框架源码，工程化，架构，组件库,单侧.... 29 | 3. 夯实计算机基础，算法，网络，操作系统.... 30 | 2. 了解公司的业务，搞清楚业务闭环怎么实现的，成为业务高手 31 | 3. 找到一个领域深扎，crud已经不够了 32 | 1. 文档，webgl，图形学 33 | 2. 框架，工程化等源码 34 | 3. 一年找到一个前端有话语权的公司 35 | 4. 剑走偏锋，国外远程，脱离国内卷的环境 36 | 1. 学英语，我最近就在学英语，中国互联网的程序员，除了去美国都是领先水平 37 | 2. 国外的前端的面试比较简单，简单的算法+八股文+系统设计，最难的题就是手写promise了 38 | 39 | 客户端，测试都活的好好地，前端也会一直好好地 放心吧 40 | -------------------------------------------------------------------------------- /.github/workflows/check.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow to help you get started with Actions 2 | 3 | name: check 4 | 5 | # Controls when the workflow will run 6 | on: 7 | pull_request: 8 | branches: [ main ] 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 13 | jobs: 14 | # This workflow contains a single job called "build" 15 | build: 16 | # The type of runner that the job will run on 17 | runs-on: ubuntu-latest 18 | # Steps represent a sequence of tasks that will be executed as part of the job 19 | steps: 20 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 21 | - uses: actions/checkout@v3 22 | - name: install Node.js 23 | uses: actions/setup-node@v23 24 | with: 25 | node-version: "16.X" 26 | - uses: pnpm/action-setup@v2 27 | with: 28 | version: 7.13.4 29 | - name: install dep 30 | run: pnpm install 31 | - name: build app 32 | run: pnpm run build -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 花果山大圣 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/blog/2022-11-29-english.md: -------------------------------------------------------------------------------- 1 | # 看官网学英语 2 | 3 | 我的英语也比较烂，最近准备记录一下学英语的过程 4 | 5 | 除了强化单词之外，我通过阅读一些开源框架的官网来提高一下阅读和表达能力，编程英语两不误，欢迎大家一起 6 | 7 | [讨论区](https://github.com/shengxinjing/fe-advanced-interview/discussions/categories/%E8%8B%B1%E8%AF%AD%E5%AD%A6%E4%B9%A0) 8 | 9 | 1. [Vue3](https://vuejs.org/) 10 | 2. [React](https://beta.reactjs.org/) 11 | 3. [Nuxt](https://nuxt.com/v3) 12 | 4. [Next](https://nextjs.org/) 13 | 5. [Nest](https://nestjs.com/) 14 | 6. 英文JS书 15 | 1. @todo 16 | 17 | 18 | ## 单词 & 名词解释 19 | 20 | ### Vue3 21 | 22 | 23 | ### Native speakers 24 | 25 | 28 | 29 | {{word}} 30 | 31 | elaborate instructors intrigues phrase illustrated contextual usage ethnic jargon slang 32 | 33 | indicator upright conduct autonomy 34 | 35 | rote memorization | repetitively | induce cramming | core curriculum | irrespective | 36 | -------------------------------------------------------------------------------- /docs/react/intro/02.stack.md: -------------------------------------------------------------------------------- 1 | # React全家桶入门 2 | 3 | 尽量选择主流 & 稳定的，个人项目可以尝鲜 4 | 5 | 1. 工程化工具Vite & Webpack 6 | 2. Typescript 7 | 3. 路由 8 | 4. 数据流 9 | 5. CSS 10 | 6. 组件库 11 | 7. 网络请求 12 | 8. React进阶API (优化) 13 | 9. 组件化进阶 14 | 10. 封装自己的Hooks 15 | 16 | --- 17 | 18 | ## 工程化工具 19 | 20 | 1. Webpack (Bundle) 21 | 2. Vite (Bundless) 22 | 3. Parcel 23 | 4. Umi 24 | 5. .... 25 | 26 | 进阶都是插件的定制和优化 27 | 28 | --- 29 | 30 | ## 强类型语言 31 | Typescript，可追踪 ，可维护性 32 | 上手难度大 33 | 34 | --- 35 | 36 | ## 路由 37 | 38 | React-router 39 | 1. 嵌套路由 40 | 2. 动态路由 41 | 3. 路由懒加载 42 | 4. .... 43 | 44 | 45 | --- 46 | 47 | ## 数据流 48 | 全局共享的数据源 49 | 1. Redux + Tookit 50 | 2. Mobx 51 | 3. Jotai 52 | 4. Zustand 53 | 5. Recoil 54 | 6. Valtio... 55 | 56 | 是否单向数据流，是否单一数据源... 57 | 不用太纠结，任选一个都可以满足你的需求 58 | 我们会选单向数据流代表Redux 和 59 | 60 | --- 61 | 62 | ## 组件库和css方案 63 | 64 | AntDesign5 or MUI 65 | 66 | 1. less, [sass](https://sass-lang.com/) ,stylus 67 | 2. [tailwind.css](https://tailwindcss.com/) 68 | 3. css in js 69 | 4. postcss (新语法和兼容) 70 | 71 | --- 72 | 73 | ## 网络请求 74 | axios最常见 75 | 1. swr 76 | 2. React-Query 77 | 78 | --- 79 | 80 | 81 | ## 封装自己的Hooks & Hooks工具库 82 | 1. ahooks 83 | 2. react-use 84 | 3. 封装自己的Hooks 85 | 86 | --- 87 | 88 | ## 其他 89 | 1. 可视化 90 | 2. 表单 91 | 3. 文本编辑器 92 | 4. 动画 93 | 5. 全栈（Next.js，Remix...） -------------------------------------------------------------------------------- /scripts/guangsanyuan.js: -------------------------------------------------------------------------------- 1 | import {pinyin} from 'pinyin' 2 | 3 | let fruit = `苹果,梨,葡萄,提子,枣,柑橘,西柚, 4 | 桃,西瓜,杏,甜瓜,香瓜,荔枝,甘蔗,柿,柠檬,香蕉,芒果,菠萝,哈密瓜,李子, 5 | 石榴,枸杞,山楂,椰子,桑葚,草莓,木瓜,龙眼, 6 | 枇杷,山竹,红毛丹,无花果,杨桃,猕猴桃,杨梅,蓝莓, 7 | 西梅,释迦,百花果,樱桃,榴莲,火龙果,菠萝蜜,百香果,罗汉果,莲雾 8 | ` 9 | let vegetable = ` 10 | 菠菜,韭菜,花菜,西兰花,白菜,芹菜,辣椒,西芹, 11 | 木耳,蒜苔,油菜,生菜,蒜苗,茼蒿,芥菜,油菜 12 | 紫甘蓝,娃娃菜,空心菜, 13 | 香菇,草菇,平菇,金针菇,杏鲍菇, 14 | 冬瓜,南瓜,黄瓜,丝瓜,苦瓜, 15 | 大葱,生姜,洋葱,山药,芋头,魔芋,红薯,土豆,莲藕,胡萝卜,萝卜, 16 | 银耳,玉米,芦笋,竹笋,茴香,茄子,番茄,豌豆芽 17 | ` 18 | let animal = ` 19 | 熊猫,大象,豹子,老虎,猫头鹰,孔雀,羊驼,山羊,河马,牛,斑马,猴子, 20 | 熊,老鹰,骆驼,狮子,龟,兔子,考拉,袋鼠,犀牛,蜥蜴,长尾猴,猩猩,金丝猴, 21 | 长颈鹿,梅花鹿,马,小鹿,羚羊,海豹,海鸥,海象,海狮,响尾蛇 22 | ` 23 | let obj = {} 24 | function parse(str, name) { 25 | let ret = [...new Set(str.replace(/\n/g, '').split(','))] 26 | ret = ret.forEach((item) => { 27 | let pin = pinyin(item, { 28 | style: pinyin.STYLE_NORMAL, // 设置拼音风格 29 | }) 30 | let p = pin[0][0] 31 | if (p in obj) { 32 | ( obj[p][name] || (obj[p][name]=[]) ).push(item) 33 | } else { 34 | obj[p] = { [name]: [item] } 35 | } 36 | }) 37 | } 38 | 39 | parse(animal, '动物园') 40 | parse(vegetable, '植物园') 41 | parse(fruit, '果园') 42 | Object.keys(obj).forEach((key) => { 43 | let item = obj[key] 44 | if (Object.keys(item).length === 3) { 45 | //三个园都有的 46 | console.log(key, '开头的', item) 47 | } 48 | }) 49 | console.log('--------------------') 50 | 51 | // console.log(pinyin("犀牛", { 52 | // style: pinyin.STYLE_NORMAL, // 设置拼音风格 53 | // })); 54 | -------------------------------------------------------------------------------- /docs/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/about.md: -------------------------------------------------------------------------------- 1 | 2 | 19 | 20 | 21 | # 关于我 22 | 23 | 你好，我是大圣，现在是自由职业程序员，独立开发者 && 讲师，欢迎关注我公众号 24 | 25 | 你可以收获前端学习小秘籍，一起学习`前端进阶`的知识 26 | 27 | 无论是想职场进阶，还是不想上班，都可以聊聊 28 | 29 | 30 | 31 | 32 | 33 | 34 | ## 大圣前端私教课 35 | 36 | 从1V1面试摸底 给你制定学习路线图 + 课程 + 导师辅导 帮你成功进阶前端 37 | 38 | 39 | ## 体系课 40 | 私教课的部分模块单独拆分 41 | 42 | 1. [前端啃算法](https://blc.xet.tech/s/2Ajvex) 43 | - Leetcode200题，掌握刷题公式，大厂面试必杀技 44 | 2. [Vue+ Typescript 企业实战+组件库课](/vue/) 45 | 3. [React+ Typescript 企业实战+组件库课](/react/) 46 | 4. [前端源码漫游记](/source/) 47 | - 一次性掌握前端热门框架原理 48 | - Vue3 + React + Vite + Rollup 源码手写 ... 49 | - Typescript + Pnpm + Monorepo + Vitest 50 | 5. Node + 工程化体系 51 | 6. 前端性能优化 52 | 7. [玩转Vue3文字专栏@极客时间](http://gk.link/a/10BM3) 53 | 8. 面试刷题辅导 54 | 55 | other 56 | 57 | 1. 玩转Web3 58 | 2. 玩转Three.js 59 | 3. 玩转Rust 60 | 4. 玩转小程序 61 | 5. [如何做开源 with Anthony Fu(WIP)](https://github.com/tutorial-kit/open-source) 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/Member.vue: -------------------------------------------------------------------------------- 1 | 17 | 47 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow to help you get started with Actions 2 | 3 | name: deploy 4 | 5 | # Controls when the workflow will run 6 | on: 7 | # Triggers the workflow on push or pull request events but only for the main branch 8 | push: 9 | branches: [ main ] 10 | # Allows you to run this workflow manually from the Actions tab 11 | workflow_dispatch: 12 | 13 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 14 | jobs: 15 | # This workflow contains a single job called "build" 16 | build: 17 | # The type of runner that the job will run on 18 | runs-on: ubuntu-latest 19 | # Steps represent a sequence of tasks that will be executed as part of the job 20 | steps: 21 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 22 | - uses: actions/checkout@v3 23 | - name: install Node.js 24 | uses: actions/setup-node@v3 25 | with: 26 | node-version: "18.X" 27 | - uses: pnpm/action-setup@v2 28 | with: 29 | version: 8.6.5 30 | - name: install dep 31 | run: pnpm install 32 | - name: build app 33 | run: pnpm run build 34 | - name: copy file via ssh password 35 | uses: appleboy/scp-action@master 36 | with: 37 | host: ${{ secrets.REMOTE_HOST }} 38 | username: ${{ secrets.REMOTE_USER }} 39 | password: ${{ secrets.REMOTE_PASS }} 40 | port: 22 41 | source: "docs/" 42 | target: ${{ secrets.REMOTE_TARGET }} -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import DefaultTheme from 'vitepress/theme' 2 | import BFrame from './BFrame.vue' 3 | import MyLayout from './MyLayout.vue' 4 | import NotFound from './NotFound.vue' 5 | import Word from './Word.vue' 6 | import WordList from './WordList.vue' 7 | import { Card,Avatar } from 'ant-design-vue'; 8 | import 'ant-design-vue/dist/antd.css'; 9 | // import 'ant-design-vue/es/card/style/css' 10 | // import 'ant-design-vue/es/avatar/style/css' 11 | 12 | import Member from './Member.vue' 13 | import CalCom from './CalCom.vue' 14 | // import Sound from './Sound.vue' 15 | import './theme.css' 16 | import './test' 17 | export default { 18 | ...DefaultTheme, 19 | NotFound, 20 | Layout:MyLayout, 21 | enhanceApp({ app, router, siteData }) { 22 | app.component('BFrame',BFrame) 23 | app.component('Word',Word) 24 | app.component('WordList',WordList) 25 | app.component('Member',Member) 26 | app.component('CalCom',CalCom) 27 | app.use(Card) 28 | app.use(Avatar) 29 | // app.component('Sound',Sound) 30 | // baidutongji 31 | // var _hmt = _hmt || []; 32 | // if(process.env.NODE_ENV === 'production' && typeof window !=='undefined'){ 33 | // var hm = document.createElement("script"); 34 | // hm.src = "https://hm.baidu.com/hm.js?ccf55dfd2764cf3ebf43d6b3c9da9b20"; 35 | // var s = document.getElementsByTagName("script")[0]; 36 | // s.parentNode.insertBefore(hm, s); 37 | // } 38 | 39 | // DefaultTheme.enhanceApp(ctx) 40 | // // ctx.app.component('VueClickAwayExample', VueClickAwayExample) 41 | } 42 | } -------------------------------------------------------------------------------- /docs/.vitepress/theme/CalCom.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | -------------------------------------------------------------------------------- /docs/blog/2023-02-15-996.md: -------------------------------------------------------------------------------- 1 | # 996的再思考 2 | 3 | “996”工作制，即每天早 9 点到岗，一直工作到晚上 9 点，每周工作 6 天。 4 | 5 | 996周工作时间为最低 11x6=66 小时，这明显是一种压迫 6 | 7 | 劳动力再生的概念，狭义的需要休息，广义的是要养活自己的下一代 8 | 简单再生产和扩大再生产，996一直crud，就是简单再生产，没有提高 （政治经济学） 我们要扩大再生产 9 | 10 | 实习医生是没有工资的，实习律师可能更低，因为你不干，有的是人愿意干，内卷化的结果 11 | 12 | 996意味着原本三个人的岗位，现在两个人干，有一个失业了，那个人就会降低工资来卷你 13 | 14 | 扩大再生产需要在智力和技能上进行投资 15 | 最近对996的新的感悟 大圣@2023 16 | 17 | 先科普一下，996就是早上9点上班，晚上9点下班，每周工作6天 去掉午休一小时，每周工作时间是11\*6 = 66，965是8\*5=40 如果加班工资算1.5，996相当于时薪直接腰斩 18 | 19 | 之前我认为996只是变相降低50%，剥夺你学习的精力和时间，并且用晚餐+免费打车来美化这种行为，还用奋斗是福报pua你，而且还实用末尾淘汰机制让你们内斗，而且996效率极低，我一天能注意力集中4个小时算高的了，996的节奏就是9点或者10点到公司，开个早会泡个茶，看看邮件刷刷知乎摸摸鱼就吃午饭了，基本都是下午才能开始干活，但是很多会议就来了，其实整体效率并没有提高，都在假装忙碌在摸鱼，反而是晚饭后能集中注意力工作一会，长久对积极的工作态度是毁灭性的打击 20 | 21 | 所以我都是不鼓励学员去996的公司，首先996违反了劳动法，不应该鼓励这种行为，有些急需工作的学员我也是鼓励学员涨薪50%以上才考虑996，并且日常要多摸鱼学习，比如无聊的会议可以刷刷算法，而且要多休息，保养身体，多睡觉多泡澡多按摩, 自由职业一年后我才意识到，除了时薪的降低，还有对你发展机会的扼杀 22 | 23 | 做自由职业得自己搞钱，有些小机会，比如外包，行业小聚，大家基本都是工作晚上7点~10点或者周六的小聚，周日那些小甲方都会在家休息，会促成一些意想不到的收入机会，晚上9点才放你走，有可能就是老板要把你晚上可能接触到商业机会的聚会干掉，成为彻底的打工人 24 | 25 | 一个年轻人进入到公司，工作几年从啥也不懂，到掌握了代码，运营，产品等技能之一，六七点下班后，同学聚会，发小聚会，微信群线下聚会等，不同公司不同角色的人在一起交流，可能就会诞生心得机会，你的发小A可能是个设计，你会写代码，你同学他姑父公司需要做个小程序，这就可以成为你新的机会，你会有直接和社会交易的机会，你有成为老板的机会，哪怕很小，你也不会因为公司裁员而绝望，万一机会多了，你就会开始创业或者自由职业，所以老板一定要让你再公司待到9点，持续修炼垂直的技能，变成架构师，但是你没有接触到商务，或者叫靠自己获得收入的能力 26 | 27 | 就像打篮球一样，投篮就是最重要的得分机会，你是一个很好大学的毕业生，爱学习能力强，但是老板只训练你的传球，篮板和抢断能力，本来你可以接触到投篮的时间夺走，让你待在公司继续训练过人和篮板，哪怕晚上你效率低摸鱼都可以，只要你不会投篮，成为他的潜在对手就可以 28 | 29 | 所以996效率低老板是知道的，除了训练服从性之外，还让你成为彻底的打工人，哪怕上午摸鱼，晚上7点公司内部组织技术分享会学习都没关系，你只能持续训练你的传球技能，然后传球给你的老板，这真是定级的pua 30 | 31 | 再次建议所有学员不要加入996的公司，除了工资，健康和法律问题，还有被彻底剥夺了社交的机会，失去了多元发展的机会，我也建议所有的程序员，前端学学后端，后端学学前端，这俩是能开发出完整产品的技术，然后看看《商业百科》《增长黑客》《启示录》《运营之光》《优势谈判》综合入个门，日常除了喜欢造轮子之外，可以好好思考一下，你现在做的业务，到底是怎么赚到钱的 这个能力其实真的很有用，说不定哪次聚会就有用 32 | 33 | #灵感 #稿件 -------------------------------------------------------------------------------- /docs/public/site.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 50 | 51 | -------------------------------------------------------------------------------- /docs/interview/index.md: -------------------------------------------------------------------------------- 1 | # 面试辅导课 2 | 3 | 1. 一次1V1深度面试 （技术摸底） 4 | 2. 定制学习计划 ，职业规划 5 | 3. 社群技术答疑 & 分享 6 | 4. 常见题目讲解分析 7 | 5. 简历点评 & 优化 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | ## 面试小技巧 17 | 1. 一个简单的面试题如何由浅入深 18 | 2. 如何设计一个组件/数据结构 19 | 3. 一个问题你不会如何分析 20 | 4. 软技能 & 其他 21 | 22 | ## 面试考察什么 23 | 1. 八股文 24 | - 考的就是你有没有背过，算是一个基础能力, 虽然诟病多，但是删选效率高 25 | - 防抖节流，Promise，响应式... 多练 26 | 2. 算法 & 网络 27 | 1. 计算机基础，算法多背点刷题公式，就像高中三角函数一样，背公式，然后套题 28 | 2. 网络去看图解http和图解tcp入个门 29 | 3. 实战踩坑能力 30 | 1. 这个就是你的工作经验，比如你在工作中遇到了什么问题，怎么解决的 31 | 4. 系统设计 & 源码相关 32 | 1. 源码本身需要更高的视野，包括框架，组件库，脚手架... 33 | 34 | ![](/interview/index.jpeg) 35 | 36 | 37 | ## 面试题 38 | 不断更新 39 | 1. 常见八股文 40 | 2. Promise相关 41 | 3. SSR相关 42 | 4. 项目相关 43 | 5. TS相关 44 | 6. ... 45 | 46 | 47 | 48 | ## 好的面试 49 | 好的面试就是问你简历上写的东西，问到你不会为止 50 | 51 | 老是问你简历没写或者不会的面试官，赶紧说拜拜 52 | ## 如何回答面试题 53 | 54 | ## 面试如何驱动学习 55 | 56 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/Word.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 48 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/NotFound.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 31 | 32 | -------------------------------------------------------------------------------- /docs/interview/js/gray.md: -------------------------------------------------------------------------------- 1 | # 网页部分置灰 2 | 3 | 4 | 最近有很多网站都实现了全体置灰，都用到了filter: grayscale属性来实现，我们直接在网页html上加上这些属性就可以 5 | 6 | 7 | ```javascript 8 | let style = document.createElement('style') 9 | let graySelector = 'gray-filter' 10 | style.setAttribute('type', 'text/css') 11 | // style.setAttribute('data-vite-dev-id', id) 12 | style.textContent = `.${graySelector}{ 13 | -webkit-filter: grayscale(100%); 14 | -moz-filter: grayscale(100%); 15 | -ms-filter: grayscale(100%); 16 | -o-filter: grayscale(100%); 17 | filter: grayscale(100%); 18 | -webkit-filter: gray; 19 | filter: gray; 20 | -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1); 21 | filter: progid:dximagetransform.microsoft.basicimage(grayscale=1); 22 | }` 23 | document.head.appendChild(style) 24 | 25 | let root = document.querySelector('html') 26 | let btn = document.querySelector('#set-gray') 27 | btn && btn.addEventListener('click',()=>{ 28 | console.log(root.className) 29 | if(root.className.indexOf(graySelector)>-1){ 30 | root.className = root.className.replace(graySelector,'') 31 | }else{ 32 | root.className += ' '+graySelector 33 | } 34 | },false) 35 | 36 | 37 | function setGray(){ 38 | let filter = ['#not-gray2','.not-gray3'] 39 | 40 | let doms = filter.reduce((acc,cur)=>{ 41 | let dom = [...document.querySelectorAll(cur)].forEach(d=>{ 42 | d.isGary = false 43 | while(d.parentNode){ 44 | if(d.parentNode.isGary){ 45 | d.isGary = true 46 | break 47 | } 48 | d = d.parentNode 49 | } 50 | }) 51 | },[]) 52 | 53 | setTimeout(()=>{ 54 | setGray() 55 | },1000) 56 | ``` 57 | 58 | 59 | 60 | ## 首屏灰色，滚动的时候第二屏彩色 61 | 62 | ## 某个特定selector不灰色 63 | 64 | 这个属于特殊需求，比如某个logo是彩色，或者某几个区域，这时候就不能无脑的全局置灰了，这时候就需要配置选择器 65 | 66 | 67 | 68 |
69 |
70 | 71 |
72 | 73 |
74 |
75 |
76 | 77 |
78 |
79 |

80 |

81 | 82 |
83 |

84 |
85 |
-------------------------------------------------------------------------------- /docs/interview/js/limit.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | https://www.npmjs.com/package/throat 5 | 6 | 7 | ```ts{1,4,5-8} 8 | export async function asyncPool({ 9 | concurrency, 10 | items, 11 | fn 12 | }: { 13 | concurrency: number 14 | items: Item[] 15 | fn: (item: Item) => Promise 16 | }): Promise { 17 | const promises: Promise[] = [] 18 | const pool = new Set>() 19 | for (const item of items) { 20 | const promise = fn(item) 21 | promises.push(promise) 22 | pool.add(promise) 23 | const clean = () => pool.delete(promise) 24 | promise.then(clean, clean) 25 | if (pool.size >= concurrency) await Promise.race(pool) 26 | } 27 | return Promise.all(promises) 28 | } 29 | 30 | ``` 31 | 32 | ```js 33 | 34 | 35 | function limit(maxCount){ 36 | // [,5] 37 | // [2,34,] 38 | let queue = [] 39 | let activeCount = 0 40 | 41 | const next = ()=>{ 42 | //下一个任务 43 | activeCount-- 44 | if(queue.length>0){ 45 | queue.shift()() 46 | } 47 | } 48 | const run = async (fn,resolve,args)=>{ 49 | //执行一个函数 50 | activeCount++ 51 | const result = (async()=>fn(...args))() 52 | resolve(result) 53 | await result 54 | next() //下一个 55 | } 56 | const push = async (fn,resolve,args)=>{ 57 | queue.push(run.bind(null,fn,resolve,args)) 58 | if(activeCount0){ 59 | // 队列没满 并且还有任务 启动任务 60 | queue.shift()() 61 | } 62 | } 63 | 64 | let runner = (fn,...args)=>{ 65 | return new Promise((resolve)=>{ 66 | push(fn,resolve,args) 67 | }) 68 | } 69 | return runner 70 | 71 | 72 | } 73 | async function sleep(n,name='test'){ 74 | return new Promise(resolve=>{ 75 | console.log(n,name,'start') 76 | setTimeout(()=>{ 77 | console.log(n,name,'end','-------------') 78 | resolve({n,name}) 79 | },n*1000) 80 | }) 81 | } 82 | 83 | async function start(){ 84 | let runner = limit(2) //并发量是3 85 | let tasks = [ 86 | ()=> sleep(1,'吃饭'), 87 | ()=> sleep(3,'睡觉'), 88 | ()=> sleep(5,'打游戏'), 89 | ()=> sleep(3.5,'学习算法'), 90 | ()=> sleep(4,'学习Vue和React'), 91 | ].map(runner) 92 | let result = await Promise.all(tasks) 93 | console.log(result,'end') 94 | } 95 | // @think 如果任务有优先级呢 96 | start() 97 | 98 | ``` -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | deploy.sh 9 | scripts/bili-live.js 10 | scripts/youtube.js 11 | scripts/db.json 12 | *.mp3 13 | pnpm-lock.yaml 14 | # Diagnostic reports (https://nodejs.org/api/report.html) 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | *.lcov 29 | 30 | # nyc test coverage 31 | .nyc_output 32 | 33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 34 | .grunt 35 | 36 | # Bower dependency directory (https://bower.io/) 37 | bower_components 38 | 39 | # node-waf configuration 40 | .lock-wscript 41 | 42 | # Compiled binary addons (https://nodejs.org/api/addons.html) 43 | build/Release 44 | 45 | # Dependency directories 46 | node_modules/ 47 | jspm_packages/ 48 | 49 | # TypeScript v1 declaration files 50 | typings/ 51 | 52 | # TypeScript cache 53 | *.tsbuildinfo 54 | 55 | # Optional npm cache directory 56 | .npm 57 | 58 | # Optional eslint cache 59 | .eslintcache 60 | 61 | # Microbundle cache 62 | .rpt2_cache/ 63 | .rts2_cache_cjs/ 64 | .rts2_cache_es/ 65 | .rts2_cache_umd/ 66 | 67 | # Optional REPL history 68 | .node_repl_history 69 | 70 | # Output of 'npm pack' 71 | *.tgz 72 | 73 | # Yarn Integrity file 74 | .yarn-integrity 75 | 76 | # dotenv environment variables file 77 | .env 78 | .env.test 79 | 80 | # parcel-bundler cache (https://parceljs.org/) 81 | .cache 82 | 83 | # Next.js build output 84 | .next 85 | 86 | # Nuxt.js build / generate output 87 | .nuxt 88 | dist 89 | 90 | # Gatsby files 91 | .cache/ 92 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 93 | # https://nextjs.org/blog/next-9-1#public-directory-support 94 | # public 95 | 96 | # vuepress build output 97 | .vuepress/dist 98 | .vuepress/ 99 | docs/.vitepress/cache 100 | # Serverless directories 101 | .serverless/ 102 | 103 | # FuseBox cache 104 | .fusebox/ 105 | 106 | # DynamoDB Local files 107 | .dynamodb/ 108 | 109 | # TernJS port file 110 | .tern-port 111 | -------------------------------------------------------------------------------- /docs/react/intro/01.intro.md: -------------------------------------------------------------------------------- 1 | # React入门学习 2 | 花果山大圣 3 | 4 | --- 5 | 6 | 7 | 8 | ## React是什么 9 | 10 | https://reactjs.org/ 11 | 12 | https://beta.reactjs.org/ 13 | 14 | 全球使用率都很高的热门前端框架，进阶必备 15 | 16 | 视图层，高效的渲染网页 & 更新，良好的开发体验 17 | 18 | 组件化 & 虚拟Dom & 跨端 & ConCurrent ... 19 | 20 | `UI = f(state)` 21 | 22 | --- 23 | 24 | 阿里，字节，腾讯等大厂必备 25 | 26 | 1. 生态齐全 27 | 2. 成功案例 28 | 3. 跨端（Native) 29 | 30 | 核心：组件化 + 工具函数（Hooks) 31 | 32 | 33 | 34 | 35 | --- 36 | 37 | ## 第一个React应用 38 | 39 | #### 学前知识（自检） 40 | 41 | 1. Javascript 42 | 1. 模块化 43 | 2. 箭头函数 44 | 3. 解构赋值 45 | 4. 常见数组和对象操作 ( map， filter...) 46 | 5. async + await && Promise 47 | 6. ... 48 | 2. HTML 和 CSS 49 | 3. Nodejs + VSCode + Chrome开发 50 | 51 | --- 52 | 53 | ## 环境 54 | 55 | ```bash 56 | ❯ node -v 57 | v16.17.1 58 | ❯ npm -v 59 | 8.15.0 60 | ❯ pnpm -v 61 | 7.13.4 62 | ``` 63 | 64 | 官方的cra，我更喜欢用vite （入门区别不大） 65 | ```bash 66 | npm create vite@latest 67 | # or 68 | pnpm create vite 69 | ``` 70 | 71 | --- 72 | 73 | ## React的基本代码 74 | 1. React组件 75 | 2. React渲染组件 76 | 3. JSX 77 | 78 | --- 79 | 80 | 81 | ## class组件和function组件 82 | React组件的两种写法 83 | 1. 类写法 84 | 2. 函数写法（主流，重点学习） 85 | 86 | 87 | 组件的进阶 88 | 1. 组件 & 模块 89 | 2. 组件嵌套 90 | 3. Props & State 91 | 4. 积木式开发 92 | 93 | --- 94 | 95 | ![](https://vuejs.org/assets/components.7fbb3771.png) 96 | 97 | --- 98 | 99 | ## JSX是什么 100 | 长得像HTML，本质是JS 101 | 102 | 1. 基本语法 103 | 2. {} 104 | 3. css 105 | 4. 循环渲染 106 | 5. 条件渲染 107 | 108 | 109 | --- 110 | 111 | 112 | ## 处理用户交互 && 事件处理 113 | 1. 用户输入 114 | 2. 事件绑定 115 | 3. Hooks尝鲜 116 | 4. 复杂对象和数组的更新 117 | 118 | --- 119 | 120 | ## useEffect副作用 121 | 122 | 副作用：`UI = f(state, effect)` 123 | 124 | ```js 125 | useEffect(()=>{ 126 | 副作用变了之后，执行的代码 127 | },[deps]) 128 | 129 | ``` 130 | 131 | 本地存储实现 132 | 133 | --- 134 | 135 | ## 其他API 136 | 137 | 值：`useState`,useContext,useReducer, useRef ... 138 | 139 | 副作用：`useEffect`,useLayoutEffect ... 140 | 141 | 性能优化 `useMemo`, `useCallback` ... 142 | 143 | 优先级：useTransition, useDeferredValue .... 144 | 145 | --- 146 | 147 | ## 下一步 148 | React生态 149 | 1. 工程化工具Vite & Webpack 150 | 2. 路由 151 | 3. 数据流 152 | 4. CSS 153 | 5. 组件库 154 | 6. 网络请求 155 | 7. React进阶API (优化) 156 | 8. 组件化进阶 157 | 9. 封装自己的Hooks 158 | ... 159 | -------------------------------------------------------------------------------- /docs/project/vue-bili.md: -------------------------------------------------------------------------------- 1 | # Vue3+TS实现B站项目 2 | 3 | 4 | --- 5 | 6 | ## 项目技术栈和初始化 7 | 8 | 1. Vite 9 | 2. Typescript 10 | 3. Pinia 11 | 4. Vue-router 12 | 5. Ant-design-vue 13 | 14 | --- 15 | 16 | ## 下一步 17 | 1. 规范搭建 18 | 2. 功能实现 & 网络调试 19 | 3. 项目优化 20 | 4. 发布部署 21 | 5. 总结归纳 22 | 23 | --- 24 | 25 | --- 26 | 27 | ## 项目初始化 28 | 29 | 使用create-vite初始化 30 | 31 | `pnpm create vite-app vue-bili --template vue-ts` 32 | --- 33 | 34 | 35 | 36 | ## 项目目录规范 37 | ``` 38 | pages 页面 39 | components 组件 40 | routes 路由 41 | hooks hooks工具库 42 | utils 函数工具库 43 | api 网络请求 44 | layout 布局 45 | types 类型定义（TS） 46 | store 数据流 47 | .... 48 | 49 | ``` 50 | --- 51 | 52 | ## css解决方案 53 | 54 | 1. css 55 | 2. 行内样式 56 | 3. less sass stylus预处理 57 | 4. css in js 58 | 5. tailwindcss原子化css 59 | 60 | 61 | 62 | --- 63 | ## 各种规范lint 64 | 65 | 1. 代码规范eslint （prettier） 66 | 2. stylelint (自行体验) 67 | 3. git hooks `husky` 68 | 4. lint-staged只处理缓存区的代码 69 | 5. git commit信息格式 自己写脚本 or commitlint 70 | 6. commitizen (自行体验) 71 | 72 | --- 73 | 74 | 75 | ## Git 校验 76 | 使用Husky在代码提交的时候，执行校验 77 | 78 | ```sh 79 | pnpm i husky -D 80 | husky install 81 | npx husky add .husky/pre-commit "npm run lint" 82 | 83 | ``` 84 | 85 | ```json 86 | "scripts": { 87 | // install自动执行 88 | "prepare": "husky install" 89 | } 90 | ``` 91 | 92 | --- 93 | 94 | ## lint-staged 防止每次都全量 95 | 96 | ```json 97 | "lint-staged": { 98 | "**/*.{js,jsx,tsx,ts}": [ 99 | "npm run lint" 100 | ] 101 | } 102 | ``` 103 | 104 | --- 105 | 106 | ## git commit信息格式 107 | 方便自动生成changelog和团队协作 108 | 109 | ```sh 110 | : 111 | ``` 112 | type可以是下面的值 113 | 1. feat: 新功能。 114 | 2. fix: Bug修复 115 | 3. docs: 文档修改 116 | 4. perf: 性能优化 117 | 5. refactor: 代码重构 118 | 6. test: 测试代码 119 | 7. chore: 不知道是啥就写chore 120 | 121 | --- 122 | 123 | ## commitlint 124 | 125 | https://commitlint.js.org/#/ 126 | 127 | 其实自己写也不费劲，参考 128 | https://github.com/vuejs/core/tree/main/scripts 129 | 130 | ```sh 131 | pnpm install -D commitlint @commitlint/config-conventional @commitlint/cli 132 | 133 | npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}' 134 | 135 | ``` 136 | 137 | `.commitlintrc` 138 | 139 | ```json 140 | { 141 | "extends": ["@commitlint/config-conventional"] 142 | } 143 | ``` 144 | 145 | 146 | 147 | 1. 目录规范搭建 148 | 2. 好用的脚本工具 149 | 3. 工程化系统搭建(插件和工具) 150 | 151 | -------------------------------------------------------------------------------- /docs/.vitepress/util.ts: -------------------------------------------------------------------------------- 1 | 2 | export const biliSvg = `` 5 | 6 | export const telegramSvg = ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | ` -------------------------------------------------------------------------------- /docs/public/gray1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 58 | 59 | 60 | 61 | 62 | 联系作者 63 | 64 |
65 | 66 | 67 | 68 |
69 |
70 | 71 |
72 |
73 |
74 |
75 |
76 | 77 |
78 | 79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 | 93 |
94 | 95 |
96 |
97 |
98 |
99 | 100 |
101 |
102 |
103 |
104 |
105 | 106 | 107 | 108 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/theme.css: -------------------------------------------------------------------------------- 1 | .iframe,iframe{ 2 | width:100%; 3 | height:666px; 4 | 5 | } 6 | .VPDoc.has-aside .content-container{ 7 | max-width:1000px !important; 8 | } 9 | .sbtn{ 10 | pointer:cursor; 11 | border-color: var(--vp-button-brand-border); 12 | color: var(--vp-button-brand-text); 13 | background-image: linear-gradient(90deg,rgba(255,0,105,.99) 0,#ff7a00 99%); 14 | border-radius: 24px; 15 | padding: 0 20px; 16 | line-height: 38px; 17 | font-size: 14px; 18 | display: inline-block; 19 | border: 1px solid transparent; 20 | text-align: center; 21 | font-weight: 500; 22 | white-space: nowrap; 23 | transition: color 0.25s, border-color 0.25s, background-color 0.25s; 24 | z-index:100; 25 | } 26 | .course-btn { 27 | pointer:cursor; 28 | border-color: var(--vp-button-brand-border); 29 | color: var(--vp-button-brand-text); 30 | /* background-color: var(--vp-button-brand-bg); */ 31 | /* border-radius: 20px; */ 32 | background-image: linear-gradient(90deg,rgba(255,0,105,.99) 0,#ff7a00 99%); 33 | border-radius: 24px; 34 | /* color: #fff; */ 35 | padding: 0 20px; 36 | line-height: 38px; 37 | font-size: 14px; 38 | display: inline-block; 39 | border: 1px solid transparent; 40 | text-align: center; 41 | font-weight: 500; 42 | white-space: nowrap; 43 | transition: color 0.25s, border-color 0.25s, background-color 0.25s; 44 | position:absolute; 45 | right:0; 46 | z-index:100; 47 | } 48 | /* .aside{ 49 | display:none !important; 50 | } */ 51 | /* html{ 52 | filter: grayscale(100%); 53 | -webkit-filter: grayscale(100%); 54 | -moz-filter: grayscale(100%); 55 | -ms-filter: grayscale(100%); 56 | -o-filter: grayscale(100%); 57 | filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 58 | -webkit-filter: grayscale(1); 59 | filter:gray !important; 60 | } 61 | .VPImage{ 62 | filter:none; 63 | -webkit-filter: none; 64 | } */ 65 | 66 | .btn{ 67 | padding:5px 8px; 68 | color:white; 69 | background: var(--vp-c-brand); 70 | border: 1px solid var(--vp-c-brand); 71 | border-radius: 4px; 72 | } 73 | 74 | .vp-doc h2{ 75 | margin:16px 0; 76 | } 77 | 78 | .gpt-fix-window{ 79 | position:fixed; 80 | right:10px; 81 | bottom:400px; 82 | width:280px; 83 | list-style:none; 84 | /* border:1px solid var(--vp-c-brand); */ 85 | padding:10px; 86 | font-size:14px; 87 | } 88 | .gpt-item{ 89 | display:inline-block; 90 | float:right; 91 | font-size:16px; 92 | } 93 | .vp-doc p{ 94 | margin:6px 0; 95 | line-height:26px; 96 | font-size:18px; 97 | } 98 | h4{ 99 | font-size:24px; 100 | margin-top:20px; 101 | } 102 | /* .VPNav{ 103 | display:none !important; 104 | } 105 | .VPContent{ 106 | padding-top:10px !important; 107 | } */ 108 | 109 | pre { 110 | white-space: pre-wrap; 111 | word-wrap: break-word; 112 | } 113 | 114 | hr{ 115 | display:none; 116 | } 117 | 118 | .vp-doc li strong{ 119 | color:rgba(233, 30, 44, 1); 120 | } 121 | -------------------------------------------------------------------------------- /docs/vue/index.md: -------------------------------------------------------------------------------- 1 | # Vue3 + Typescript + Vite4企业级实战 2 | 3 | 4 | 一个从入门到专家的Vue3企业级实战课程 5 | 6 | 7 | ## 什么是企业级的项目 8 | ![](https://cdn.jsdelivr.net/gh/woniuppp/static/fullstack/intro.jpg) 9 | 10 | 11 | ## 课程亮点和收获 12 | 13 | :::tip 一次性学完Vue3进阶的项目和实战难点 14 | 15 | 让你拥有一个可以写入简历的项目和组件库 16 | - Vue3 全家桶入门 17 | - 企业级项目实战全流程 18 | - 企业级项目基建：规范，工程化，Typescript 19 | - 功能实现、复杂场景优化 20 | - 性能优化、发布部署... 21 | - 设计和开发自己的组件库 22 | - Vue3 生态框架一览 （Nuxt) 23 | ::: 24 | 25 | :::tip 技术栈 26 | 27 | - [Vue3](https://vuejs.org/) 28 | - [VueRouter](https://router.vuejs.org/) 29 | - [Pinia](https://pinia.vuejs.org/) 30 | - [AntDesignVue](https://www.antdv.com/components/overview) 31 | - [Vite4](https://vitejs.dev/) / [Nuxt.js](https://nuxt.com/) 32 | - [Typescript](https://www.typescriptlang.org/) + [Pnpm](https://pnpm.io/) + [Tailwindcss](https://tailwindcss.com/) +各种规范库 33 | ::: 34 | 35 | 36 | 37 | ## 课程架构 38 | ![](/vue/arch.jpg) 39 | 40 | :::tip 适合学员 41 | 0~5年经验的前端，希望构建前端核心竞争力 42 | 43 | 有一定的Javascript基础，想要深入Vue框架,成为Vue生态高手 44 | 45 | 提高面试成功率，进大厂 46 | ::: 47 | 48 | :::tip 学习前提 49 | - 掌握基础的前端基础知识 50 | - 掌握ES6基础知识 51 | - 使用Vue开发过简单的项目 52 | - 有Node.js和Npm的使用经验 53 | ::: 54 | 55 | 56 | :::tip 讲授方式 57 | 58 | 59 | - 从入门到实战 循序渐进 60 | - 理论和实战结合 体系化提升 61 | - 手写代码，力求让大家知其然也知其所以然 62 | 63 | ::: 64 | 65 | :::tip 你将获得 66 | - 企业级的Vue项目实战 67 | - 企业级前端架构设计 68 | - 一个自己的Vue组件库 (类Element3) 69 | - 更高的前端视野 + 前端核心竞争力 + 良好的学习习惯 70 | - 一个可以写入简历的亮点的开源项目，不定期的简历点评， 让你面试游刃有余 71 | - 不定期加餐 （新框架 新技术) 72 | ::: 73 | ## 详细大纲 74 | 75 | 76 | 0. 开课介绍 77 | 1. Vue3 技术栈介绍 78 | 1. Vue实战 & 第一个Vue应用 79 | 2. 什么是组件 80 | 3. composition是什么 81 | 4. 处理用户交互 82 | 5. 事件处理 83 | 6. script-setup语法 84 | 7. Vue3 带来了什么 85 | 2. Vue3 全家桶进阶 86 | 1. 工程化工具Vite 87 | 2. 路由机制 Vue-Roter 88 | 3. 数据管理 Pinia 89 | 4. AntDesignVue实战 90 | 5. Vue进阶API 91 | 6. 组件化进阶 92 | 7. 封装自己的Hooks工具库 93 | 8. 项目实战 94 | 9. 项目打包 95 | 3. 企业级实战 96 | 1. 实现CRUD后，我们能做什么 97 | 2. 性能如何提升 98 | 3. 开发效率如何提高 99 | 4. 如何提高开发质量 100 | 5. 用户体验的提升 101 | 6. 相关技术栈和工具介绍 102 | 4. Vue和Typescript必知必会 103 | 1. 为什么我们需要Typescript 104 | 2. Typescript入门类型 105 | 3. Typescript函数 106 | 4. 宿主环境的类型 107 | 5. Typescript泛型入门 108 | 6. 好用的类型工具函数 109 | 7. Vue中的Typescript 110 | 5. 企业级项目规范搭建 111 | 1. Vite + pnpm 112 | 2. 代码规范 113 | 3. 目录规范搭建 114 | 4. 好用的脚本工具 115 | 5. 工程化系统搭建 116 | 6. 企业级项目实战 117 | 1. 权限系统 118 | 2. 大数据量如何渲染 119 | 3. 大文件如何上传 120 | 4. Vue前端性能优化 121 | 5. 用户体验优化 122 | 6. Vue前端监控 123 | 7. 网络请求封装和优化 124 | 8. 工程化Vite插件定制 125 | 9. 自动化部署 CI / CD 126 | 7. Vue3 组件库 （Element3) 127 | 1. 组件库AntDesignVue学习 128 | 2. 组件库设计概览 129 | 3. 技术选型讨论 130 | 4. 通用组件渲染 （Button，Layout 131 | 5. 表单组件（Form,Input 132 | 6. 弹窗组件（Modal,Notification 133 | 7. 表格组件（Table 134 | 8. 树形组件（Tree 135 | 9. 组件库文档 136 | 10. 组件库发布 137 | 8. 新技术&框架探讨 138 | 1. Nuxt3介绍 139 | 2. Svelte 140 | 3. 前端全栈框架 141 | 4. Vue生态有意思的库（持续更新） 142 | 9. 课程总结 143 | 1. Vue进阶带来了什么 144 | 2. 不定期面试提高 145 | 3. 课程总结与回顾 146 | 4. 头脑风暴 147 | 148 | 149 | ![](https://visitor-badge.glitch.me/badge?page_id=shengxinjing.vue) 150 | -------------------------------------------------------------------------------- /docs/react/index.md: -------------------------------------------------------------------------------- 1 | # React18 + Typescript + Vite4企业级实战 2 | 3 | 4 | 一个从入门到专家的React企业级实战课程 5 | 6 | 7 | ## 什么是企业级的项目 8 | ![](https://cdn.jsdelivr.net/gh/woniuppp/static/fullstack/intro.jpg) 9 | 10 | 11 | ## 课程亮点和收获 12 | 13 | :::tip 一次性学完React进阶的项目和实战难点 14 | 15 | 让你拥有一个可以写入简历的项目和组件库 16 | - React18全家桶入门 17 | - 企业级项目实战全流程 18 | - 企业级项目基建：规范，工程化，Typescript 19 | - 功能实现、复杂场景优化 20 | - 性能优化、发布部署... 21 | - 设计和开发自己的组件库 22 | - React生态框架一览 （Next,Umi) 23 | ::: 24 | 25 | :::tip 技术栈 26 | 27 | - [React18](https://beta.reactjs.org/) 28 | - [React-router 6](https://reactrouter.com/en/main) 29 | - [Redux + Tookit](https://redux-toolkit.js.org/) / [zustand](https://zustand-demo.pmnd.rs/) / [Jotai](https://jotai.org/) / [Recoil](https://recoiljs.org/) / [Valtio](https://valtio.pmnd.rs/)... 30 | - [AntDesign 5](https://ant.design/) 31 | - [Vite4](https://vitejs.dev/) / [Umi4](https://v2.umijs.org/) / [Next.js](https://nextjs.org/) / [Webpack](https://webpack.js.org/) 32 | - [Typescript](https://www.typescriptlang.org/) + [Pnpm](https://pnpm.io/) + [Tailwindcss](https://tailwindcss.com/) +各种规范库 33 | ::: 34 | 35 | 36 | 37 | ## 课程架构 38 | ![](/react/arch.jpg) 39 | 40 | :::tip 适合学员 41 | 0~5年经验的前端，希望构建前端核心竞争力 42 | 43 | 有一定的Javascript基础，想要深入React18框架,成为React生态高手 44 | 45 | 提高面试成功率，进大厂 46 | ::: 47 | 48 | :::tip 学习前提 49 | - 掌握基础的前端基础知识 50 | - 掌握ES6基础知识 51 | - 使用React开发过简单的项目 52 | - 有Node.js和Npm的使用经验 53 | ::: 54 | 55 | 56 | :::tip 讲授方式 57 | 58 | 59 | - 从入门到实战 循序渐进 60 | - 理论和实战结合 体系化提升 61 | - 手写代码，力求让大家知其然也知其所以然 62 | 63 | ::: 64 | 65 | :::tip 你将获得 66 | - 企业级的React项目实战 67 | - 企业级前端架构设计 68 | - 一个自己的React组件库 69 | - 更高的前端视野 + 前端核心竞争力 + 良好的学习习惯 70 | - 一个可以写入简历的亮点的开源项目，不定期的简历点评， 让你面试游刃有余 71 | - 不定期加餐 （新框架 新技术) 72 | ::: 73 | ## 详细大纲 74 | 75 | 76 | 0. 开课介绍 77 | 1. React18技术栈介绍 78 | 1. React实战 & 第一个React应用 79 | 2. 什么是组件 80 | 3. JSX是什么 81 | 4. 处理用户交互 82 | 5. 事件处理 83 | 6. React18带来了什么 84 | 2. React全家桶进阶 85 | 1. 工程化工具Vite 86 | 2. 路由机制 87 | 3. 数据流讨论 88 | 4. AntDesign5实战 89 | 5. React进阶API 90 | 6. 组件化进阶 91 | 7. 封装自己的Hooks 92 | 8. 项目实战 93 | 9. 项目打包 94 | 3. 企业级实战 95 | 1. 实现CRUD后，我们能做什么 96 | 2. 性能如何提升 97 | 3. 开发效率如何提高 98 | 4. 如何提高开发质量 99 | 5. 用户体验的提升 100 | 6. 相关技术栈和工具介绍 101 | 4. React和Typescript必知必会 102 | 1. 为什么我们需要Typescript 103 | 2. Typescript入门类型 104 | 3. Typescript函数 105 | 4. 宿主环境的类型 106 | 5. Typescript泛型入门 107 | 6. 好用的类型工具函数 108 | 7. React中的Typescript 109 | 5. 企业级项目规范搭建 110 | 1. Vite + pnpm 111 | 2. 代码规范 112 | 3. 目录规范搭建 113 | 4. 好用的脚本工具 114 | 7. 工程化系统搭建 115 | 6. 企业级项目实战 116 | 1. 权限系统 117 | 2. 大数据量如何渲染 118 | 3. 大文件如何上传 119 | 4. React前端性能优化 120 | 5. 用户体验优化 121 | 6. React前端监控 122 | 7. 网络请求封装和优化 123 | 8. 工程化Vite插件定制 124 | 9. 自动化部署 CI / CD 125 | 7. React18 组件库 126 | 1. AntDesign5学习 127 | 2. 组件库设计概览 128 | 3. 技术选型讨论 129 | 4. 通用组件渲染 （Button，Layout 130 | 5. 表单组件（Form,Input 131 | 6. 弹窗组件（Modal,Notification 132 | 7. 表格组件（Table 133 | 8. 树形组件（Tree 134 | 9. 组件库文档 135 | 10. 组件库发布 136 | 8. 新技术&框架探讨 137 | 1. Next.js介绍 138 | 2. Umijs介绍 139 | 3. Solidjs 140 | 4. 前端全栈框架 141 | 5. React在Web3生态的库 142 | 6. React生态有意思的库（持续更新） 143 | 9. 课程总结 144 | 1. React进阶带来了什么 145 | 2. 不定期面试提高 146 | 3. 课程总结与回顾 147 | 4. 头脑风暴 148 | 149 | 150 | ![](https://visitor-badge.glitch.me/badge?page_id=shengxinjing.react) 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /docs/source/index.md: -------------------------------------------------------------------------------- 1 | # 前端源码漫游记 2 | 3 | 课程+社群答疑,一次性学完热门前端框架原理 4 | 5 | ## 🔥为什么要学习源码 6 | 7 | 1. 如果你想学习Vue、React、Vite、Rollup等热门框架的原理 8 | 2. 如果你想面试的时候和面试官谈笑风生 9 | 3. 如果你想构建自己的 __前端核心竞争力__ 10 | 4. 前端架构师必备的技能，让你的简历更加亮眼 （定制插件，脚手架，性能优化) 11 | 5. 源码设计思想 + 手写实战，来一次性掌握这些源码吧 12 | 13 | ## 🏗️课程架构图 14 | 15 | 1. 了解前端框架的分层 16 | 2. 前端框架的发展历程 17 | 3. 自己实现Vue （reactivity响应式 + compiler编译+runtine运行时） 18 | 4. 自己实现React（组件化 + Fiber + Hooks） 19 | 5. 自己实现Vite ( 脚手架 + 预打包 + esbuild + 热更新 + 插件) 20 | 6. 自己实现Rollup 、Webpack (词法分析 + Tree-shaking + 打包) 21 | 7. 自己实现全栈框架架构 （文件路由，SSR，Island架构、性能优化) 22 | 8. 全面学习和了解框架的工程化架构 （Monorepo，pnpm，Typescript） 23 | 9. 单元测试驱动，全面提升综合实力 24 | 25 | ![](/source/arch.png) 26 | 27 | 28 | 29 | 30 | ## 主讲老师 31 | 32 | ![](https://secure2.wostatic.cn/static/p9q3ZhKtuGeuSS3qwGwUGb/image.png?auth_key=1678326554-qDP5QuxTtTtMorzf9mGSiv-0-eecaed4fa131b0b1415324fa391c8fbd) 33 | 34 | ## 适合学员 35 | 36 | 0~5年经验的前端，希望构建前端核心竞争力 37 | 38 | 有一定的Javascript基础，想要深入框架设计原理 ， 做开源的前端 39 | 40 | 提高面试成功率，进大厂 41 | 42 | ## 你将获得 43 | 44 | 热门前端框架的原理，构建前端核心竞争力 45 | 46 | 18次直播授课 + 录播课程 47 | 48 | 带你写框架源码的体验 + 良好的学习习惯 49 | 50 | 一个可以写入简历的亮点的开源项目，不定期的简历点评， 让你面试游刃有余 51 | 52 | 不定期加餐 （新框架 新技术） 53 | 54 | ## 课程大纲 （11.3正式开课） 55 | 56 | |课程大纲|详细介绍| 57 | |-|-| 58 | |0. 开课 & 环境搭建 & 参考资料
（开班前在线见面会）|1. 前置知识学习介绍
2. Typescript
3. Vitest
4. Unbuild
5. Pnpm
6. Rollup
7. 前端调试技巧
头脑风暴| 59 | |1. 前端框架设计要素|1. 前端框架现状分析
2. 一个清单看前端框架
3. 响应式原理分析
4. 框架的插件机制设计
5. 前端框架设计要素分析
6. 编译时 和 运行时
7. 性能 & 代码体积| 60 | |2. Vue3 框架分析和响应式实现|1. Proxy语法
2. 副作用收集和触发 tack和trigger
3. 副作用的清理
4. effect嵌套和调度
5. Vue3.2的位运算优化| 61 | |3. Vue3 组件化 & 虚拟Dom|1. 组件到底是什么
2. 组件的创建与更新
3. 生命周期和props
4. 虚拟Dom的diff全流程分析
5. 从组件的本质看待组件库的设计| 62 | |4. Vue Compiler编译|1. 编译原理基础概念科普
2. AST的生成与解析
3. 代码生成
4. Vue的compiler中的静态标记优化
5. 常见的编译工具（babel，rollup...)| 63 | |5. React18 框架全家桶分析|1. JSX 和 template
2. React的设计理念
3. React中的Fiber，Hooks，Concurrenrt
4. React中组件的渲染| 64 | |6. React18更新流程|1. 调度逻辑
2. fiber和requestIdleCallback
3. useState的实现
4. React18中的优先级制度
5. React18的更新机制| 65 | |7. React18中的hooks和事件系统|1. hooks设计理念
2. useState和useEffect
3. useCallback和useMemo
4. 新的hook use介绍
5. React的事件合成系统
6. React框架中的算法| 66 | |8. 前端框架中的特性设计|1. 数据流管理 （pinia redux)
2. 路由原理实现 （vue-router, react-router)
3. Context实现
4. 缓存组件的实现
5. 框架内部的性能优化| 67 | |9. 新一代框架原理展望和科普
头脑风暴和总结|1. 编译型框架：Svelte
2. 更简单的React: Solidjs
3. SSR & 同构框架的兴起：Next & Nuxt
4. 框架性能考虑的极致: 岛屿架构
5. Rust和Go等语言的入侵| 68 | |10. 前端工程化领域的发展|1. Webpack的设计理念
2. Rollup的tree-shaking
3. Vite的兴起和Bundless
4. 前端脚手架工具分析| 69 | |11. webpack框架分析|1. AST的遍历
2. 模块依赖关系管理
3. webpack代码生成
4. webpack的常用优化手段| 70 | |12. Vite原理手写（一）|1. 前端脚手架原理
2. 初始化代码
3. esbuild扫描模块依赖关系
4. 依赖预构建功能实现 | 71 | |13. Vite原理手写 (二)|1. Vite的插件机制
2. Vite 处理css文件
3. Vite处理 JSX/TSX
4. Vite 入力 Vue单文件组件
5. Vite的热更新实现| 72 | |14. Rollup 原理|1. 词法解析回顾
2. 模块依赖关系遍历和分析
3. tree-shaking如何实现
4. magic-string的使用| 73 | |15. 工程化工具总结和补充|1. 源码回顾和总结
2. bundless的展望
3. Vite生态介绍
4. 如何参与开源的生态建设| 74 | |16. 现代全栈框架的分析|1. Nuxt 和 Next 新特性
2. SSR的实现
3. 渲染方式一览 SSG, ISR, Pre-render
4. 手写island架构
5. 畅聊前端的未来| 75 | |17. 微前端原理与实现|1. 微前端框架机制和痛点分析
2. 基座应用的实现
3. Javascript沙箱
4. css沙箱
5. 数据流和优化
6. 业内微前端框架分析| 76 | |18. 课程总结|1. 框架原理带来了什么
2. unplugin开发插件 （兼容rollup,vite,webpack)
3. Vue扩展插件开发介绍
4. React扩展插件开发介绍
5. 课程总结与回顾
6. 头脑风暴| 77 | 78 | 79 | ## 购买须知 80 | 81 | 1. 直播课程有录播，可持续回看 82 | 2. 课程为虚拟内容服务，购买成功后不可退款，敬请原谅 83 | 3. 此课程是前端私教课的源码模块 84 | 85 | 86 | ![](https://visitor-badge.glitch.me/badge?page_id=shengxinjing.source) -------------------------------------------------------------------------------- /docs/life/2023.md: -------------------------------------------------------------------------------- 1 | # 2023 2 | 3 | 大家好，我是大圣，又要到了一年一度的总结时间，不过2022我好像没啥总结的，简单来说就是一整年都没有上班，做自由职业，写写文章录录课，整个生活都慢了下来，我也懒了，疫情期间躺平倒也怡然自得，看了挺多书，最近还学了学英语 4 | 5 | u1s1, 不上班还是挺舒服的，通勤和开无聊会的时间都用来看书，睡觉，打游戏了 (虽然挣钱还是上班多), 并且约其他自由职业小聚的时候，可以挑工作日人少的时候去，基本啥店都不用排队 6 | 7 | 年底被新冠gank了一波，好好规划一下2023把 8 | 9 | ```html 10 | 11 | <2020> 12 | <2021> 13 | <2022>永生难忘的三年, 但是我不会怀念它 14 | 15 | 16 | 17 | <2023> 18 | <新的开始> 19 | <开心 /> 20 | <免费开源教程 21 | :list=["Typescript","Web3","Vue3","React18","Node","小程序"] 22 | :platform=["小程序","FreeCodeCamp","B站","YouTube"] 23 | /> 24 | <更专业的编程课程 25 | role="独立讲师" 26 | :list=["前端啃算法","源码漫游记","Vue3+TS实战&组件库", 27 | "React18+TS实战&组件库","Node进阶实战课", 28 | "前端全链路性能优化", "前端工程化..."]/> 29 | <断舍离 action="书架上200多本书都录视频推荐+送出去"/> 30 | <开源 target="把《前端源码漫游记》写完"/> 31 | <学英语 target="可以辅导学员找国外的远程" /> 32 | <自媒体 target="争取周更" 33 | :playlists=["采访12个funnyCoder","读书推荐","开源教程","英语vlog..."]/> 34 | <写一本书 /> 35 | <开发一个小型独立产品 techstack="React+Node+serverless" /> 36 | <读书+照顾蘑菇+旅行+每年都减肥... /> 37 | 38 | 39 | 40 | ``` 41 | 42 | 由于是自由职业，所以主要收入还是录制课程，2023可以多元化一些 43 | 44 | ![](https://picx.zhimg.com/80/v2-234ae9f236d02bd3162ebef67c281139_1440w.png) 45 | 46 | ## 自媒体 47 | 自媒体也定一些KPI吧，争取周更，定几个具体的话题吧 48 | 1. funnyCoder每月采访一个有趣的程序员 49 | 2. 书籍红黑榜，点评热门畅销书 & 技术书 并且抽奖送，一周一次吧 50 | - 争取把书架上200多本书都抽奖 or 送给朋友 51 | - Javascript 、CSS 、 Node.js大部分的书 52 | - 吴军博士全部的书 53 | - Python 、计算机基础的书 54 | - 教育 、写作、个人成长 55 | 3. 热门开源项目录制教程，优先英文文档，技术英语两手都要硬 56 | - [Vuejs官网](https://vuej-org/) 57 | - [Reactjs官网](https://b-a.reactjs.org/) （总感觉还没写完） 58 | - [Vite官网](https://vitejs.dev/) 59 | - [Type-challenges](https://github.com/type-challenges/type-challenges) 配套视频解答 60 | - [Vue-challenges](https://vuejs-challenges.netlify.app/) 视频解答 61 | - [Wtf-Solidity](https://wtf.academy/) web3教程 62 | - 小程序入门和实战教程 63 | - 热门文章共度 比如[Why React Re-Renders](https://www.joshwcomeau.com/react/why-react-re-renders/), [Islands Architecture](https://www.patterns.dev/posts/islands-architecture/#:~:text=Islands%20are%20a%20component-based%20architecture%20that%20suggests%20a,and%20scripts%20capable%20of%20rehydrating%20themselves%20after%20rendering.) 64 | - 其他大家喜欢的框架 & 教程 欢迎留言 65 | 4. 互联网科普 & 唠嗑视频 66 | - 科普互联网 67 | - 新技术科普 68 | 69 | ## 开发 70 | 71 | 自由职业那天起，就像做一个独立的小产品，希望2023能够发布一个mvp版本，现在有两个想法 72 | 1. 学英语相关的工具 73 | 2. 交互式的blog，有在线录制课程 & 讲解的功能 74 | 75 | 要求不高，借助Serverless跑起来 有用就行，正好好好调研一下业界内的免费和好用的开发资源，包括不仅限于 aircode, cloudflare，图床、数据库、翻译API、监控，支付等服务，应该挺有趣 76 | 77 | 78 | 然后开源方面可以对一些热门的框架做点力所能及的贡献，然后把我的[前端源码漫游记](https://github.com/course-dasheng/source-tour)写好完善，把前端热门的框架原理都造个轮子，作为学习教程 79 | 80 | ## 课程 81 | 2022因为各方面原因，我的个人效率也不是很高，很多内容拖延了，2023争取提高效率，维护&开发下列课程，争取做到质量过关 82 | 83 | 1. 前端学算法(更新) 84 | - leetcode刷题200，一次性解决大厂面试的算法题 85 | 2. [前端源码漫游记](/source/) 86 | - 一次性掌握前端热门框架原理 87 | - Vue3 + React + Vite + Rollup 源码手写 ... 88 | - Typescript + Pnpm + Monorepo + Vitest 89 | 3. [Vue3+Typescript高级工程师培养计划](/vue/) 90 | - 入门实战 + Typescrpt企业级实战 91 | - 性能优化 & 监控 & 项目亮点 92 | - 组件库实战 93 | 4. [React18+Typescript高级工程师培养计划](/react/) 94 | - 入门实战 + Typescrpt企业级实战 95 | - 性能优化 & 监控 & 项目亮点 96 | - 组件库实战 97 | 5. 前端全链路性能优化 （可能是个文字专栏） 98 | 6. Web3实战教程，把我2018年的教程更新改版一下 99 | 7. 面试专项提高（刷题 & 系统学习） 100 | 8. 和其他大佬合作课程，在谈的有【Vue3进阶】和【开源入门教程】 101 | 102 | ![](https://pic1.zhimg.com/80/v2-562e10add21cf0f67aef3e1f7e3cbd49_1440w.jpeg) 103 | 104 | ![](/blockchain-2018.jpg) 105 | ## 生活和学习 106 | 107 | 1. 多锻炼，减减肥，新的挑战 108 | 2. 学习英语 109 | - 以雅思作为目标，系统的学习英语，可以辅导学员找国外的远程，自己和学员都多条路 110 | - 试试英文输出 111 | 3. 放开了，得出去旅旅游了 112 | 4. 写一本书 113 | - Javascript入门实战相关 114 | - [玩转Vue3出版](http://gk.link/a/10BM3) 115 | -------------------------------------------------------------------------------- /docs/public/ikun-danmu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | KunBoard 7 | 67 | 68 | 69 | 70 | 71 |
72 | 73 | 74 |
75 |
《传 世 经 典》
76 |
发动技能：铁山靠
77 |
《梦开始的地方》
78 |
每一帧都是表情包
79 |
恭喜你找到了镇站之宝！！！
80 |
《永垂不朽》
81 |
万 恶 之 源
82 |
你干吗？
83 |
哈哈哈哈哈哈哈
84 |
披金成王，伴坤远航
85 |
第一首赞美家禽
86 |
87 |
88 | 89 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /docs/blog/tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: false 3 | prev: false 4 | next: false 5 | 6 | --- 7 | # 出海独立开发资源 8 | 9 | > 只是我准备用的，并不是最好的, 欢迎讨论和PR 10 | > Javascript技术栈+英语 一切皆有可能 11 | 12 | ## 开发模板（快速开发） 13 | 14 | > 地铁口摆摊赚到钱最重要，具体是卖袜子还是卖耳机，都是次要的 15 | 16 | | 模板作用 | 服务地址 | 备注 | 17 | |--- |--- |--- | 18 | | 网页Sass服务 | [Opensaas](https://opensaas.sh/)
[Shipfast(付费)](https://shipfa.st/)
[Supastarter(付费)](https://supastarter.dev/) | 免费
付费
付费 | 19 | | Chrome插件 | | | 20 | | App开发 | | | 21 | | 桌面客户端开发| | | 22 | 23 | 24 | 25 | ## 技术栈和模板 26 | > 我是前端 用的都是前端技术养活自己 27 | 28 | | 场景 | 框架 | 备注 | 29 | |--- |--- |--- | 30 | | 前端开发 | [Next.js](https://nextjs.org/) | 占有率最高的React开发框架 | 31 | | 后端开发 | [Nest.js](https://nestjs.com/) | Node.js框架 | 32 | | 组件库 | [tailwindcss](https://tailwindcss.com/)
[shadcn-ui](https://shadcn-ui.vercel.app/)
[mui](https://mui.com/zh/) | 快速开发 | 33 | | 鉴权| next-auth | | 34 | | Chrome插件开发 | | | 35 | 36 | https://github.com/PlasmoHQ/plasmo 37 | 38 | 39 | 40 | 41 | 42 | ## 好用的工具和服务 43 | 44 | > 启动初期减少花费 45 | 46 | | 服务名称 | 服务地址 | 服务描述 | 47 | |--- |--- |--- | 48 | | 前端&函数部署 | [Vercel](https://vercel.com/)
[Aircode](https://aircode.io/)
[zeabur](https://zeabur.com/)| | 49 | | 支付 | [stripe](https://stripe.com/)
[lemonsqueezy](https://www.lemonsqueezy.com/) | 企业资质
个人资质，手续费高点，有分销功能 | 50 | | 数据库 | [Supabase](https://supabase.com/) | 数据库
文件存储
auth| 51 | | 个人展示页 | [linktree](https://linktr.ee/) | | 52 | | 代码管理 | [github](https://github.com/) | | 53 | | CDN & 域名 | [⭐️Cloudflare](https://www.cloudflare.com/) | 还有存储 ddos pages worker等服务 | 54 | | 文档 | [飞书](https://www.feishu.cn/)
github+markdown | | 55 | | 邮件 | [resend](https://resend.com)
[mailgun](https://mailgun.com) | | 56 | | 图标和配图| [iconscout](https://iconscout.com/)
[devicon](https://devicon.dev/) | | 57 | | 网站设计| [Happyhues](https://www.happyhues.co/)
[Mobbin](https://mobbin.com/browse/ios/apps) | 配色选择
参考（抄袭）界面设计 | 58 | | 录屏| [focusee](https://gemoo.com/focusee/) | | 59 | | 网页分析| [Google Analytics](https://analytics.google.com/)
[beamanalytics](https://beamanalytics.io/)
[clarity](https://clarity.microsoft.com/)| | 60 | 61 | 62 | 63 | 64 | crisp 65 | 66 | ## 文章&推特推荐（打鸡血，找灵感） 67 | * [西方人到底有多喜欢单一功能的产品](https://twitter.com/nishuang/status/1692346895136408028) 68 | * [不上班的1000天](https://vikingz.me/1000-days/) 69 | * [如何注册海外公司](https://twitter.com/xqliu/status/1745648319026926044) 70 | * [你都做了啥项目](https://www.reddit.com/r/SideProject/comments/196nuzu/whats_your_project_and_how_much_did_yall_make/) 71 | * [一个独立开发者的8年创业](https://mp.weixin.qq.com/s/sUcLSYE4DdX-iItIBjy8kg) 72 | * [独立开发者如何赚钱？](https://mp.weixin.qq.com/s/8_g73xwsihgFQYn67BTP3Q) 73 | * [海外产品开发套件（不定期更新）](https://twitter.com/lai_jia_wei/status/1713891009577554255) 74 | 75 | 76 | ## 网站、书籍推荐 (有部分pdf可以分享) 77 | 78 | | 书名 | 备注 | 79 | |--- |--- | 80 | | [单干](https://book.douban.com/subject/36459316/) | | 81 | | [一人公司](https://book.douban.com/subject/36492867/) | | 82 | | [写给大家看的设计书](https://book.douban.com/subject/26664522/) | | 83 | | [离谱的英语学习指南](https://github.com/byoungd/English-level-up-tips) | | 84 | | [罗永浩15堂演讲私教课](https://www.bilibili.com/video/BV1PP411T7fv/) | 讲故事吹牛逼 | 85 | | [Refactoring UI](https://www.refactoringui.com/) | tailwind作者写的UI设计书| 86 | | [The indie maker handbook](https://readmake.com/) | 传奇独立开发者levelsio写的独立开发指南 | 87 | | [Compant Of One](https://book.douban.com/subject/30385558/) | | 88 | | [Zero to sold](https://zerotosold.com/) | | 89 | | [Start Small, Stay Small](https://book.douban.com/subject/5924300/) | | 90 | 91 | show your work 92 | get together 93 | the sass playbook 94 | 95 | 96 | ## 网站推荐（找灵感，做推广） 97 | * [indiehackers](https://www.indiehackers.com/) 98 | * [独立开发展示页startups.fyi](https://www.startups.fyi/) 99 | * [硬地骇客博客](https://hardhacker.com/) 100 | * 需要运营和推广的：Twitter, Youtube, Reddit, Hacker News、V2EX、ProductHunt 101 | -------------------------------------------------------------------------------- /docs/public/bili.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | sidebar: false 4 | 5 | title: 大圣前端进阶指南 6 | titleTemplate: 解决前端进阶的难点 7 | 8 | hero: 9 | name: 大圣的前端进阶课程 10 | # text: 解决前端进阶的难点 11 | tagline: 面试, 企业级项目, 源码，算法，做最好的前端课程 12 | image: 13 | src: https://cdn.jsdelivr.net/gh/woniuppp/static/coding.svg 14 | alt: challenges 15 | actions: 16 | # - theme: brand 17 | # text: 使用说明 18 | # link: /desc 19 | - theme: brand 20 | text: 前端面试辅导 21 | link: /interview/ 22 | - theme: alt 23 | text: 玩转Vue3 24 | link: /vue/ 25 | - theme: alt 26 | text: 玩转React18 27 | link: /react/ 28 | # - theme: alt 29 | # text: 源码手写 30 | # link: /source/ 31 | # - theme: alt 32 | # text: 啃算法 33 | # link: /algorithm/ 34 | # - theme: alt 35 | # text: 博客 36 | # link: /life/2023 37 | features: 38 | - title: React+TS企业级实战+组件库 39 | icon: 40 | src: /react.svg 41 | details: React+Typescript+Vite企业级实战+组件库 42 |
一个从入门到专家的React企业级实战课程 43 | link: /react/ 44 | linkText: 玩转React18 45 | - title: Vue3+TS企业级实战+组件库 46 | icon: 47 | src: /vue.svg 48 | details: Vue3+Typescript+Vite企业级实战+组件库 49 |
一个从入门到专家的Vue企业级实战课程 50 | link: /vue/ 51 | linkText: 玩转Vue3 52 | - title: 前端工程师的算法课 53 | icon: 54 | src: /al.svg 55 | details: JS实现算法+ Vue/React框架中的算法 + leetcode200题 56 |
一次性解决前端工程师面试中的算法难题 57 | link: /algorithm/ 58 | linkText: 前端算法课 59 | - title: 源码漫游记 60 | icon: 61 | src: /vite.svg 62 | details: 前端框架热门源码一次性搞懂 63 |
手写Vue,React,Vite等前端框架源码 64 | link: /source/ 65 | linkText: 前端源码漫游记 66 | 67 | - title: 前端面试课 68 | icon: 69 | src: /interview.svg 70 | details: 一次1V1模拟面试 + 职业规划 + 常见面试题剖析 71 |
面试突击必备 72 | link: /interview/ 73 | linkText: 前端面试课 74 | - title: 大圣前端私教课 75 | icon: 76 | src: /sijiao.svg 77 | details: 1V1辅导+全部视频课 78 |
定制你的学习路线，辅导你的职业规划 79 | link: /sijiao/ 80 | linkText: 前端私教课 81 | 82 | - title: 玩转Vue3全家桶(极客时间) 83 | icon: 84 | src: https://static001.geekbang.org/static/time/icon/apple-touch-icon.jpg 85 | details: 图文课程 86 |
基础+实战+源码，全方位学透Vue 3 87 | link: http://gk.link/a/10BM3 88 | linkText: 玩转Vue3全家桶 89 | - title: Vue3实战入门(B站) 90 | icon: 91 | src: /bili.svg 92 | details: Vue3+TS实战课 93 |
B站课堂 94 | link: https://www.bilibili.com/cheese/play/ss2185 95 | linkText: Vue3TS实战课 96 | 97 | - title: 关于 98 | icon: 99 | src: /wanzhuanvue.jpg 100 | details: 关于我 101 | link: /about 102 | linkText: 关于 103 | 104 | 105 | 106 | 107 | # - title: 选题丰富 108 | # # icon: 🚀 109 | # details: 来源社区热门面试题 & 挑战项目，Javascript, Typescript, Vue, React, Node.js, 系统设计题 110 | # link: /interview/ 111 | # linkText: 了解更多 112 | # - title: 知识体系完善 113 | # details: 企业级实战，框架源码，热门面试题一网打尽 114 | # - title: 配套视频讲解 115 | # details: 逐行代码演示+讲解，手把手助你进阶前端 116 | # - title: 社区共建 117 | # details: 欢迎大家贡献面试中遇到的题目，寻求最优解 118 | # - title: 社区共建 119 | # details: 欢迎大家贡献面试中遇到的题目，寻求最优解 120 | 121 | # - title: 社区共建 122 | # details: 欢迎大家贡献面试中遇到的题目，寻求最优解 123 | 124 | --- 125 | 126 | 127 | 128 | 129 | 130 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /docs/template.md: -------------------------------------------------------------------------------- 1 | # 标题 2 | 3 | 4 | [题目来源](https://fullstack-challenges.netlify.app/) 5 | 6 | ## 题目要求和代码 7 | ```vue 8 | 9 | ``` 10 | 11 | ## 解答 12 | 13 | ```vue 14 | 15 | 16 | - xx 17 | + aa 18 | ``` 19 | 20 | ## 视频 21 | 22 | []() 23 | 24 | https://mermaid.js.org/syntax/examples.html 25 | 26 | 27 | default, neutral,dark,forest,base 28 | 29 | ```mermaid 30 | flowchart LR 31 | subgraph TOP 32 | direction TB 33 | subgraph B1 34 | direction RL 35 | i1 -->f1 36 | end 37 | subgraph B2 38 | direction BT 39 | i2 -->f2 40 | end 41 | end 42 | A --> TOP --> B 43 | B1 --> B2 44 | 45 | 46 | ``` 47 | 48 | ```mermaid 49 | sequenceDiagram 50 | par Alice to Bob 51 | Alice->>Bob: Hello guys! 52 | and Alice to John 53 | Alice->>John: Hello guys! 54 | end 55 | Bob-->>Alice: Hi Alice! 56 | John-->>Alice: Hi Alice! 57 | 58 | 59 | ``` 60 | 61 | ```mermaid 62 | stateDiagram-v2 63 | State1: The state with a note 64 | note right of State1 65 | Important information! You can write 66 | notes. 67 | end note 68 | State1 --> State2 69 | note left of State2 : This is the note to the left. 70 | 71 | 72 | ``` 73 | 74 | ```mermaid 75 | journey 76 | title My working day 77 | section Go to work 78 | Make tea: 5: Me 79 | Go upstairs: 3: Me 80 | Do work: 1: Me, Cat 81 | section Go home 82 | Go downstairs: 5: Me 83 | Sit down: 5: Me 84 | 85 | 86 | ``` 87 | 88 | ```mermaid 89 | gantt 90 | dateFormat YYYY-MM-DD 91 | title Adding GANTT diagram functionality to mermaid 92 | excludes weekends 93 | %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) 94 | 95 | section A section 96 | Completed task :done, des1, 2014-01-06,2014-01-08 97 | Active task :active, des2, 2014-01-09, 3d 98 | Future task : des3, after des2, 5d 99 | Future task2 : des4, after des3, 5d 100 | 101 | section Critical tasks 102 | Completed task in the critical line :crit, done, 2014-01-06,24h 103 | Implement parser and jison :crit, done, after des1, 2d 104 | Create tests for parser :crit, active, 3d 105 | Future task in critical line :crit, 5d 106 | Create tests for renderer :2d 107 | Add to mermaid :1d 108 | Functionality added :milestone, 2014-01-25, 0d 109 | 110 | section Documentation 111 | Describe gantt syntax :active, a1, after des1, 3d 112 | Add gantt diagram to demo page :after a1 , 20h 113 | Add another diagram to demo page :doc1, after a1 , 48h 114 | 115 | section Last section 116 | Describe gantt syntax :after doc1, 3d 117 | Add gantt diagram to demo page :20h 118 | Add another diagram to demo page :48h 119 | 120 | 121 | ``` 122 | 123 | ```mermaid 124 | pie showData 125 | title Key elements in Product X 126 | "Calcium" : 42.96 127 | "Potassium" : 50.05 128 | "Magnesium" : 10.01 129 | "Iron" : 5 130 | 131 | 132 | ``` 133 | 134 | ```mermaid 135 | gitGraph 136 | commit 137 | commit 138 | branch develop 139 | commit 140 | commit 141 | commit 142 | checkout main 143 | commit 144 | commit 145 | merge develop 146 | commit 147 | commit 148 | ``` 149 | 150 | ```mermaid 151 | mindmap 152 | root((mindmap)) 153 | Origins 154 | Long history 155 | ::icon(fa fa-book) 156 | Popularisation 157 | British popular psychology author Tony Buzan 158 | Research 159 | On effectiveness
and features 160 | On Automatic creation 161 | Uses 162 | Creative techniques 163 | Strategic planning 164 | Argument mapping 165 | Tools 166 | Pen and paper 167 | Mermaid 168 | ``` 169 | -------------------------------------------------------------------------------- /docs/react/arch/03.infra.md: -------------------------------------------------------------------------------- 1 | # 企业级项目规范搭建 2 | 3 | 4 | --- 5 | 6 | ## 项目目录规范 7 | ``` 8 | pages 页面 9 | components 组件 10 | routes 路由 react-router-dom 11 | hooks hooks工具库 12 | utils 函数工具库 13 | api 网络请求 14 | layout 布局 15 | types 类型定义（TS） 16 | store 数据流 17 | .... 18 | 19 | ``` 20 | 21 | --- 22 | 23 | ## 页面搭建 24 | 1. 登录 25 | 2. 管理后台 （动态权限控制） 26 | 3. 404（报错 27 | 28 | --- 29 | 30 | ## 登录页面 31 | 32 | 其实登录没啥大数据量，复杂度来自后端 33 | 34 | 1. 用户名密码 35 | 2. 第三方登录（扫码,github...） 36 | 3. 验证码（图片，短信，语音） 37 | 4. 前端主要在于表单验证，和后端交互 & 一点点体验 38 | 39 | --- 40 | 41 | 1. ant-design的form表单使用 42 | 2. 输入验证 43 | 3. 登录请求 44 | 4. 登录的token管理（jwt) 45 | 5. 路由跳转 46 | 6. 路由守卫，非登录态跳转到登录页 47 | 48 | --- 49 | ## 网络请求代理 50 | 51 | vite的proxy配置 52 | 53 | --- 54 | 55 | ## 请求方式 56 | 57 | 1. fetch 58 | 59 | 所有api前缀代理到server端, 60 | `/user/hi` 61 | => 62 | `http://localhost:7001/api/user/hi` 63 | => 64 | `http://shengxinjing.cn:7001/user/hi` 65 | 66 | 67 | ```javascript 68 | fetch('/api/user/hi',{ 69 | // headers:{ 70 | // apikey:'dasheng123' 71 | // } 72 | }).then(res=>res.json()).then(res=>{ 73 | console.log(res) 74 | }) 75 | 76 | ``` 77 | 78 | --- 79 | 80 | ## api校验 & axios 81 | 后端设置了api校验，隔一段时间会换一次，过期会报错，大家pull最新代码即可，维护正版的权益 82 | axios的interceptors 83 | 84 | ``` 85 | VITE_API_KEY=dasheng123 86 | VITE_URL=[http://shengxinjing.cn:7001](http://shengxinjing.cn:7001) 87 | ``` 88 | 89 | 1. 判断返回值的code，是0的话，返回data （也可以交给业务处理） 90 | 2. 不是0的话，用antd显示报错信息 91 | 3. 请求需要获取环境变量，.env下面 VITE_开头 92 | 1. 登录后的token 93 | 2. api的key 94 | 4. 登录账号 95 | 1. /user/login 96 | 97 | ``` 98 | 316783812@qq.com 99 | 316783812 100 | ``` 101 | 102 | --- 103 | 104 | ## token和用户信息怎么存 105 | localStorage和Context 106 | 107 | 1. Context是最简单的数据数据管理方案 108 | 2. Provider包裹+useContext获取 109 | 110 | 111 | --- 112 | ## 路由守卫 113 | 1. AuthRouter设计 114 | 2. 路由配置自动化 （glob import） 115 | 3. 路由懒加载Suspense实现 116 | 4. 路由匹配函数 117 | 118 | --- 119 | 120 | ## 页面布局Layout 121 | 122 | 1. antd layout组件（后续会实现） 123 | 2. antd 栅格系统 124 | 125 | --- 126 | 127 | ## css解决方案 128 | 129 | 1. css 130 | 2. 行内样式 131 | 3. less sass stylus预处理 132 | 4. css in js 133 | 5. tailwindcss原子化css 134 | 135 | 136 | 137 | --- 138 | ## 各种规范lint 139 | 140 | 1. 代码规范eslint （prettier） 141 | 2. stylelint (自行体验) 142 | 3. git hooks `husky` 143 | 4. lint-staged只处理缓存区的代码 144 | 5. git commit信息格式 自己写脚本 or commitlint 145 | 6. commitizen (自行体验) 146 | 147 | --- 148 | ## eslint 149 | 150 | ```sh 151 | pnpm add -D eslint @antfu/eslint-config 152 | 153 | ``` 154 | 155 | `.eslintrc` 156 | 157 | ```json 158 | { 159 | "extends": [ 160 | "@antfu/eslint-config" 161 | ] 162 | } 163 | ``` 164 | 165 | package.json 166 | 167 | ```json 168 | "lint": "eslint src --fix --cache" 169 | ``` 170 | --- 171 | 172 | ## prettier和eslint 173 | 174 | @task: 定制自己团队风格的eslint配置 @shengxj/eslint-config 175 | 176 | 自己定义rules,0表示关闭，1表示warn，2表示error级 177 | 178 | --- 179 | 180 | ## Git 校验 181 | 使用Husky在代码提交的时候，执行校验 182 | 183 | ```sh 184 | pnpm i husky -D 185 | husky install 186 | npx husky add .husky/pre-commit "npm run lint" 187 | 188 | ``` 189 | 190 | ```json 191 | "scripts": { 192 | // install自动执行 193 | "prepare": "husky install" 194 | } 195 | ``` 196 | 197 | --- 198 | 199 | ## lint-staged 防止每次都全量 200 | 201 | ```json 202 | "lint-staged": { 203 | "**/*.{js,jsx,tsx,ts}": [ 204 | "npm run lint" 205 | ] 206 | } 207 | ``` 208 | 209 | --- 210 | 211 | ## git commit信息格式 212 | 方便自动生成changelog和团队协作 213 | 214 | ```sh 215 | : 216 | ``` 217 | type可以是下面的值 218 | 1. feat: 新功能。 219 | 2. fix: Bug修复 220 | 3. docs: 文档修改 221 | 4. perf: 性能优化 222 | 5. refactor: 代码重构 223 | 6. test: 测试代码 224 | 7. chore: 不知道是啥就写chore 225 | 226 | --- 227 | 228 | ## commitlint 229 | 230 | https://commitlint.js.org/#/ 231 | 232 | 其实自己写也不费劲，参考 233 | https://github.com/vuejs/core/tree/main/scripts 234 | 235 | ```sh 236 | pnpm install -D commitlint @commitlint/config-conventional @commitlint/cli 237 | 238 | npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}' 239 | 240 | ``` 241 | 242 | `.commitlintrc` 243 | 244 | ```json 245 | { 246 | "extends": ["@commitlint/config-conventional"] 247 | } 248 | ``` 249 | 250 | 251 | 252 | 1. 目录规范搭建 253 | 2. 好用的脚本工具 254 | 3. 工程化系统搭建(插件和工具) 255 | 256 | -------------------------------------------------------------------------------- /docs/funnycoder.md: -------------------------------------------------------------------------------- 1 | --- 2 | aside: false 3 | --- 4 | 5 | # funnyCoder有趣的程序员 6 | 7 | 152 | 153 | 有趣程序员的职业经历，希望可以给刚入行的程序员一些启发，除了闷头写KPI代码，还有很多有趣的事情可以做。 154 | 155 | 下一期想邀请哪位嘉宾 ，欢迎[联系我](/about) 156 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /docs/blog/2022-12-05-gray-filter.md: -------------------------------------------------------------------------------- 1 | # 网页置灰方案讨论 2 | 3 | 如何在网页置灰的前提下，保持部分元素彩色 4 | 5 | [在线体验](https://shengxinjing.cn/gray.html) 6 | 7 | [本文视频版链接](https://www.bilibili.com/video/BV14g411H7Ad/) 8 | 9 | 最近哀悼日，网页端如何一键变灰已经有很多实现方式了，但是我看到一个推文很有意思，是一个不错的面试题 10 | 11 | > 现在网页置灰已经不仅仅是一行css的事了，如何在网页置灰的前提下，部分元素保持彩色，这是一个不错的system design题 12 | 13 | ## 一键变灰 14 | 15 | 这个大部分同学都写了，直接 16 | ```css 17 | html{ 18 | filter: grayscale(100%); 19 | } 20 | ``` 21 | 考虑ie之类的兼容性的话，就直接把兼容性的属性都搞上去 22 | ```css 23 | html{ 24 | -webkit-filter: grayscale(100%); 25 | -moz-filter: grayscale(100%); 26 | -ms-filter: grayscale(100%); 27 | -o-filter: grayscale(100%); 28 | filter: grayscale(100%); 29 | filter: gray; 30 | filter: progid:dximagetransform.microsoft.basicimage(grayscale=1); 31 | } 32 | ``` 33 | 34 | 如果想控制的更动态一些，可以用js控制html的class来实现这个切换过程 35 | 36 | ```html 37 | 38 | ``` 39 | 40 | ```javascript 41 | let style = document.createElement('style') 42 | let graySelector = 'gray-filter' 43 | style.setAttribute('type', 'text/css') 44 | // style.setAttribute('data-vite-dev-id', id) 45 | style.textContent = `.${graySelector}{ 46 | -webkit-filter: grayscale(100%); 47 | -moz-filter: grayscale(100%); 48 | -ms-filter: grayscale(100%); 49 | -o-filter: grayscale(100%); 50 | filter: grayscale(100%); 51 | filter: gray; 52 | filter: progid:dximagetransform.microsoft.basicimage(grayscale=1); 53 | }` 54 | document.head.appendChild(style) 55 | 56 | let root = document.querySelector('html') 57 | let btn = document.querySelector('#set-gray') 58 | btn && btn.addEventListener('click', () => { 59 | setAllGray() 60 | }, false) 61 | 62 | function toggleClassName(el,name){ 63 | if (el.className.indexOf(name) > -1) { 64 | el.className = el.className.replace(name, '').trim() 65 | } else { 66 | el.className = [el.className, name].join(' ') 67 | } 68 | } 69 | 70 | function setAllGray() { 71 | toggleClassName(root,graySelector) 72 | } 73 | 74 | ``` 75 | 这样可以在后端通过接口的形式决定是不是加载这段js就可以了 76 | 77 | 78 | ![01.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71936e0bca774644a7eb24af5b4cd84d~tplv-k3u1fbpfcp-watermark.image?) 79 | 80 | > 那么问题来了，如何在置灰的前提下部分元素保持彩色呢 81 | 82 | 83 | 84 | ## filter重置（失败） 85 | 如果能直接某个元素重置filter, 尝试下面的写法，但是不生效 86 | 87 | ```css 88 | html{ 89 | filter:grayscale(100%); 90 | } 91 | .not-gray{ 92 | filter:none; 93 | } 94 | ``` 95 | 96 | 如果filter的算法可逆的话，可以在`.not-gray`元素上设置一个翻转的filter，查了点资料,Chromium灰色100%的算法如下, 我本人图像处理方面比较菜，但是看起来全灰的算法不可逆，而且如果在元素上再盖一个canvas也不太好弄 放弃 97 | 98 | ``` 99 | R/G/B = 0.2126R' + 0.7152G' + 0.0722'B 100 | ``` 101 | 102 | 103 | ## 遮挡解决方案 backdrop-filter 104 | 105 | 有一个解决方案是用backdrop-filter做一个遮罩，毕竟filter还是有点损耗首屏性能的，虽然可以用transform开启硬件优化一些，我们还可以用遮罩的方式挡住也可以的，并且设置`pointer-events: none;`不阻挡用户交互，也是一段css搞定 106 | 107 | ```css 108 | html { 109 | position: relative; 110 | width: 100%; 111 | height: 100%; 112 | } 113 | html::before { 114 | content: ""; 115 | position: fixed; 116 | backdrop-filter: grayscale(100%); 117 | pointer-events: none; 118 | inset: 0; 119 | z-index: 100; 120 | } 121 | ``` 122 | 还可以把遮罩的position换成absolute, 实现一个只置灰首屏的效果，不过我感觉没啥必要 123 | 124 | 125 | ![02.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bf01e0235824086a9f9ad68fe57960c~tplv-k3u1fbpfcp-watermark.image?) 126 | 127 | 然后我们可以设置指定元素的z-index，超过backdrop-filter的100就可以, 就有首屏+部分彩色的效果 128 | 129 | ![05.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a53bffbbd1b74260bba618ec60842164~tplv-k3u1fbpfcp-watermark.image?) 130 | 131 | ```css 132 | .not-gray{ 133 | position: relative; 134 | z-index:1000; 135 | } 136 | ``` 137 | 138 | 139 | ## 元素遍历标记 140 | 141 | backdrop-filter其实也有他的兼容性问题，尤其是firefox版本102(最新107)之前都不能用，filter方案更普及一些，不过作为面试题的话 我们还可以继续用filter这个方法， 142 | 143 | ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d92347f45b2b4768bfc8129d7292d851~tplv-k3u1fbpfcp-watermark.image?) 144 | 145 | ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d61f548cf85841b7bc15e5c79e5580be~tplv-k3u1fbpfcp-watermark.image?) 146 | 147 | 148 | 我们设置有一些选择器保持彩色，然后统计出当前这个网页中，需要置灰的元素，网页是一个属性结果，我们先对选中元素的父元素进行遍历标记 149 | 150 | 151 | 152 | 153 | ![06.jpeg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8466aa5236e9479297974322eab588e2~tplv-k3u1fbpfcp-watermark.image?) 154 | 155 | ```javascript 156 | 157 | let body = document.body 158 | //配置选择器，命中这个列表选择器的不置灰 159 | let selectors = ['#not-gray2', '.not-gray3'] 160 | selectors.forEach(selector=>{ 161 | let doms = [...document.querySelectorAll(selector)].forEach(v=>{ 162 | if(!v) return 163 | v.staycolor = true 164 | let parent = v.parentNode 165 | while(parent && !parent.colorful){ 166 | parent.colorful = true 167 | parent = parent.parentNode 168 | } 169 | }) 170 | }) 171 | 172 | ``` 173 | 174 | 然后现在需要置灰的元素都已经标记了colorful，然后我们遍历一下，递归每个child，如果没有colorful，直接置灰返回，通过递归就可以把所有元素都置灰了 175 | 176 | ```js 177 | let graySelector = 'gray-filter' 178 | walk(body) 179 | 180 | function walk(node){ 181 | if(node.nodeType!==1) return 182 | if(node.staycolor) return 183 | if(!node.colorful){ 184 | toggleClassName(node,graySelector) 185 | return 186 | } 187 | for (var i = 0; i < node.children.length; i++) { 188 | var child = node.children[i]; 189 | walk(child) 190 | } 191 | } 192 | ``` 193 | 194 | 可以把selectors做成从后端读取，就可以动态设置保持彩色的部分了, 不过这样设置filter可能会导致部分元素的定位失效，不过作为面试题的追问还不错 195 | 196 | ![04.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7a2de7d0ecc45b88000a98c95422af2~tplv-k3u1fbpfcp-watermark.image?) 197 | 198 | ## 总结 199 | 作为面试题来说，考察了面试者的css，js的dom遍历，递归思想，很不错的入门题 200 | -------------------------------------------------------------------------------- /docs/public/gray.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 如何在网页置灰的时候，部分元素保持彩色-有意思的面试题 9 | 10 | 11 | 60 | 61 | 62 | 63 | 64 | 联系作者 65 | 66 |
67 | 68 | 69 | 70 |
71 |
72 | 73 |
74 |
75 |
76 |
77 |
78 | 79 |
80 | 81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 |
96 | 97 |
98 |
99 |
100 |
101 | 102 |
103 |
104 |
105 |
106 |
107 | 108 | 109 | 110 | 204 | 205 | 206 | 207 | -------------------------------------------------------------------------------- /docs/react/arch/02.typescript.md: -------------------------------------------------------------------------------- 1 | # Typescript必知必会 2 | 3 | 4 | ## 为什么我们需要Typescript 5 | 6 | [在线学习TS](https://www.typescriptlang.org/play?#code/Q) 7 | 8 | ```ts 9 | // 类型系统 10 | let course:string = '前端工程师' 11 | let price:number = 129 12 | price = '89' //类型报错 13 | let isOnline:boolean = true 14 | ``` 15 | 就像三体人一样，都是透明的 16 | 17 | 18 | --- 19 | 20 | 21 | ## Typescript入门类型 22 | 23 | `boolean`, `number`, `string`, `null`,`undefined`,`symbol` ... 24 | 25 | `any`,`enum` ... 26 | 27 | 28 | --- 29 | 30 | ## 联合类型 31 | 32 | ```ts 33 | 34 | let course1 : string|number = '玩转前端' 35 | course1 = 1 36 | course1 = true // 报错 37 | 38 | type courseScore = '好' | '非常好' | '嘎嘎好' 39 | let score1 :courseScore = '好' 40 | let score2 :courseScore = '一般好' // 报错 41 | ``` 42 | 43 | --- 44 | 45 | ## 接口类型 46 | 47 | ```ts 48 | 49 | 50 | interface 前端课程 { 51 | 课程名字:string, 52 | 价格:number[], 53 | 受众:string, 54 | 讲师头像?:string|boolean, 55 | readonly 课程地址:string 56 | } 57 | let course: 前端课程 = { 58 | 课程名字:'玩转前端', 59 | 价格:[59,'139'], 60 | 讲师头像:false, 61 | 课程地址:"xxxx" 62 | } 63 | course['课程地址']= 'yyyy' // 报错 64 | 65 | ``` 66 | 67 | --- 68 | 69 | 70 | ## Typescript函数 71 | 72 | ```ts 73 | 74 | function 函数名(参数:参数类型):返回值类型{} //大致语法 75 | function add(x: number, y: number): number { 76 | return x + y; 77 | } 78 | add(1, 2); 79 | 80 | 81 | ``` 82 | 83 | --- 84 | 85 | ```ts 86 | 87 | let add1:(a:number,b:number)=>number = function(x: number, y: number): number { 88 | return x + y; 89 | } 90 | type addType = (a:number,b:number)=>number 91 | let add2:addType = function(x: number, y: number): number { 92 | return x + y; 93 | } 94 | 95 | interface addType1{ 96 | (a:number,b:number):number 97 | } 98 | let add3:addType1 = function(x: number, y: number): number { 99 | return x + y; 100 | } 101 | ``` 102 | 103 | --- 104 | 105 | ```ts 106 | 107 | function reverse(x: number): number 108 | function reverse(x: string): string 109 | function reverse(x: number | string): number | string | void { 110 | if (typeof x === 'number') { 111 | return Number(x.toString().split('').reverse().join('')); 112 | } else if (typeof x === 'string') { 113 | return x.split('').reverse().join(''); 114 | } 115 | } 116 | 117 | ``` 118 | 119 | 120 | --- 121 | 122 | 123 | ## 宿主环境的类型 124 | 125 | [参考地址](https://github.com/Microsoft/TypeScript/tree/main/src/lib) 126 | ```ts 127 | let w:Window = window 128 | let ele:HTMLElement = document.createElement('div') 129 | let allDiv: NodeList = document.querySelectorAll('div') 130 | 131 | ele.addEventListener('click',function(e:MouseEvent){ 132 | const args:IArguments = arguments 133 | w.alert(1) 134 | console.log(args) 135 | },false) 136 | ``` 137 | 138 | --- 139 | 140 | 141 | ## 泛型入门 142 | 143 | ```ts 144 | 145 | function identity0(arg: any): any { 146 | return arg 147 | } 148 | // 相当于type T = arg的类型 149 | function identity(arg: T): T { 150 | return arg 151 | } 152 | identity('玩转前端') // 这个T就是string，所以返回值必须得是string 153 | identity(1) 154 | ``` 155 | 156 | --- 157 | 158 | ## keyof 159 | 160 | ```ts 161 | 162 | interface VueCourse5 { 163 | name:string, 164 | price:number 165 | } 166 | type CourseProps = keyof VueCourse5 // 只能是name和price选一个 167 | let k:CourseProps = 'name' 168 | let k1:CourseProps = 'p' // 改成price 169 | 170 | ``` 171 | 172 | 173 | --- 174 | 175 | ## extends && in 176 | 177 | ```ts 178 | 179 | // T extends U ? X : Y 类型三元表达式 180 | 181 | type ExtendsType = T extends boolean ? "前端" : "后端" 182 | type ExtendsType1 = ExtendsType 183 | // type ExtendsType1='前端' 184 | type ExtendsType2 = ExtendsType 185 | // type ExtendsType2='后端' 186 | 187 | 188 | type Courses = '前端'|'后端' 189 | type CourseObj = { 190 | [k in Courses]:number // 遍历Courses类型作为key 191 | } 192 | // 上面的代码等于下面的定义 193 | // type CourseObj = { 194 | // 前端: number; 195 | // 后端: number; 196 | // } 197 | 198 | 199 | ``` 200 | 201 | 202 | --- 203 | 204 | ```ts 205 | 206 | // K extends keyof T限制K的类型必须是T的属性之一 207 | // T[K]是值得类型 208 | function getProperty(o: T, name: K): T[K] { 209 | return o[name] 210 | } 211 | const coursePrice:CourseObj = { 212 | "前端":20, 213 | "后端":30 214 | } 215 | getProperty(coursePrice,'前端') 216 | getProperty(coursePrice,'运维') // 报错 217 | 218 | ``` 219 | 220 | --- 221 | 222 | ## infer 223 | 224 | ```ts 225 | // 其实写的不多，认识一下就好 226 | type Foo = () => CourseObj 227 | 228 | // 如果T是一个函数，并且函数返回类型是P就返回P 229 | type ReturnType1 = T extends ()=>infer P ?P:never 230 | type Foo1 = ReturnType1 231 | 232 | ``` 233 | 234 | 235 | 236 | --- 237 | 238 | 239 | ## 好用的类型工具函数 240 | 241 | 242 | [地址](https://www.typescriptlang.org/docs/handbook/utility-types.html) 243 | 244 | ```ts 245 | 246 | interface Todo { 247 | title: string 248 | desc:string 249 | done?: boolean 250 | } 251 | 252 | 253 | type partTodo = Partial 254 | type requiredTodo = Required 255 | type TodoPreview = Pick 256 | type TodoPreview1= Omit 257 | 258 | ``` 259 | 260 | 261 | --- 262 | 263 | 264 | 1. React中的Typescript 265 | 266 | 最简单的React+TS, 267 | [不推荐React.FC](https://github.com/facebook/create-react-app/pull/8177) 268 | 269 | ```ts 270 | useState(0) //简单的借助自动推导 271 | useSate([]) // 类型声明 272 | 273 | // useEffect 先不管 274 | // React.FC不推荐, 单独的事件处理函数需要类型 275 | type CourseProps = { 276 | name:string 277 | } 278 | const CoursePage = (props:CourseProps) => { 279 | function handle1(e:React.MouseEvent){} 280 | return
281 |
handle(x)}>{props.name}
282 |
283 | 284 |
285 |
286 | } 287 | 288 | ``` 289 | 290 | --- 291 | 292 | useEffect不太需要额外的props 293 | 294 | 封装的hooks按照函数类型 295 | 296 | children & 复杂的props 297 | 298 | 项目中用到随用随学 299 | 300 | https://react-typescript-cheatsheet.netlify.app/docs/basic/setup/ 301 | 302 | https://profy.dev/article/react-typescript 303 | 304 | 305 | --- 306 | 307 | -------------------------------------------------------------------------------- /docs/public/interview.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/MyLayout.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | 104 | 125 | 165 | -------------------------------------------------------------------------------- /docs/public/ad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 防拦截广告 8 | 9 | 27 | 28 | 29 |

30 | 首页 31 |

32 |
33 | 34 |
❌
35 |
36 | 199 | 200 | 201 | -------------------------------------------------------------------------------- /docs/blog/2022-12-04-chatgpt.md: -------------------------------------------------------------------------------- 1 | # 体验一下ChatGPT 2 | 3 | 可以帮你写代码、写邮件、编故事的神器 4 | 5 | 最近OpenAI 发布了备受期待的原型通用 ChatGPT，这是一种基于对话的 AI 聊天界面，算是GPT-3(Generative  Pre-trained Transformer 3)的继承者，今天记录一下体验的过程，以前我对AI的理解总感觉离我很远，现在我好像看到了未来 6 | 7 | ChatGPT 几乎可以做任何事情，从写邮件，到写算法，到做面试题，写个歌，帮你编周报，甚至还能帮你写自动化测试，感觉可以取代stackoverflow了 8 | 9 | 10 | ## 1. 工作助手 11 | 12 | 首先感觉有用的就是帮忙写工作中的邮件 or github的issue，文笔比我自己写的好多了 13 | 14 | 15 | > 给我写一个英语商务邮件，语法优雅，友好一些，邮件内容是：下周一早晨我请大壮吃鸡蛋煎饼，顺便邀请开个早会 16 | 17 | 18 | ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7619a918ae204cbf9219a119543b8e53~tplv-k3u1fbpfcp-watermark.image?) 19 | 20 | ## 代码助手 21 | 22 | > how to write a login form using React ,Typescript and useReducer? 23 | > 24 | 下面是他生成的代码 25 | ```javascript 26 | import React, { useReducer } from 'react' 27 | 28 | type State = { 29 | username: string 30 | password: string 31 | error: string 32 | } 33 | 34 | type Action = 35 | | { type: 'SET_USERNAME'; username: string } 36 | | { type: 'SET_PASSWORD'; password: string } 37 | | { type: 'SET_ERROR'; error: string } 38 | 39 | function reducer(state: State, action: Action): State { 40 | switch (action.type) { 41 | case 'SET_USERNAME': 42 | return { ...state, username: action.username } 43 | case 'SET_PASSWORD': 44 | return { ...state, password: action.password } 45 | case 'SET_ERROR': 46 | return { ...state, error: action.error } 47 | default: 48 | return state 49 | } 50 | } 51 | 52 | function LoginForm() { 53 | const [state, dispatch] = useReducer(reducer, { 54 | username: '', 55 | password: '', 56 | error: '', 57 | }) 58 | 59 | function handleUsernameChange(event: React.ChangeEvent) { 60 | dispatch({ type: 'SET_USERNAME', username: event.target.value }) 61 | } 62 | 63 | function handlePasswordChange(event: React.ChangeEvent) { 64 | dispatch({ type: 'SET_PASSWORD', password: event.target.value }) 65 | } 66 | 67 | function handleSubmit( 68 | 69 | ``` 70 | 71 | > 一个解析页面script标签内容的正则表达式 72 | 73 | 比我写的好 74 | 75 | ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56a51690d36940c4849793dc431e6e8a~tplv-k3u1fbpfcp-watermark.image?) 76 | > leetcode第一题twosum用javascript怎么做 77 | 78 | 甚至还有复杂度的优化过程 79 | 80 | ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16715b90bb814ed98d4075fd912f0330~tplv-k3u1fbpfcp-watermark.image?) 81 | 82 | > write a eslint plugin to forbidden code writing at weekends 83 | 84 | 还有vscode插件，chrome插件 85 | 86 | ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8dde309a3a84b9b9ce1db8dcf93f78a~tplv-k3u1fbpfcp-watermark.image?) 87 | 88 | 89 | ## 面试 90 | > 出五个高级前端工程师的面试题 91 | 92 | > 来两道算法题 93 | 算法还给了答案，真不错 94 | 95 | ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f32bfb5965a4195a1a42d0ad756607f~tplv-k3u1fbpfcp-watermark.image?) 96 | 97 | 98 | ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/271765face264af6983992a945b3c431~tplv-k3u1fbpfcp-watermark.image?) 99 | 100 | ## Vue代码转成React 101 | 102 | 把这段Vue3代码转换成react 103 | ```html 104 | 114 | 115 | 125 | ``` 126 | 127 | 转换结果, 可以直接运行的 128 | 129 | ```javascript 130 | import React, { useState } from 'react' 131 | 132 | function TodoList() { 133 | const [msg, setMsg] = useState('Hello World!') 134 | const [todos, setTodos] = useState(['吃饭']) 135 | 136 | function add() { 137 | setTodos([...todos, msg]) 138 | setMsg('') 139 | } 140 | 141 | return ( 142 |
143 | setMsg(event.target.value)} /> 144 | 145 |
    146 | {todos.map(todo => ( 147 |
  • {todo}
    • 148 | ))} 149 |
150 |
151 | ) 152 | } 153 | 154 | ``` 155 | 然后我把生成的react代码转成angular，在转成vue3,依然是很好的代码质量 156 | 157 | ```html 158 | 169 | 170 | 179 | 180 | ``` 181 | 182 | ## 自动写单测 183 | 甚至可以帮你写测试, 比如给上一段vue代码写点单元测试，给跪了 184 | 185 | 186 | ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/61fb99df07d34a47a2acb6220e52bdbb~tplv-k3u1fbpfcp-watermark.image?) 187 | 188 | 189 | ## Code review 190 | 设置还可以代码review, 提示我清单输入框要做非空判断 191 | 192 | ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae469f6f6912448d91623d07a999c0c6~tplv-k3u1fbpfcp-watermark.image?) 193 | 194 | ## 写代码 195 | 用vue 的写一个组件，可以校验用户输入的邮箱是不是合法，不合法弹出信息提示 196 | 197 | ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5e1c97bb3d04534b19f6c13728c3ef8~tplv-k3u1fbpfcp-watermark.image?) 198 | 199 | ## 闲的无聊 200 | 201 | 202 | > 给Vuejs写一个英文歌曲，摇滚一些 203 | 204 | 感觉可以直接年会 or vueconf上唱了 205 | 206 | ``` 207 | Verse 1: 208 | Vue, you're my favorite framework 209 | You make my code more powerful 210 | With your reactive APIs 211 | And your declarative syntax 212 | 213 | Chorus: 214 | Vue, oh Vue 215 | You're the one I want to use 216 | Vue, oh Vue 217 | You make my life so easy 218 | 219 | Verse 2: 220 | With your components and data-binding 221 | And your virtual DOM rendering 222 | I can create a web app 223 | That's both fast and flexible 224 | 225 | Chorus: 226 | Vue, oh Vue 227 | You're the one I want to use 228 | Vue, oh Vue 229 | You make my life so easy 230 | 231 | Bridge: 232 | When I need to build a frontend 233 | I know just what to do 234 | I turn to you, Vue 235 | You make it all so simple 236 | 237 | Chorus: 238 | Vue, oh Vue 239 | You're the one I want to use 240 | Vue, oh Vue 241 | You make my life so easy 242 | 243 | Outro: 244 | Vue, oh Vue 245 | You're the one I want to use 246 | Vue, oh Vue 247 | You make my life so easy 248 | 249 | ``` 250 | 251 | > 给Reactjs写一个英文歌曲，摇滚一些 252 | 253 | > 一个练习时长两年半的练习生，喜欢唱跳rap 为开头写一个故事 254 | 255 | > 一个人前来买瓜 256 | 257 | 258 | #### 产品经理 259 | > 写一个帮程序员背单词的chrome插件的需求文档 260 | > 产品经理的10个坏习惯 261 | 262 | #### 老中医 263 | 某女，65岁，教师，初诊: 2005年12月20日。患者慢性咳嗽已12年余，近1周加剧。 264 | 1周前夜行不慎触冒风寒，而致旧病又起。证见咳嗽频剧，气急作喘，甚至不能平卧, 喉中痰鸣，痰量多，日约50- 60ml,质稀有泡沫，胸部膨满，微有恶寒发热，两下肢略见水肿，苔白腻较润，舌胖有齿印，舌质淡暗，脉浮细滑。 265 | 请根据患者症状写出证候分析，治法，处方 266 | 267 | 268 | #### 运营 269 | > 马上双十二了，写一个双十二运营活动的需求吧，我是卖编程课的 270 | > 功能7的跟踪和分析，用什么工具监控的 271 | > 写一个让用户感兴趣的消息推送 272 | 273 | #### 招聘经理 274 | > 我们团队想招聘一个高级前端工程师，希望能活泼一些，帮我写个招聘介绍吧 275 | > 不错，再写一个邀请候选人来面试的邮件吧，商务一些，活泼一些 276 | > 面试人来了，出5个高级前端工程师的面试题 277 | > 第一题答案是啥 278 | > 来两个简单的算法题 279 | > 候选人不太合适，写一个拒绝他的邮件，委婉一些 280 | 281 | #### 美食探店 282 | > 想做一个美食探店的视频，帮我写个文案吧 283 | > 今天去的是一个北京卤煮店，写一个文案，要体现口味非常的地道 284 | > 写一份蹭饭挑战的剧本 285 | > 写一个街头关于爱情采访的剧本 286 | > 287 | 288 | #### 职场人 289 | > 怎么跟领导提涨薪 290 | > 给我写一个英语商务邮件，语法优雅，友好一些，邮件内容是：下周一早晨我请大壮吃鸡蛋煎饼，顺便邀请开个早会 291 | #### 写前端代码 292 | > vue3代码 用户名密码 293 | > 加点验证 294 | > 密码加上md5加密 295 | > 代码转成react 296 | > 写点单元测试 297 | > 刚才你那段代码，我一直 PUA 它，让它要写单测，要用 esm 风格，要重构为 ts，要写性能测试，要写文档 298 | 299 | #### 玩游戏 300 | 我们来玩一个游戏吧，场景是这样的，不知为何，我一觉醒来，周围是一个荒岛，然后在荒岛种求生，你来扮演npc，我是玩家，你提供选项给我操作 301 | 302 | 可以加入一些修仙元素吗？比如我接下来会遇见仙人洞府之类的 303 | 304 | 305 | 306 | #### 写后端代码 307 | 308 | #### 写个app 309 | 310 | #### 写检讨 311 | > 我今天忘记做核酸了，老师要求每天都要做核酸，需要写一份500字的检讨书，认错态度要诚恳 帮忙写一下 312 | > 313 | > 今天忘了写日记了，今天主要就是出去遛狗，玩了一下午游戏，帮我写一个500字的日记吧 314 | > 315 | #### 写诗 316 | > 写一首阳了被送去方舱的诗 317 | > 318 | > 再写一首痊愈后从方舱出来，被歧视的诗 319 | 320 | 321 | #### 小学生 322 | 323 | > 帮我写一篇日记，小学四年级 在朝阳公园堆雪人，然后去吃肯德基的日记，不少于800字 324 | --- 325 | 326 | 327 | > 328 | 这个开放之后，稍微二开一下，每个人都可以拥有自己的贾维斯人工智能助理了，期待 329 | 330 | 不过老有人说这玩意会取代程序员，取代产品经理，这个我感觉还不至于，可能会淘汰一些入门的岗位，AI本身也需要输入，需要高质量的从业人员贡献产出，所以无论哪个行业，不想被AI取代，还是得提高自己的知识水平啊 331 | 332 | 333 | ## 补充 334 | 335 | [体验地址，需要注册](https://chat.openai.com/chat) 336 | 337 | [1块钱注册教程](https://juejin.cn/post/7173447848292253704) 338 | 339 | 1. 你要能访问google 340 | 2. 得有个国外手机号，或者1块钱去sms-activate.org注册一个虚拟的 341 | 342 | 343 | -------------------------------------------------------------------------------- /docs/public/ikun.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | ikun-只因键盘 9 | 83 | 84 | 85 | 86 | 87 | 88 |
89 |

ikun只因键盘

90 |
91 | 92 |
93 |
94 | 95 |
96 | 97 |
98 |
99 | 参考曲谱： 100 | jntm 101 | jns 102 | gah 103 | zqerjntmwjns 104 |
105 |
106 |
107 | 108 | 110 | 联系我 一起学编程 111 | 112 |
113 | 114 | 115 | 318 | 319 | 320 | -------------------------------------------------------------------------------- /docs/.vitepress/config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfigWithTheme,defineConfig } from 'vitepress' 2 | import type { Config as ThemeConfig } from '@vue/theme' 3 | import { withMermaid } from "vitepress-plugin-mermaid"; 4 | import fs from 'fs' 5 | import path from 'path' 6 | import { fileURLToPath } from 'url'; 7 | import { biliSvg,telegramSvg } from './util'; 8 | 9 | const __filename = fileURLToPath(import.meta.url); 10 | const __dirname = path.dirname(__filename); 11 | 12 | // import taskLists from 'markdown-it-task-lists' 13 | 14 | function getDirctSidebar(pathname: string) { 15 | const p = path.resolve(__dirname, '../', pathname) 16 | if(!fs.existsSync(p)) return [] 17 | const dirct = fs.readdirSync(p) 18 | .filter(v=>v.endsWith('.md')) 19 | .sort((a, b) => { 20 | if(a==='index.md') return 1 21 | if(a[0]!=='2') return 1 22 | return a>b ? -1 : 1 23 | }) 24 | return dirct.map(dir=>{ 25 | const file = fs.readFileSync(path.resolve(p,dir)).toString() 26 | let text = dir 27 | let lines = file.split('\n') 28 | const line = lines.shift() as string 29 | if(line.startsWith('# ')){ 30 | text = line.replace('# ','') 31 | }else{ 32 | if(line.startsWith('---')){ 33 | const index = lines.findIndex(v=>v.startsWith('---')) 34 | lines = lines.slice(index+1).filter(v=>v) 35 | if(lines[0].startsWith('# ')){ 36 | text = lines[0].replace('# ','') 37 | } 38 | } 39 | } 40 | return { 41 | text, 42 | link: `/${pathname}/${dir.replace('.md','')}` 43 | } 44 | }) 45 | } 46 | 47 | const projectSidebar = { 48 | text:'前端实战进阶', 49 | collapsible: true, 50 | collapsed: true, 51 | items:getDirctSidebar('project') 52 | } 53 | // export default withMermaid(defineConfig({ 54 | export default withMermaid(defineConfigWithTheme({ 55 | title: '大圣前端进阶指南', 56 | description: '大圣前端进阶指南|Vue3|React|Vite|Cli|项目实战', 57 | head: [ 58 | // ['link', { rel: 'icon', href: 'https://cdn.jsdelivr.net/gh/woniuppp/static/element3.ico', type: 'image/svg+xml' }], 59 | ['link', { rel: 'alternate icon', href: 'https://cdn.jsdelivr.net/gh/woniuppp/static/woniu.png', type: 'image/png', sizes: '16x16' }], 60 | // ['script',{src:'/live2d.js'}], 61 | ['link', { rel: 'stylesheet', href:'https://unpkg.com/tailwindcss@2.0.4/dist/tailwind.min.css' }], 62 | // ['link', { rel: 'stylesheet', href:'https://cdn.jsdelivr.net/npm/daisyui@2.51.3/dist/full.css' }], 63 | 64 | 65 | ['script',{src:"https://hm.baidu.com/hm.js?ccf55dfd2764cf3ebf43d6b3c9da9b20"}] 66 | ], 67 | // mermaid:{ 68 | // theme: 'dark' // default,neutral,forest,dark,base 69 | // }, 70 | appearance:false, 71 | 72 | // base:"/src/" 73 | themeConfig: { 74 | me: { 75 | // wechat:"https://cdn.jsdelivr.net/gh/woniuppp/static/wechat.jpg" 76 | // wechat: "https://cdn.jsdelivr.net/gh/woniuppp/static/jingu2.png" 77 | wechat: "/wechat2.png", 78 | gongzhonghao: "/gongzhonghao.jpeg" 79 | // wechat:"https://cdn.jsdelivr.net/gh/woniuppp/static/xiao3.jpg" 80 | }, 81 | logo: 'https://cdn.jsdelivr.net/gh/woniuppp/static/woniu.png', 82 | nav: [ 83 | // { text: '英语', link: '/blog/itwords' }, 84 | { text: '面试课', link: '/interview/' }, 85 | { text: '🔥玩转Vue3', link: '/vue/' }, 86 | { text: '🔥玩转React18', link: '/react/' }, 87 | { text: '源码漫游记', link: '/source/' }, 88 | { text: '前端学算法', link: '/algorithm/' }, 89 | { text: '1V1咨询', link: '/1v1' }, 90 | { text: '关于我', link: '/about' }, 91 | { text: '路线图', link: 'https://roadmap.shengxinjing.cn/' }, 92 | ], 93 | 94 | socialLinks: [ 95 | { icon: 'youtube', link: 'https://www.youtube.com/@shengxj' }, 96 | { icon: 'discord', link: 'https://discord.gg/qCB4pUzpzw' }, 97 | { icon: 'github', link: 'https://github.com/shengxinjing/fe-advanced-interview' }, 98 | { icon: 'twitter', link: 'https://twitter.com/shengxj1' }, 99 | { 100 | icon: { 101 | svg: biliSvg 102 | }, link: "https://space.bilibili.com/26995758" 103 | }, 104 | { 105 | icon: { 106 | svg: telegramSvg}, link: "https://t.me/+TudEYWNH2fw4NDg1" 107 | }, 108 | // { 109 | // icon: { 110 | // svg: ` 111 | // 112 | // 113 | // 114 | // 115 | // 116 | // `, 117 | // }, link: "https://mas.to/@shengxj" 118 | // } 119 | ], 120 | lastUpdatedText:"更新时间", 121 | editLink: { 122 | pattern: 'https://github.com/shengxinjing/fe-advanced-interview/tree/main/docs/:path', 123 | text: '编辑页面' 124 | }, 125 | markdown:{ 126 | config(md){ 127 | // md.use(taskLists) 128 | } 129 | }, 130 | sidebar: { 131 | "/react":[ 132 | { 133 | text: '玩转React18', 134 | // link: "/react/", 135 | collapsible: true, 136 | collapsed: false, 137 | items: [ 138 | { 139 | text: 'React+TS企业级实战+组件库', link: '/react/' 140 | }, 141 | { 142 | text:'实战入门', items: getDirctSidebar('react/intro') 143 | }, 144 | { 145 | text:'企业级实战', items: getDirctSidebar('react/arch') 146 | }, 147 | { 148 | text:'自己的组件库', items: getDirctSidebar('react/component') 149 | }, 150 | { 151 | text:'React生态', items: getDirctSidebar('react/framework') 152 | }, 153 | ], 154 | } 155 | ], 156 | "/vue":[ 157 | { 158 | text: '玩转Vue3', 159 | // link: "/react/", 160 | collapsible: true, 161 | collapsed: true, 162 | items: [ 163 | { 164 | text: 'Vue3+TS企业级实战+组件库', link: '/vue/' 165 | }, 166 | { 167 | text:'实战入门', items:getDirctSidebar('vue/intro') 168 | }, 169 | { 170 | text:'企业级实战', items:getDirctSidebar('vue/arch') 171 | }, 172 | { 173 | text:'组件库入门', items:getDirctSidebar('vue/component') 174 | }, 175 | { 176 | text:'Vue生态', items: getDirctSidebar('vue/framework') 177 | }, 178 | ], 179 | }, 180 | ], 181 | '/': [ 182 | 183 | { 184 | text:'文章', 185 | collapsible: true, 186 | collapsed: false, 187 | items:[ 188 | {text:'',items:getDirctSidebar('blog')}, 189 | {text:'读书测评',items:getDirctSidebar('books')}, 190 | {text:'生活规划',items:getDirctSidebar('life')} 191 | ] 192 | }, 193 | // { 194 | // text:'面试题', 195 | // collapsible: true, 196 | // collapsed: true, 197 | // items:[ 198 | // {text:'面试题',link:'/interview/'}, 199 | // ] 200 | // }, 201 | 202 | // projectSidebar, 203 | // { 204 | // text:"源码漫游记", 205 | // collapsible: true, 206 | // collapsed: true, 207 | // items:getDirctSidebar('source') 208 | // }, 209 | // { 210 | // text:"前端啃算法", 211 | // collapsible: true, 212 | // collapsed: true, 213 | // items:getDirctSidebar('algorithm') 214 | // } 215 | ], 216 | }, 217 | footer: { 218 | message: '追求持续轻松的职业生涯', 219 | // copyright: ' Copyright © 京ICP备18000331号-1' 220 | } 221 | }, 222 | 223 | })) -------------------------------------------------------------------------------- /docs/me.md: -------------------------------------------------------------------------------- 1 | The essence of most Internet projects is to create, read, update, and delete data, we call it CRUD for short, the front-end framework is the crud of the browser elements, and the back-end framework is the crud of the data 2 | 3 | Using the front-end framework as an example, first, we need to understand how the framework interacts with the browser because the list application requires input elements, buttons, and lists to display 4 | 5 | We need to get the user's input, and the list of data to add or delete, but also synchronize to the browser, this step will give birth to MVC, MVMM, and other development concepts 6 | 7 | There is also a website https://todomvc.com/ 8 | you can see all the front-end frameworks to achieve the code for the Todo-list application 9 | 10 | 11 | 12 | 13 | { 14 | "cmd": "SEND_GIFT", 15 | "data": { 16 | "action": "投喂", 17 | "batch_combo_id": "batch:gift:combo_id:26995758:1196492516:31039:1671098209.8109", 18 | "batch_combo_send": { 19 | "action": "投喂", 20 | "batch_combo_id": "batch:gift:combo_id:26995758:1196492516:31039:1671098209.8109", 21 | "batch_combo_num": 1, 22 | "blind_gift": null, 23 | "gift_id": 31039, 24 | "gift_name": "牛哇牛哇", 25 | "gift_num": 1, 26 | "send_master": null, 27 | "uid": 26995758, 28 | "uname": "花果山-大圣" 29 | }, 30 | "beatId": "0", 31 | "biz_source": "Live", 32 | "blind_gift": null, 33 | "broadcast_id": 0, 34 | "coin_type": "gold", 35 | "combo_resources_id": 1, 36 | "combo_send": { 37 | "action": "投喂", 38 | "combo_id": "gift:combo_id:26995758:1196492516:31039:1671098209.8076", 39 | "combo_num": 1, 40 | "gift_id": 31039, 41 | "gift_name": "牛哇牛哇", 42 | "gift_num": 1, 43 | "send_master": null, 44 | "uid": 26995758, 45 | "uname": "花果山-大圣" 46 | }, 47 | "combo_stay_time": 3, 48 | "combo_total_coin": 100, 49 | "crit_prob": 0, 50 | "demarcation": 1, 51 | "discount_price": 100, 52 | "dmscore": 8, 53 | "draw": 0, 54 | "effect": 0, 55 | "effect_block": 0, 56 | "face": "https://i0.hdslb.com/bfs/face/d945b3c10c48053d1d23769dc6a7b4140971835c.jpg", 57 | "face_effect_id": 0, 58 | "face_effect_type": 0, 59 | "float_sc_resource_id": 0, 60 | "giftId": 31039, 61 | "giftName": "牛哇牛哇", 62 | "giftType": 0, 63 | "gold": 0, 64 | "guard_level": 0, 65 | "is_first": true, 66 | "is_naming": false, 67 | "is_special_batch": 0, 68 | "magnification": 1, 69 | "medal_info": { 70 | "anchor_roomid": 0, 71 | "anchor_uname": "", 72 | "guard_level": 0, 73 | "icon_id": 0, 74 | "is_lighted": 0, 75 | "medal_color": 0, 76 | "medal_color_border": 0, 77 | "medal_color_end": 0, 78 | "medal_color_start": 0, 79 | "medal_level": 0, 80 | "medal_name": "", 81 | "special": "", 82 | "target_id": 0 83 | }, 84 | "name_color": "", 85 | "num": 1, 86 | "original_gift_name": "", 87 | "price": 100, 88 | "rcost": 1091862, 89 | "remain": 0, 90 | "rnd": "1671098209111800001", 91 | "send_master": null, 92 | "silver": 0, 93 | "super": 0, 94 | "super_batch_gift_num": 1, 95 | "super_gift_num": 1, 96 | "svga_block": 0, 97 | "switch": true, 98 | "tag_image": "", 99 | "tid": "1671098209111800001", 100 | "timestamp": 1671098209, 101 | "top_list": null, 102 | "total_coin": 100, 103 | "uid": 26995758, 104 | "uname": "花果山-大圣" 105 | } 106 | } 107 | 感谢礼物: 26995758 花果山-大圣 投喂 1 个 | 牛哇牛哇(1) 108 | { 109 | "cmd": "SEND_GIFT", 110 | "data": { 111 | "action": "投喂", 112 | "batch_combo_id": "batch:gift:combo_id:26995758:1196492516:31039:1671098209.8109", 113 | "batch_combo_send": null, 114 | "beatId": "0", 115 | "biz_source": "Live", 116 | "blind_gift": null, 117 | "broadcast_id": 0, 118 | "coin_type": "gold", 119 | "combo_resources_id": 1, 120 | "combo_send": null, 121 | "combo_stay_time": 3, 122 | "combo_total_coin": 200, 123 | "crit_prob": 0, 124 | "demarcation": 1, 125 | "discount_price": 100, 126 | "dmscore": 8, 127 | "draw": 0, 128 | "effect": 0, 129 | "effect_block": 0, 130 | "face": "https://i0.hdslb.com/bfs/face/d945b3c10c48053d1d23769dc6a7b4140971835c.jpg", 131 | "face_effect_id": 0, 132 | "face_effect_type": 0, 133 | "float_sc_resource_id": 0, 134 | "giftId": 31039, 135 | "giftName": "牛哇牛哇", 136 | "giftType": 0, 137 | "gold": 0, 138 | "guard_level": 0, 139 | "is_first": false, 140 | "is_naming": false, 141 | "is_special_batch": 0, 142 | "magnification": 1, 143 | "medal_info": { 144 | "anchor_roomid": 0, 145 | "anchor_uname": "", 146 | "guard_level": 0, 147 | "icon_id": 0, 148 | "is_lighted": 0, 149 | "medal_color": 0, 150 | "medal_color_border": 0, 151 | "medal_color_end": 0, 152 | "medal_color_start": 0, 153 | "medal_level": 0, 154 | "medal_name": "", 155 | "special": "", 156 | "target_id": 0 157 | }, 158 | "name_color": "", 159 | "num": 1, 160 | "original_gift_name": "", 161 | "price": 100, 162 | "rcost": 1091863, 163 | "remain": 0, 164 | "rnd": "1671098211111800001", 165 | "send_master": null, 166 | "silver": 0, 167 | "super": 0, 168 | "super_batch_gift_num": 2, 169 | "super_gift_num": 2, 170 | "svga_block": 0, 171 | "switch": true, 172 | "tag_image": "", 173 | "tid": "1671098211111800001", 174 | "timestamp": 1671098211, 175 | "top_list": null, 176 | "total_coin": 100, 177 | "uid": 26995758, 178 | "uname": "花果山-大圣" 179 | } 180 | } 181 | 感谢礼物: 26995758 花果山-大圣 投喂 1 个 | 牛哇牛哇(2) 182 | { 183 | "cmd": "SEND_GIFT", 184 | "data": { 185 | "action": "投喂", 186 | "batch_combo_id": "batch:gift:combo_id:26995758:1196492516:31039:1671098209.8109", 187 | "batch_combo_send": null, 188 | "beatId": "0", 189 | "biz_source": "Live", 190 | "blind_gift": null, 191 | "broadcast_id": 0, 192 | "coin_type": "gold", 193 | "combo_resources_id": 1, 194 | "combo_send": null, 195 | "combo_stay_time": 3, 196 | "combo_total_coin": 300, 197 | "crit_prob": 0, 198 | "demarcation": 1, 199 | "discount_price": 100, 200 | "dmscore": 8, 201 | "draw": 0, 202 | "effect": 0, 203 | "effect_block": 0, 204 | "face": "https://i0.hdslb.com/bfs/face/d945b3c10c48053d1d23769dc6a7b4140971835c.jpg", 205 | "face_effect_id": 0, 206 | "face_effect_type": 0, 207 | "float_sc_resource_id": 0, 208 | "giftId": 31039, 209 | "giftName": "牛哇牛哇", 210 | "giftType": 0, 211 | "gold": 0, 212 | "guard_level": 0, 213 | "is_first": false, 214 | "is_naming": false, 215 | "is_special_batch": 0, 216 | "magnification": 1, 217 | "medal_info": { 218 | "anchor_roomid": 0, 219 | "anchor_uname": "", 220 | "guard_level": 0, 221 | "icon_id": 0, 222 | "is_lighted": 0, 223 | "medal_color": 0, 224 | "medal_color_border": 0, 225 | "medal_color_end": 0, 226 | "medal_color_start": 0, 227 | "medal_level": 0, 228 | "medal_name": "", 229 | "special": "", 230 | "target_id": 0 231 | }, 232 | "name_color": "", 233 | "num": 1, 234 | "original_gift_name": "", 235 | "price": 100, 236 | "rcost": 1091864, 237 | "remain": 0, 238 | "rnd": "1671098214111800001", 239 | "send_master": null, 240 | "silver": 0, 241 | "super": 0, 242 | "super_batch_gift_num": 3, 243 | "super_gift_num": 3, 244 | "svga_block": 0, 245 | "switch": true, 246 | "tag_image": "", 247 | "tid": "1671098214111800001", 248 | "timestamp": 1671098214, 249 | "top_list": null, 250 | "total_coin": 100, 251 | "uid": 26995758, 252 | "uname": "花果山-大圣" 253 | } 254 | } 255 | 感谢礼物: 26995758 花果山-大圣 投喂 1 个 | 牛哇牛哇(3) 256 | { 257 | "cmd": "SEND_GIFT", 258 | "data": { 259 | "action": "投喂", 260 | "batch_combo_id": "batch:gift:combo_id:26995758:1196492516:31039:1671098209.8109", 261 | "batch_combo_send": null, 262 | "beatId": "0", 263 | "biz_source": "Live", 264 | "blind_gift": null, 265 | "broadcast_id": 0, 266 | "coin_type": "gold", 267 | "combo_resources_id": 1, 268 | "combo_send": null, 269 | "combo_stay_time": 3, 270 | "combo_total_coin": 400, 271 | "crit_prob": 0, 272 | "demarcation": 1, 273 | "discount_price": 100, 274 | "dmscore": 8, 275 | "draw": 0, 276 | "effect": 0, 277 | "effect_block": 0, 278 | "face": "https://i0.hdslb.com/bfs/face/d945b3c10c48053d1d23769dc6a7b4140971835c.jpg", 279 | "face_effect_id": 0, 280 | "face_effect_type": 0, 281 | "float_sc_resource_id": 0, 282 | "giftId": 31039, 283 | "giftName": "牛哇牛哇", 284 | "giftType": 0, 285 | "gold": 0, 286 | "guard_level": 0, 287 | "is_first": false, 288 | "is_naming": false, 289 | "is_special_batch": 0, 290 | "magnification": 1, 291 | "medal_info": { 292 | "anchor_roomid": 0, 293 | "anchor_uname": "", 294 | "guard_level": 0, 295 | "icon_id": 0, 296 | "is_lighted": 0, 297 | "medal_color": 0, 298 | "medal_color_border": 0, 299 | "medal_color_end": 0, 300 | "medal_color_start": 0, 301 | "medal_level": 0, 302 | "medal_name": "", 303 | "special": "", 304 | "target_id": 0 305 | }, 306 | "name_color": "", 307 | "num": 1, 308 | "original_gift_name": "", 309 | "price": 100, 310 | "rcost": 1091865, 311 | "remain": 0, 312 | "rnd": "1671098215111800001", 313 | "send_master": null, 314 | "silver": 0, 315 | "super": 0, 316 | "super_batch_gift_num": 4, 317 | "super_gift_num": 4, 318 | "svga_block": 0, 319 | "switch": true, 320 | "tag_image": "", 321 | "tid": "1671098215111800001", 322 | "timestamp": 1671098215, 323 | "top_list": null, 324 | "total_coin": 100, 325 | "uid": 26995758, 326 | "uname": "花果山-大圣" 327 | } 328 | } 329 | 感谢礼物: 26995758 花果山-大圣 投喂 1 个 | 牛哇牛哇(4) 330 | { 331 | "cmd": "SEND_GIFT", 332 | "data": { 333 | "action": "投喂", 334 | "batch_combo_id": "batch:gift:combo_id:26995758:1196492516:31039:1671098209.8109", 335 | "batch_combo_send": null, 336 | "beatId": "0", 337 | "biz_source": "Live", 338 | "blind_gift": null, 339 | "broadcast_id": 0, 340 | "coin_type": "gold", 341 | "combo_resources_id": 1, 342 | "combo_send": null, 343 | "combo_stay_time": 3, 344 | "combo_total_coin": 500, 345 | "crit_prob": 0, 346 | "demarcation": 1, 347 | "discount_price": 100, 348 | "dmscore": 8, 349 | "draw": 0, 350 | "effect": 0, 351 | "effect_block": 0, 352 | "face": "https://i0.hdslb.com/bfs/face/d945b3c10c48053d1d23769dc6a7b4140971835c.jpg", 353 | "face_effect_id": 0, 354 | "face_effect_type": 0, 355 | "float_sc_resource_id": 0, 356 | "giftId": 31039, 357 | "giftName": "牛哇牛哇", 358 | "giftType": 0, 359 | "gold": 0, 360 | "guard_level": 0, 361 | "is_first": false, 362 | "is_naming": false, 363 | "is_special_batch": 0, 364 | "magnification": 1, 365 | "medal_info": { 366 | "anchor_roomid": 0, 367 | "anchor_uname": "", 368 | "guard_level": 0, 369 | "icon_id": 0, 370 | "is_lighted": 0, 371 | "medal_color": 0, 372 | "medal_color_border": 0, 373 | "medal_color_end": 0, 374 | "medal_color_start": 0, 375 | "medal_level": 0, 376 | "medal_name": "", 377 | "special": "", 378 | "target_id": 0 379 | }, 380 | "name_color": "", 381 | "num": 1, 382 | "original_gift_name": "", 383 | "price": 100, 384 | "rcost": 1091865, 385 | "remain": 0, 386 | "rnd": "1671098216111800001", 387 | "send_master": null, 388 | "silver": 0, 389 | "super": 0, 390 | "super_batch_gift_num": 5, 391 | "super_gift_num": 5, 392 | "svga_block": 0, 393 | "switch": true, 394 | "tag_image": "", 395 | "tid": "1671098216111800001", 396 | "timestamp": 1671098216, 397 | "top_list": null, 398 | "total_coin": 100, 399 | "uid": 26995758, 400 | "uname": "花果山-大圣" 401 | } 402 | } 403 | 感谢礼物: 26995758 花果山-大圣 投喂 1 个 | 牛哇牛哇(5) 404 | 弹幕 2022-12-15 17:56:59 33579594 Innnnooovation 五天了！ 405 | { 406 | "cmd": "COM 407 | 408 | 409 | 410 | 代码有bug 411 | 412 | 前段时间，做项目需要在地图上展示聚合点，搜索了一些资料，最终使用高德地图实现。 413 | 414 | ### 一、高德地图聚合点简介 415 | 416 | 聚合点是指将多个位置点进行聚合，以一个点的形式显示出来，并显示聚合的点的数量，减少点的数量，提升地图的美观度。 417 | 418 | ![](https://upload-images.jianshu.io/upload_images/2747884-7c9f0d8b7e0dc093.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 419 | 420 | ### 二、高德地图聚合点实现 421 | 422 | 高德地图支持使用JS API实现，实现的步骤如下： 423 | 424 | 1. 引入高德地图JS API文件 425 | 426 | ```html 427 | 428 | ``` 429 | 430 | 2. 初始化地图 431 | 432 | ```js 433 | // 初始化地图对象，加载地图 434 | map = new AMap.Map("container", { 435 | resizeEnable: true, 436 | center: [116.397428, 39.90923], //地图中心点 437 | zoom: 10 438 | }); 439 | ``` 440 | 441 | 3. 添加聚 442 | { 443 | code: 0, 444 | message: '0', 445 | ttl: 1, 446 | data: { 447 | relation: { mid: 0, attribute: 0, mtime: 0, tag: null, special: 0 }, 448 | be_relation: { 449 | mid: 26995758, 450 | attribute: 2, 451 | mtime: 1650116396, 452 | tag: null, 453 | special: 0 454 | } 455 | } 456 | } -------------------------------------------------------------------------------- /docs/blog/itwords.md: -------------------------------------------------------------------------------- 1 | --- 2 | # aside: false 3 | --- 4 | # 程序员相关单词和短语 5 | 6 | 做一个好好学英语的程序员，左下角【编辑页面】欢迎PR 7 | ``` 8 | Word组件包裹 就可以发音了,单词发音来自有道词典 9 | privacy 10 | ``` 11 | 12 | --- 13 | 14 | 15 | Vue is a JavaScript framework that helps developers build user interfaces efficiently using a declarative and component-based programming model. It extends standard HTML, CSS, and JavaScript, and provides features such as declarative rendering and reactivity to track JavaScript state changes and update the DOM efficiently. 16 | 17 | Vue is designed to be flexible and incrementally adoptable, and can be used in different ways depending on the use case, such as enhancing static HTML or building single-page applications. Vue also supports Single-File Components for authoring Vue components, which we can write the component's logic, template, and styles in a single file. Vue components can be authored in two different API styles, Options API and Composition API, both of which are capable of covering common use cases. The Options API is more beginner-friendly, while the Composition API enables more powerful patterns for organizing and reusing logic. 18 | 19 | education 20 | 21 | learn React is an arduous but rewarding process 22 | 23 | Teaching can be a very resarding career,it allows teachers to have an input in the development of young lives 24 | work 25 | people 26 | traffic 27 | food 28 | media 29 | science 30 | friendship 31 | likes and dislike 32 | effort,plan 33 | clothing, 34 | reading,writing 35 | money 36 | music 37 | travel 38 | sports 39 | skill 40 | crime,law,justice 41 | nature 42 | health,fitness 43 | culture 44 | building 45 | parties,festivals 46 | goverment 47 | environment 48 | animals 49 | home appliances 50 | development 51 | family 52 | solutions 53 | 54 | 55 | 56 | --- 57 | 口语练习 58 | ``` 59 | work/study where do you live 60 | birthdays weather morning snacks technology writing 61 | geography housrwork/job 62 | travelling(public) puzzles 63 | names singing social media 64 | where do you live 65 | small business, jewelry 66 | space and the stars 67 | chocolate ,weekends ,T-shirts 68 | keys,being happy,library,art 69 | sports 70 | ``` 71 | ## 学习群 72 | 73 | 先做自我介绍w 74 | 75 | ``` 76 | Hey, I am Sheng Xinjing, a self-employed programmer whose main job is to build programming courses and contribute to the open-source project 77 | 78 | With 10 years of javascript development experience and 5 years of management, I am very happy to join this group to improve my English skills and I am planning to find a remote job abroad in the future. 79 | 80 | Outside of programming, I enjoy traveling, reading, and computer games, If you happen to be in the same city I live ( currently in Beijing ), maybe we can hang out and code together. 81 | ``` 82 | 83 | 84 | 85 | | 纪录片| 字幕(中英对照)| 86 | | ---------------- | :---: | 87 | | [React纪录片](https://www.bilibili.com/video/BV188411T7ty/) | [字幕](/subtitle/react.html)| 88 | 89 | | 单词 （拼错 or 不好发音） | 翻译 | 90 | | ---------------- | :---: | 91 | | privacy | 隐私 | 92 | | fiber | | 93 | | access | 访问权限 | 94 | | exclamation point | `!`感叹号 | 95 | | hyphen | `-`连字号 | 96 | | semicolon | `;`分号| 97 | | double quotes | `"` 双引号 | 98 | | single quotes | `'` 单引号 | 99 | | colon | `:`冒号 | 100 | | semicolon | `;`分号 | 101 | | pound | `#`井号 | 102 | | parenthesis | `()`圆括号 | 103 | | square bracket | `[]`方括号 | 104 | | curly brace | `{}`花括号 | 105 | | asterisk | `*`星号 | 106 | | caret | `^` | 107 | | slash | `/` 斜线 | 108 | | back slash | `\` 反斜线 | 109 | | tilde | `~` 波浪线 | 110 | | ampersand | `&` and符 | 111 | | pipe | `\|` 竖杠 | 112 | | underscore | `_` 下划线 | 113 | | backtick | `反引号 | 114 | | decimal | `.` 小数点 | 115 | | addition operator | `+` 加号 | 116 | | multiplication operator | `*` 乘号 | 117 | | subtraction | 减法 | 118 | | division | 除法 | 119 | | 前端工程师 | | 120 | | frontend | 前端 | 121 | | closure | 闭包 | 122 | | box model | 盒模型 | 123 | | pseudo class | 伪类 | 124 | | preprocessors | 预处理器 | 125 | | hoisting | 变量提升 | 126 | | self-invoking | 函数自执行 | 127 | | higher-order | 高阶(函数，组件) | 128 | | user interfaces | 用户界面(UI) | 129 | | declarative | 声明式| 130 | | reactivity | 响应式| 131 | | single-file components | 单文件组件(Vue)| 132 | | composition | 组合Api| 133 | | integration | 集成| 134 | | scaffolding | 脚手架| 135 | | monolithic | 大型的| 136 | | recursive | 递归| 137 | | concurrency | 并发| 138 | | Virtual dom | 虚拟Dom| 139 | | immutable | 不可变的| 140 | | polyfill | 垫片（语法垫片）| 141 | | scheduler |调度| 142 | | 后端工程师 | | 143 | | backend | 后端| 144 | | asynchronous | 异步| 145 | | synchronous | 同步| 146 | | agile | 敏捷的| 147 | | agnostic | 不可知的| 148 | | arbitrary | 任意的| 149 | | crucial | 至关重要| 150 | | elastic | 弹性的| 151 | | hierarchical | 分层的| 152 | | implicit | 隐式| 153 | | intrusive | 侵入式| 154 | | permanent | 永久的| 155 | | retrospective | 回顾| 156 | | sophisticated | 复杂的| 157 | | sustainable | 可持续| 158 | | decouple | 解耦| 159 | | leverage | 杠杆，利用| 160 | | implement | 实现| 161 | | architecture | 架构| 162 | | bandwidth | 带宽，资源| 163 | | bottleneck | 瓶颈| 164 | | infrastructure | 基础设施| 165 | | 简历吹自己的词 | | 166 | | Approachable | 平易近人 | 167 | | Creative | 有创造力 | 168 | | Responsible | 有责任心 | 169 | | Hardworking | 努力工作 | 170 | 171 | 172 | ## 短语 173 | 174 | | 中文 | 翻译 | 175 | | ------------- | :----------- | 176 | | 这不是bug是功能 | It's not a bug, it's a feature. | 177 | | 裁员 | Send talents to the society | 178 | | 你需要系统的思考，你做的这个事的价值是什么 | You need to be able to think systematically. What is the value of what you do? | 179 | |能干的干，不干就走|Do it if you can,get out if you don't| 180 | |XX是年轻人的福报| XX is a blessing for young people| 181 | | 在字节，你需要学会如何去学习，而不是学习什么| In ByteDance, you need to learn how to learn, not what to learn| 182 | |其实，我对你是有一些失望的。当初给你定级P6，是高于你面试时的水平的。|To be honest, I am somewhat disappointed in you. When I assigned you the P6 rating, it was based on a level higher than your performance during the interview.| 183 | |我是希望进来后，你能够拼一把，快速成长起来的。|I was hoping that after coming in, you would be able to put in the effort and grow quickly.| 184 | |P7这个层级，不是把事情做好就可以的。你需要有体系化思考的能力。|The P7 level is not just about getting things done. You need to have the ability to think systematically.| 185 | |你做的事情，他的价值点在哪里?|Where is the value in what you are doing?| 186 | |你是否作出了壁垒形成了核心竞争力?|Have you created barriers and formed a core competency?| 187 | |你做的事情，和公司内其他团队的差异化在哪里?你的事情，是否沉淀了一套可复用的物理资料和方法论?|Where is the differentiation in what you are doing compared to other teams within the company? Have you developed a set of reusable physical materials and methodology for your work?| 188 | |为什么是你来做，其他人不能做吗?|Why are you the one doing this, can't anyone else do it?| 189 | |你需要有自己的判断力，而不是我说什么你就做什么。|You need to have your own judgment and not just do whatever I say.| 190 | |我不需要中规中矩的答卷，它是有一些差异化在里面的。|I don't need a conventional answer, there is some differentiation in it.| 191 | |把你的思考沉淀到日报周报月报里，我希望看到你的思考，而不仅仅是进度。|I want to see your thoughts reflected in your daily, weekly, and monthly reports, not just progress.| 192 | |提醒一下，你的产出，和同层级比，是有些单薄的|Just a reminder, your output compared to those at the same level is somewhat thin.| 193 | |马上要到年底了，加把劲儿|It's almost the end of the year, put in some extra effort.| 194 | |你看咱们团队的XX去年晋升之前，可以一整年都在项目室打地铺的。|You see, our team's XX worked in the project room for an entire year before being promoted last year.| 195 | |成长，一定是伴随着痛苦的 |Growth is always accompanied by pain.| 196 | | 你最痛苦的时候，恰恰就是你成长最快的时候，加油| ~~When you are the most painful, you are actually growing the fastest. come on~~the moments that you grow fastest are those when you suffer the most,so keep moving | 197 | |我不想狭隘地认为自己只是一个前端开发人员| I don’t want to narrow my mind and consider myself as a front-end developer only| 198 | 199 | ## tips 200 | 201 | ::: info 避免中式英语， 重点or主语在前面 202 | 203 | 我喜欢 [那个角色] 带着一把大剑的 204 | 205 | 我 [更高] 比他 206 | ::: 207 | 208 | 209 | ## 好用的工具 210 | 1. https://www.deepl.com/ 211 | 2. https://app.grammarly.com/ 212 | 213 | 214 | 215 | framework 216 | 217 | avenue urban outskirts suburb suburban deposit rental 218 | cheque serial 219 | 220 | facility garage laundry furniture toaster stereo fridge 221 | 222 | landlord tenant occupation accountant geography biology physical mathematics politics economics physics chemistry statistics 223 | 224 | primary elementary secondary intermediate 225 | 226 | vegetarian vegan fruitarian flat accommodation 227 | 228 | torn leak flicker cockroach mosquito net(蚊帐) firefly 229 | 230 | balcony bedsit(起居兼卧室两用租间) trailer(拖车) caravan(拖车) 231 | 232 | transporation ferry cab 233 | 234 | church reptile cathedral cottages canoe fare reservation castle 235 | 236 | facility orientation stadium laboratory refectory cafeteria canteen dormitory residence 237 | 238 | lecturer associate professor dean principal counselor advisor 239 | 240 | finacial grant loan insurance domestic nersery academic 241 | 242 | occupation annual squash pitch judo stretch 243 | 244 | venue chilled buffet snake crisps biscuit lentil tart desserts sundae lobster 245 | 246 | overdue periodical encyclopedia bibliography mulitmedia photocopier interlibrary locker 247 | 248 | clinic practice infirmary chemist pharmacy 249 | 250 | internist surgeon surgery diploma 251 | 252 | lecturer demonstrator materials booklet handout facilities tape 253 | 254 | presentation measurement approach reference questionnaire criteria bibliography vocabulary paragraphs inaccurate essay survey assignment 255 | 256 | sevenfold incorrectness documentary italic evaluation seminar theory relevant approach conference laboratory assignment postal surgey 257 | 258 | lectures literature anthropology psychology sociology resit vocational 259 | 260 | 261 | 分割线 262 | 263 | barrier insurance supervision segment quiz theatrical velvet violin texture rural 264 | 265 | auditorium fertilizer concrete confidential leather morale democratic tin loyalty rational 266 | 267 | cafeteria contamination scent catalogue grain domestic pottery mayor geology mineral bound recruit religion sailing strain helicopter fossil harvest violation intact treasure periodical 268 | 269 | lentil thriller tolerance carnivorous vaccination isect slop spoon parallel temple insulation evolution resistant carpet charity fountain herb reinforce cittage vary refectory unaware marine massage skyscraper recreation tunnel military venue tailor cruise 270 | 271 | fluctuation discipline craftsman shelter catering strait stem thesis poverty vacant pest flute regrettable encyclopedia stretch kiosk surgery spine germ mite distortion atlas perferenct steel polish steer ladder intensive parliament glue welfare migration relaxation 272 | 273 | 274 | orientation laboratory nutrition aspiration oxygen literature shady dome mechanism bedsit buffet 275 | 276 | obligation instinct mature outfit cosmetics psychology theoretical curve volocanic trademark pigeon 277 | 278 | surplus compulsory conservation heritage activate itinerary 279 | 280 | corruption litre pump hibernate antifreeze mould melt impaction sediment tribe lobby butcher sedentary pedestrian hurricane plum vest powder troop 281 | 282 | mounument depression methodolgy linguistics simulation originality chill breed emu 283 | 284 | fence stadium seasoned immune cabin estimate evaporation sponge appealing erosion 285 | 286 | drought workforce rehearsal mobility orgainic therapy toll comprehension gradient enthusiasm institution elbow radiogram association corridor slang surveillance astrontaut 287 | 288 | rack fur consecutive peg syrup orchestra leak coordinate linen gum corporate hormone stike sculpture league coconut tire secretary trader jewelry facility stock scarce irrigation wasp oven 289 | 290 | kidney mansion debit estate predator endorse sheer debatable antibiotic 291 | 292 | hospitality stir pine prey motel migrant swan fort crab fraud wool circular negative harbor stomach tattoo radiator nusery typo arctic fever martial mattress fortune glory colonist dizzy fragrant sphere projector persuade utilize archievement telescope capablity culticate 293 | 294 | promotion carpenter nephew farewell bullet alter helmet spot suburb metallic petrol Greek 295 | 296 | snack incineration decade tobacco inferior soccer discrimination dormitory run-down clarity statue expertise ceremony dolphin bitter melon excursion consistent suspicious gamble sanctuary 297 | 298 | pasta mime wound sesame pluse worm eggplant 299 | 300 | brow ambitious sake badminton palm puppet campsite parasite capital sandstone loan revision generous lid truck canal scarf servant compliment dye supervise abbreviate crisis antique 301 | 302 | botanical proximity accredit magnify 303 | 304 | technicaion analogy socibiology forge fluster canyon insufficient juvenile justify 305 | 306 | infant bend ambulance intake rubber disguise 307 | 308 | landscape evaporate bitterness scissor brick monopoly resin span drowsy 309 | 310 | mat junction basement dam ballon crystal castle chase hypothesis steady 311 | 312 | misinterpret carnivorous projection emotion campanion oppourtunity otter debt 313 | 314 | weed liver announcement era miniature album bacteria slim dawn foyer athlete 315 | 316 | stereo necklace pursue hoof tension revolution counsel yam fleet digestive 317 | 318 | timber invasion realism display patent frustration berry esteem contaminate sewage 319 | 320 | flicker tame emission prosperity picnic kit tragedy continent sack chin silk pepper toungue 321 | 322 | wax nylon strap spice vet stove moral hostel bone sector ally verdict proof proportion 323 | 324 | tactic dean seminar bribe compensate behalf induction epic ferry satellite wrist viola 325 | 326 | crack trek journalism quilt coal regulation permit refurbish talent shortage indication 327 | 328 | morality vehicle curtain delicate hamburger residence bully mediator superiority 329 | 330 | valley absence bamboo associate booklet letter labor adequate myth 331 | 332 | elevator bracelet allergy diploma obey incentive scheme pond tram 333 | 334 | escalator souvenir cruise contemporary clay premiere 335 | 336 | verbal sustainable fiction leisure librarian stall observation 337 | 338 | ostrich colleague tutor mass naval lecturer marsh stamp expedition protein rigorous triple 339 | 340 | delivery fin flour mental definite instructor resort proficiency candel cabinet garage liable frontier 341 | 342 | lottery phenomenon expansion strategy curved bypass textile flu emperor court 343 | 344 | cable invoice perspective envelope transcript trumpet drum 345 | 346 | pot donkey scar figure appliance exterior plough mammal acid foam casino 347 | 348 | herbivorous anxiety grocery 349 | 350 | rust 351 | 352 | captcha 353 | 354 | obsession drama obsession 355 | 356 | 357 | 358 | United Kindom London Scotland（苏格兰） Wales威尔士 Ireland 爱尔兰 Australia Sydney Melbourne墨尔本 New Zealand新西兰 Canada加拿大 Toronto 359 | 360 | United States of America 361 | 362 | 363 | --------------------------------------------------------------------------------