- 博客(74)
- 收藏
- 关注
RSS订阅
原创 webpack 源码阅读（二）：webpack 打包基本原理和过程详解
上一篇讲了webapck如何启动的，像是我们按下了电脑开机按钮，开机完了后，电脑就要开始做各种预先加载工作。等这些加载就绪后，才会开始做一系列的打包工作。本文将讲解webpack准备工作的大致流程：初始化 plugins读取loader这里需要提醒，如果你对tapable的机制还不熟悉，查看tapable如果你也不知道webpack启动执行机制，查看webpack启动上一篇我们探索到compiler执行run 操作。从compiler 开始，webpack正式开始了它的打包之路。compile
2020-10-30 19:09:39
911
原创 webpack 源码阅读（一）：webpack 启动
本文开始将深入探索webpack的工作细节。如果你也是第一次尝试了解细节，建议先看另外一篇文章tapable的用法，这个小小的库将贯穿整个webpack的始终。调度着各种模块构建有条不紊的进行。本篇我们探索当我们执行webapck 命令后发生了什么？新建一个文件夹npm i -D webpacknpm i -D webpack-cli新建一个webpack.config.js 文件先忽略大部分配置细节，只配置一个入口文件module.exports = { entry: './ind
2020-09-10 01:44:06
785
原创 webpack tapable 用法详解
尝试了解webpack的工作机制的时候，发现webpack大量使用了tapable这个核心库来组织代码，tapable 提供了很多中钩子注册，执行的机制。让webpack可以灵活的管理模块编译的各个阶段，灵活的在处理的不同阶段触发plugin的预先定义的钩子。仓库地址：githubgithub readme里有详细的使用文档本文通过自己使用的demo详细讲解tapable 包含了如下apiconst { SyncHook, SyncBailHook, SyncWaterfallHook,
2020-08-23 14:41:33
1675
2
原创 微任务宏任务以及EventLoop详解
先总结下那些我们常用的api是宏任务，哪些是微任务。宏任务scripts 正常同步脚本setTimeout 定时脚本setInterval 定时循环执行setImmediate node 常用 浏览器端兼容差requestAnimationFrame 按照屏幕刷新频率执行一次的时间执行I/O 数据读取，交互事件UI rendering 页面渲染微任务Promis...
2019-10-10 00:07:53
736
2
原创 vue 组件生命周期钩子详解
Vue是一个自带组件系统的前端框架。Vue的每一个实例其实就是一个组件，我们在组织我们的页面结构的时候其实就是在定一个一个组件，然后拼装在一起，完成一个复杂的页面逻辑。组件主要包含：数据，模版，以及链接数据和模版的状态响应系统。除了这些，我们还需要对组件的不同渲染阶段做一些监控，定义一些hook来响应不同的时刻。比如：组件的初始加载阶段，组件销毁阶段，组件dom插入页面的时刻等等。下面是vu...
2019-09-28 01:25:58
1950
1
原创 Vue 中 provide 和 reject 的使用详解和源码解析
Vue 提供了provide 和reject 属性为高阶组件提供了便利的数据传递。一：使用详解provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }完整的用法// 父级组件提供 'foo'var Provider = { data...
2019-09-03 23:36:27
12995
原创 Vue keep-alive 使用详解
Vue提供了keep-alive作为包裹组件来缓存内部的业务组件，使用该组件，能够缓存业务组件的状态，在一些场景里可以提高用户体验和性能，避免重复的请求。一：用法<keep-alive include="your-component" exclude="" max=""> <component is="your-component" v-if="show"><...
2019-08-30 16:30:28
1157
原创 端到端测试最佳实践：从入门到精通的完整指南
想象一下，你正在网上订外卖：打开APP→选择餐厅→挑选菜品→下单支付→等待配送→确认收货。这一整套流程涉及前端界面、后端服务、支付系统、配送系统等多个环节。端到端测试(E2E Testing)就是模拟真实用户场景，对整个业务流程进行完整验证的测试方法。与单元测试的区别单元测试：测试单个函数或模块（如"计算订单总价"函数）端到端测试：测试整个业务流程（从下单到收货的全过程）端到端测试就像给软件系统做"全身检查"，虽然执行成本较高，但对于保障核心业务流程至关重要。
2025-05-28 22:27:48
834
原创 Python继承
想象一下你正在玩一个养成游戏。你创建了一个基础角色，它有生命值、攻击力等基本属性。现在你想创建一个新角色，它既要有基础角色的所有特性，又要增加一些特殊技能。这时候，继承就派上用场了！在编程中，继承允许我们定义一个类（子类）来继承另一个类（父类）的属性和方法。就像孩子会继承父母的特征一样，子类会"遗传"父类的特性。# 父类（基类）# 子类（派生类）return "汪汪！my_dog = Dog("阿黄")print(f"
2025-05-15 22:15:26
717
原创 Python多线程
想象你在厨房做饭：一边煮着汤，一边切着菜，偶尔还要看看烤箱里的蛋糕。这种同时处理多个任务的能力，就是多线程的生动体现。在计算机中，线程是程序执行的最小单位。多线程允许一个程序同时运行多个任务，特别适合I/O密集型操作（如网络请求、文件读写等）。适用场景I/O密集型任务（网络请求、文件操作等）需要保持响应性的GUI应用注意事项避免过度使用线程（线程也有开销）注意线程安全问题（使用锁、队列等）考虑使用线程池而非频繁创建线程替代方案CPU密集型任务：考虑multiprocessing。
2025-05-15 22:13:03
1474
1
原创 Python模块化编程
想象你在搭乐高积木。如果所有零件都混在一起，找起来多费劲啊！模块化就是把代码像积木一样分门别类放好，需要哪块就拿哪块。模块化的三大好处代码复用：写好一个模块，可以在多个项目里反复使用便于维护：出了问题能快速定位到具体模块团队协作：不同人负责不同模块，互不干扰模块化不是Python的专利，但Python让它变得特别简单。记住：好的代码组织就像整理房间，虽然前期费点功夫，但后期效率提升不是一点半点。最后送大家一句话：“代码首先是写给人看的，其次才是给机器执行的。
2025-05-15 22:03:06
400
原创 手把手教你发布npm包：从菜鸟到高手的完整指南
发布npm包并不复杂，关键是要有好的想法和清晰的代码。从简单的功能开始编写清晰的文档添加测试用例遵循语义化版本控制持续维护和更新希望这篇指南能帮助你顺利发布第一个npm包！如果有任何问题，欢迎在评论区留言讨论。
2025-05-14 22:51:36
609
原创 TypeScript装饰器：从入门到精通
TypeScript装饰器是一个非常强大的元编程工具，它允许我们以声明式的方式为代码添加功能。装饰器的基本概念和使用方法类装饰器、方法装饰器、属性装饰器的区别如何创建装饰器工厂装饰器的执行顺序装饰器在实际项目中的应用场景装饰器在Angular、NestJS等框架中都有广泛应用，掌握好这个特性，能让你的代码更加优雅和可维护。
2025-05-14 22:45:47
459
原创 TypeScript泛型：从入门到精通的全方位指南
想象你有个万能收纳盒，可以装任何东西：书本、水杯、零食…泛型就像这个盒子上的标签，告诉TypeScript编译器：“我这里装的是什么东西”。// 普通函数就像固定大小的鞋盒// 泛型函数就像可调节的伸缩鞋盒T泛型就像TypeScript给我们的魔法工具箱，刚开始可能觉得复杂，但一旦掌握就能写出既灵活又安全的代码。建议从简单场景开始练习，逐步应用到实际项目中。你在使用泛型时遇到过哪些有趣的问题？欢迎在评论区分享你的经验！
2025-05-14 22:24:22
204
原创 Python uv包管理器使用指南：从入门到精通
uv是一个现代化的Python包管理工具，它集成了虚拟环境管理、依赖安装、包管理等多种功能于一身。相比传统的pip和virtualenv组合，uv提供了更快的安装速度、更简洁的命令和更智能的依赖解析。uv包管理器为Python开发者带来了全新的体验，它集成了虚拟环境管理、依赖安装等多项功能，大大简化了Python项目的依赖管理流程。通过本文的介绍，相信你已经掌握了uv的基本使用方法和高级功能。在实际项目中，我强烈推荐你尝试使用uv，体验它带来的高效和便捷。
2025-05-14 22:18:07
1118
原创 CSS Grid布局：从入门到实战
* 三列，比例1:2:1 *//* 三行 */gap: 10px;/* 行列间距 */fr单位是Grid特有的，表示剩余空间分配比例。CSS Grid布局彻底改变了我们对网页布局的认知。从简单的网格系统到复杂的响应式设计，Grid都能游刃有余。虽然学习曲线略陡峭，但一旦掌握，你会发现它比传统的浮动、定位布局高效得多。建议从简单的布局开始练习，逐步尝试更复杂的场景。记住，实践是最好的老师！
2025-05-14 22:15:18
611
原创 Tailwind CSS 实战教程：从入门到精通
Tailwind CSS是一个功能类优先的CSS框架，它提供了大量预定义的类名，允许开发者直接在HTML中通过组合这些类来构建设计。与传统的CSS框架不同，Tailwind不会给你预定义的组件（如按钮、卡片等），而是提供了一套工具类，让你可以自由组合出任何你想要的样式。虽然Tailwind提供了丰富的工具类，但有时你可能需要添加一些自定义样式。扩展配置：在中扩展主题使用@apply：在CSS文件中组合工具类直接添加CSS：在CSS文件中添加自定义样式。
2025-05-14 22:11:49
804
原创 SVG 知识详解：从入门到精通
SVG作为现代Web开发中不可或缺的技术，为我们提供了强大的图形处理能力。从简单的图标到复杂的数据可视化，SVG都能完美胜任。希望通过本文，你能对SVG有一个全面的了解，并在实际项目中灵活运用。记住，SVG的学习是一个渐进的过程，多动手实践，你会发现它的无限可能！
2025-05-14 22:09:14
793
原创 Vite 热更新原理讲解：从入门到精通
热更新（Hot Module Replacement，简称 HMR）是指在不刷新整个页面的情况下，替换、添加或删除模块的能力。想象一下，你在调试一个复杂的表单页面，每次修改样式都要重新填写表单数据，这是多么痛苦的事情！而有了 HMR，你修改代码后，页面会立即更新，但保留当前的状态，大大提升了开发效率。有时我们需要对特定模块实现自定义的热更新逻辑。Vite 提供了// 保存状态})Vite 的热更新机制是其开发体验的核心竞争力。
2025-05-13 01:07:02
891
原创 普通程序猿的AI转型指南：从零开始的智能之路
作为一名在传统开发领域摸爬滚打多年的老码农，去年当我第一次看到GitHub Copilot自动补全整段代码时，那种震撼感至今难忘。今天我就用最接地气的方式，分享普通开发者如何系统性地踏入AI领域。
2025-05-13 01:00:05
735
原创 AI提示词技巧：从入门到精通的实用指南
提示词(Prompt)就是我们输入给AI的指令或问题，它决定了AI会给出什么样的回应。可以把它想象成给AI的"导航地图"——地图越清晰，AI就越容易带你到达目的地。普通提问：“写一篇关于环保的文章”优化后的提示词：“请以绿色生活从我做起为题，写一篇800字左右的科普文章，面向普通大众，语言通俗易懂，包含3个日常环保小贴士”掌握提示词技巧就像获得了一把开启AI潜能的钥匙。从简单开始，逐步增加细节多尝试不同的表述方式善用角色扮演和示例引导不断优化调整你的提示词。
2025-05-13 00:55:47
954
原创 大模型 Transformer 架构浅析：从菜鸟到入门
Transformer架构就像神经网络世界的乐高积木，通过注意力机制这个万能接口，正在重构我们对AI的认知。从最初的机器翻译，到现在的多模态大模型，它的进化速度令人惊叹。理解Transformer，就是握住了打开当代AI大门的钥匙。
2025-05-13 00:53:24
789
原创 CSS3实现磨砂玻璃效果：从原理到实战应用
CSS3的磨砂玻璃效果为网页设计带来了全新的视觉体验。通过属性，我们可以轻松实现这种高级视觉效果，而无需依赖图形软件。在实际项目中，合理运用这种效果可以显著提升产品的视觉品质和用户体验。希望本文能帮助你掌握这项技术，如果有任何问题或创意想法，欢迎在评论区交流讨论！
2025-05-13 00:48:22
1127
原创 AI背景下，如何重构你的产品？
对用户：“你的24小时AI私教”对教练：“AI助教帮你处理80%常规问题”对健身房：“智能会员管理系统”同一个产品，三套价值主张，这就是AI带来的可能性。
2025-05-12 00:35:26
485
原创 AI时代，程序员如何做副业：从代码到收入的15种破局思路
在GPT-5可能明年就来的时代，程序员的价值正在从"写代码"转向"用技术解决问题"。副业不是分散精力，而是构建自己的技术产品矩阵。记住：你写的每一行代码，都可能是未来收入的种子。
2025-05-11 13:11:00
375
原创 CSS Layer 详解
简单来说，CSS Layer（层叠上下文层）是CSS Cascading and Inheritance Level 5规范中引入的新特性。它允许我们将样式规则分组到不同的逻辑层中，从而更精细地控制样式优先级。你可以把它想象成Photoshop中的图层——底层的样式会被上层的覆盖，但每个图层内部依然保持自己的层级关系。CSS Layer为我们提供了一种全新的样式组织方式，让CSS的层叠特性更加可控和可预测。虽然它不能解决所有CSS问题，但在管理大型项目样式、整合第三方代码方面表现出色。
2025-05-11 11:26:37
876
原创 Vue Router全局拦截
更安全（权限控制）更智能（动态路由）更可维护（统一处理）一定要调用next()处理好异步情况避免循环跳转现在，快去给你的路由加上守卫吧！
2025-05-11 11:18:36
503
原创 前端SSE技术详解：从入门到实战的完整指南
SSE技术就像一位专注的广播员，它不需要复杂的握手协议，不需要维护双向状态，只是专注做好一件事——把服务器的最新消息及时、高效地传递到客户端。在需要实时更新但交互简单的场景下，它往往是比WebSocket更轻量、更合适的选择。下次当你需要实现"服务器主动推送"功能时，不妨给SSE一个机会，或许它会用简洁的API和稳定的表现给你惊喜。
2025-05-11 00:01:22
1162
原创 AI Coding的发展之路：从概念到改变世界的旅程
AI Coding的发展就像一场精彩的马拉松。从最初的蹒跚学步，到现在的健步如飞，它正在重塑编程的本质。未来的程序员不会被取代，但不会用AI的程序员可能会。这不是威胁，而是机遇——让我们可以专注于更有创造性的工作，把重复劳动交给AI伙伴。在这个变革的时代，保持学习和开放的心态，你就能与AI一起，编写属于未来的代码。
2025-05-10 23:37:33
986
原创 2025年前端工程师的进化指南：从代码搬运工到数字体验架构师
十年后的今天，让我们聊聊2025年的前端世界——这里代码会思考，界面能共情，而你，将不再是简单的『切图仔』。2025年最抢手的前端工程师，可能是那个会为视障用户调整色彩对比度时，突然红了眼眶的『技术诗人』。记住：我们不是在写代码，是在雕刻人类与数字世界的接触面。小故事：记得实习生小王第一次用Wasm优化动画性能时，电脑风扇突然安静的瞬间，『原来这就是未来啊』他摸着发烫的咖啡杯说。真实案例：某电商用眼动追踪优化商品详情页，转化率提升17%——这比任何『大字报』式AB测试都优雅。
2025-05-10 23:09:11
310
原创 Vite Proxy配置详解：从入门到实战应用
proxy: {== -1) {Vite的Proxy配置简单强大，能有效解决开发中的跨域问题。通过灵活配置可以满足各种复杂场景需求。提示：生产环境应使用Nginx等服务器处理代理，Vite代理仅用于开发环境。
2025-05-10 23:02:49
965
原创 深入解析Vue3中ref与reactive的区别及源码实现
ref和reactive都是Vue3响应式系统的核心，理解它们的区别和实现原理，能帮助我们更好地使用Vue3开发应用。
2025-05-10 22:59:42
811
原创 DNS服务详解
DNS（Domain Name System）是一种网络应用层的服务。它是辅助网络应用层将人类可读的域名（csdn.net）转化为路由器转换友好的 IP地址（10.1.2.x）的一种服务。
2023-07-20 23:25:33
416
原创 说说我认为的AI和人类的未来
上面有一些是脑洞大开的一些想法，不一定准确，我来总结下我的观点：AI会在大部分领域全面替代人类，这应该没有什么悬念的事情，人类的学习能力是没有办法传承的，每一个新生小孩都要花费整个青春来学习基础的老套的知识，然后才能去发现新的知识。未来最好的结果，AI融入人类，成为人类的第二个大脑，帮助人类摆脱一代代重复学习知识而造成的文明时间的大量浪费，有了更多节约下来的时间人类很有可能提前产生新的技术大爆发，更快的摆脱银河系的束缚，避开周期性的地球文明毁灭，从而变成一种星际文明，散落在整个宇宙中。
2023-06-11 18:02:17
708
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人