- 博客(38)
- 收藏
- 关注
RSS订阅原创 使用Powertools for Amazon Lambda简化Amazon AppSync Events集成
AWS推出Powertools工具包，新增AppSyncEventsResolver功能，帮助开发者轻松构建实时应用。该功能通过WebSocket API支持即时更新，提供声明式事件处理方式，支持TypeScript、Python和.NET语言。主要特性包括基于模式的路由系统（可处理特定频道或通配符路径）、订阅事件处理（内置访问控制检查）以及自动解析事件类型。示例代码展示了如何实现频道消息处理和订阅权限验证，使开发者能专注于业务逻辑，无需担心底层连接管理。这一解决方案特别适用于聊天应用、实时仪表板等需要低延
2025-10-29 09:53:06
786
原创 Vue 3 的 Effect 函数的嵌套与循环处理
在之前的 Vue2与Vue3响应式原理与依赖收集详解 一文中，我们讲述了 Vue 2 与 Vue 3 在实现数据响应式处理的设计思路与他们的不同之处，也分析了 Vu
2025-08-15 09:41:54
722
原创 Vue2与Vue3响应式原理与依赖收集详解
继 Angular 和 React 之后，尤大在 2016 年发布了如今“前端三剑客”之一的 Vue 2.0，并凭借其简单易用、轻量高效的特点受到了广泛的欢迎，特别
2025-08-15 09:40:25
1026
原创 Bpmn.js 进阶指南之原理分析与模块改造
在对 bpmn.js 进行深入了解之后，心中对如何使用以及如何根据业务需求进行改造有了比较清晰的理解。为了解决之前写中文文档留下的坑，这里特地从源码层面对 bpmn.js 进行解析。
2025-08-15 09:36:48
1152
原创 滚动驱动动画的animation-ranges动画范围备忘录
本文介绍了CSS中animation-range属性的详细用法，帮助开发者精确控制滚动驱动动画的触发范围。作者Saron Yitbarek通过直观的示例和图表，讲解了cover、contain、entry、exit等不同时间轴范围名称的特性，以及如何组合使用这些值来定制动画的起始和结束点。特别针对高度超过视口的元素，详细比较了entry-crossing和exit-crossing的差异。最后还介绍了使用长度百分比值进一步微调动画时间轴的方法，为开发者提供了丰富的滚动动画实现方案。
2025-07-24 10:10:54
1040
原创 告别 addEventListener
Chromium团队最近放出了个大招——Observable API，这玩意儿简直是前端异步事件处理的颠覆者，以后写代码可能要换种姿势了！
2025-07-18 13:31:44
645
原创 [特殊字符][特殊字符]五个前端开发者都应该了解的TS技巧
无论你是想夯实基础的 TypeScript 新手，还是希望精进TypeScript用法的资深全栈工程师，这五个 TypeScript 技巧都能帮你提升代码质量、减少重复工作，并在整个代码库中实现更智能
2025-07-18 13:29:09
481
原创 Nuxt 4.0 深度解析：从架构革新到实战迁移 [特殊字符]
Nuxt 4.0的发布，标志着这个框架从"功能齐全"走向了"体验卓越"。它没有盲目追逐新特性，而是专注于打磨开发者体验的每一个细节——就像一位大师精心雕琢自己的作品。对于新手来说，Nuxt 4.0降低了入门门槛；对于老手来说，它提高了开发效率；对于企业来说，它意味着更稳定、更易维护的代码库。无论你是刚接触Nuxt的新手，还是已经使用多年的老用户，这次更新都值得你一试。最后，借用 Reddit 上一位开发者的评论：“Nuxt 4.0让我重新爱上了 Vue 开发！” 希望它也能给你带来同样的惊喜。
2025-07-17 11:28:46
1687
原创 [特殊字符]GPT-5 即将来临！！！
GPT-5将于2025年7月发布，或将引发AI革命性突破。据OpenAI内部消息，该模型将具备超强推理、多模态交互和自主行动能力，参数规模或达5-50万亿，性能远超GPT-4。测试显示其在语言理解、编程及复杂任务上接近甚至超越人类水平。专家普遍低估了AI发展速度，原预测2027年实现的功能可能提前两年达成。三大技术突破（扩展定律、推理时间优化、知识蒸馏）正加速AI进化。GPT-5不仅是一个工具，更将成为人类的数字同事，彻底改变工作方式。这场变革已不可阻挡，适应窗口期极为有限。
2025-07-15 14:30:36
819
原创 前端开发者应该掌握的 MCP 开发指南
《前端开发者掌握MCP协议的实用指南》 MCP（Model Context Protocol）是OpenAI推出的革命性协议，使AI助手能够安全访问外部工具和数据源。对前端开发者而言，掌握MCP意味着能构建更智能的AI应用，实现数据库直接查询、实时数据获取、代码自动生成等功能。 MCP的核心价值在于提供安全访问、工具集成和扩展能力。其架构包括客户端（AI助手）、服务器、工具和数据资源四个组件，采用JSON-RPC通信协议。开发者可通过官方SDK快速搭建MCP服务器，开发文件读写、API调用等工具模块。 实战
2025-07-11 16:14:57
592
原创 每个前端开发者都应该掌握的 nginx 技巧
现代前端开发中，nginx已成为必备技能。它不仅是高效的静态资源服务器，还能解决API代理、跨域、性能优化等关键问题。通过nginx，前端开发者可以： 部署静态资源并优化缓存策略 实现API反向代理，解决跨域问题 启用gzip压缩和HTTP/2提升性能 配置安全防护措施 掌握nginx能让前端应用部署更高效、运行更稳定，显著提升用户体验。从前端路由处理到安全防护，nginx已成为全栈开发能力的重要一环。
2025-07-10 15:13:52
1010
原创 每个前端开发者都应该掌握的 Git 技巧
《前端开发者必备的Git技能指南》摘要： Git已成为现代前端开发的核心工具，远超基础的版本控制功能。本文系统介绍了Git在前端开发中的关键应用场景和实用技巧：从日常版本管理、团队协作到自动化部署；从基础操作（提交规范、分支策略）到高级技巧（暂存恢复、冲突解决）。重点讲解了如何利用Git提高开发效率，包括代码审查流程、版本发布管理和CI/CD集成。通过掌握这些技能，前端开发者可以避免常见协作问题，实现更流畅的开发体验。文章提供了大量可视化流程图和命令行示例，帮助开发者快速掌握Git核心功能。
2025-07-10 15:13:06
861
原创 CSS 函数与混入草案：原生 CSS 的“魔法”即将登场！
《CSS原生函数与混入：告别预处理器的未来之路》 CSS即将迎来重大变革！W3C最新草案"CSS Functions and Mixins Level 1"将彻底改变前端开发方式。这份提案为原生CSS引入了函数和混入功能，让开发者无需依赖Sass/Less等预处理器就能实现模块化样式开发。 CSS函数通过@function定义，支持参数传递和动态计算，使样式能根据环境变量自动调整。混入(@mixin/@apply)则允许复用整个样式块，大大提升代码复用率。草案还创新性地提出了树形作用域机
2025-07-07 14:39:20
872
原创 每个前端开发者都应该掌握的几个 ReactJS 概念
本文深入解析ReactJS的核心概念，从JSX编译到虚拟DOM机制。关键内容包括：1）Babel将JSX转换为React.createElement()调用，生成React元素对象；2）React元素的结构解析（type/props/key等属性）；3）通过多个示例演示JSX到React.createElement的转换过程；4）介绍组件嵌套时的编译逻辑。文章还预告后续将讨论重渲染机制、虚拟DOM原理和性能优化等高级话题，为开发者提供全面的React底层运作原理。
2025-07-07 14:36:54
1145
原创 14 个逻辑驱动的 UI 设计技巧，助您改善任何界面
设计用户界面可不是什么轻松活儿。布局、间距、排版、颜色……无数的选择能瞬间让你头大。要是再把可用性、无障碍性和人类心理学这些因素加进来，那挑战简直是指数级增长，让人想当场去世。不过，好消息来了！UI 设计其实没必要搞得那么复杂。作为一个在产品设计领域摸爬滚打了 20 多年的老司机，我发现我的大部分视觉和交互设计决策，都不是靠什么艺术天赋或者玄学般的直觉，而是遵循着一套清晰、符合逻辑的准则。没错，就是靠谱的准则！
2025-07-04 12:30:14
1274
原创 什么可以帮助你在前端面试中取得成功（以及什么可能会对你造成阻碍）
最近我一直在人才市场里摸爬滚打。有些面试顺风顺水，有些嘛……就一言难尽了。在经历了足够多的这类事情后（外加只要有机会就求爷爷告奶奶地要反馈），我开始注意到一些套路。所以，我写这篇文章，送给所有正在前端求职路上挣扎的兄弟姐妹们。希望我踩过的这些坑能帮你省点时间、更聪明地准备，或者至少让你知道，你不是一个人在战斗。
2025-07-03 15:01:12
711
原创 让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
用编程思维去理解类型现在，我们再回过头来看这些“恐怖”的类型：条件类型：就是类型的 if/else。infer：就是在 if 语句里声明一个局部变量。映射类型：就是类型的 for...in 循环。
2025-07-03 14:23:51
1313
原创 卧槽！逆向输出？我竟从国外顶流博主那追到了国产之光——文心开源大模型初体验
作为一名常年潜水在 X (前 Twitter) 的前端老司机，每天刷刷技术大佬的动态，跟跟全球技术风向，已经成了我的肌肉记忆。然而，就在前几天，我被一条消息结结实实地“反向输出”了——我竟然是从 Hugging Face 的 CEO Clément Delangue 和 AI 圈知名博主 Rohan Paul 的推文中，才得知咱们国产的百度文心大模型（ERNIE Bot）开源了！
2025-07-02 19:14:20
1195
原创 Next.js 的阴暗面：为什么说这个流行的框架可能并不适合你
Next.js 是一个很牛逼的框架，但牛逼不代表一切。有些场景下我用着很爽，但另一些场景下，我真的用得想哭。说到底，它也只是个工具，茫茫工具海中的一个罢了。在为你的下一个项目默认选择 Next.js 之前，问问自己你真正需要什么。你想要 SSR 的额外复杂性吗？你能接受与 Vercel 紧密绑定吗？或者，一个更简单的方案能让你更快地到达终点——还没那么多糟心事儿？
2025-07-02 14:11:43
1320
原创 Oxlint：新一代JavaScript代码检查工具深度解析
摘要：Babel插件是前端开发中的强大工具，能够将现代JavaScript代码转换为兼容旧浏览器的版本。它通过解析代码生成AST（抽象语法树），使用Visitor模式遍历和修改节点，最终生成优化后的代码。Babel插件可以处理语法转换、API填充、代码优化等任务，支持提前使用实验性语法和框架特定转换（如JSX）。开发Babel插件需要理解AST结构，可通过AST Explorer工具直观学习。核心流程包括解析、转换和生成三个阶段，插件通过配置Visitor对象实现代码转换，为开发者提供了灵活的代码处理能力。
2025-06-30 15:44:58
698
原创 深入浅出Babel插件开发：从AST到代码转换的完整指南
摘要：Babel插件是前端开发中的强大工具，能够将现代JavaScript代码转换为兼容旧浏览器的版本。它通过解析代码生成AST（抽象语法树），使用Visitor模式遍历和修改节点，最终生成优化后的代码。Babel插件可以处理语法转换、API填充、代码优化等任务，支持提前使用实验性语法和框架特定转换（如JSX）。开发Babel插件需要理解AST结构，可通过AST Explorer工具直观学习。核心流程包括解析、转换和生成三个阶段，插件通过配置Visitor对象实现代码转换，为开发者提供了灵活的代码处理能力。
2025-06-30 15:43:31
953
原创 深入理解Webpack的灵魂：Tapable插件架构解析
《Tapable：Webpack的插件架构核心》介绍了Webpack背后的插件系统Tapable。作为轻量级插件框架，Tapable通过9种不同类型的钩子（Sync/Async、Basic/Bail/Waterfall/Loop）提供强大的扩展能力，支持同步/异步执行、熔断机制和瀑布流处理。相比普通事件系统，Tapable具有更强的控制能力、性能优化和类型安全优势，采用观察者、策略等设计模式实现解耦和可扩展性。文章通过代码示例展示了SyncBailHook、SyncWaterfallHook和AsyncSe
2025-06-30 15:42:31
1467
原创 BpmnJs源码篇2：diagram.js 简介与EventBus全局事件总线
成都开发者与小学生合作开发Flowable流程引擎组件，包含前端设计器与后端流程引擎。项目提供Flowable、Activiti编辑器，以及流程预览、DMN决策设计器等功能。文章深入解析了diagram.js这一底层图形库，它是bpmn.js的核心依赖，提供Web端图形绘制与编辑能力。diagram.js采用模块化设计，包含命令栈、核心画布处理、元素绘制、交互增强等模块，通过依赖注入实现服务发现。文章从源码结构入手，重点分析了入口文件Diagram.js的实现机制，展示了如何通过事件总线控制图形初始化与销毁
2025-06-30 13:31:59
1077
原创 BpmnJS源码篇1：Injector 依赖注入模式的实现
本文介绍了bpmn.js中依赖注入模式的核心实现库didi/Injector。主要内容包括： Injector是bpmn.js团队基于node-di开发的依赖注入库，通过依赖调度系统实现模块间解耦和通信。 依赖注入(DI)是实现控制反转(IoC)的手段，将对象创建与使用分离，
2025-02-07 11:20:29
840
原创 开篇：重新认识 bpmn.js 与 BPMN 规范
BPMN（全称 Business Process Model and Notation，业务流程模型和标记法），是一个全球性的标准业务建模及执行标准，也可以看做是一门基于流程图的、开放标准的符号语言。该标准由对象管理组（Object Management Group - OMG）进行维护，与其他商业组织无关。
2025-02-06 13:34:07
1227
原创 bpmn-js 扩展元素模型
这里用一个例子来进行说明。在 bpmn-js 中，临时子流程具有一个属性，默认为 true，所以 xml 中会有如下情况：使用 bpmn-js 解析该流程得到的两个子流程对应 js 对象如下：此时可以看到虽然在 js 中我们可以获取到的实际值，但当其为 true 时无法显示到 xml 中。那么这个属性在 Json Schema 中的定义是怎么样的呢？"types": [省略了部分内容。其中可以看到isAttr为true，所以这个属性直接显示在标签上，默认值default为true。
2024-06-26 13:31:27
2836
原创 关于工作流开发前端选型的一点个人见解（bpmn.js与LogicFlow）
首先需要明确的一点是，本文的出发点纯粹是针对工作流开发的场景的选型对比，其他业务场景下建议重新调研。工作流，即 Workflow，是对工作流程及其各操作步骤之间业务规则的抽象、概括描述。工作流建模，即将工作流程中的工作如何前后组织在一起的逻辑和规则，在计算机中以恰当的模型表达并对其实施计算。工作流要解决的主要问题是：为实现某个业务目标，利用计算机在多个参与者之间按某种预定规则自动传递文档、信息或者任务。以上是维基百科对工作流技术的定义。之所以称为技术。
2023-12-20 17:09:02
4562
1
原创 Bpmn.js 进阶指南之原理分析与模块改造
在第四节中，大概讲解了自定义元素属性的方式。参照Bpmn-js自定义描述文件说明-掘金和，这里再重新说明一下。一个描述文件的格式为json，或者是一个可以导出json对象的js/tsname: 该部分扩展的名称，一般根据流程引擎来命名，字符串格式uri: 统一资源标识符，一般是一个地址字符串prefix: 属性或者元素统一前缀，小写字符串格式xml: 格式转换时的配置，一般用来配置, 表示会将标签名转换为小写驼峰，可省略types: 核心部分，用来声明元素和属性，以及扩展原有属性等，对象数组格式。
2023-12-20 14:02:11
4238
1
原创 bpmn-js 交流群附属资料(文档及开源库)
实现了垂直泳道、多种自定义、activiti、flowable、camunda 三种流程引擎的属性配置；好东西，就是没开源。。。
2023-12-14 12:37:35
1834
2
原创 史上最详细的 Vue 3 渲染过程与 diff 图解
大家好，我是 Miyue，人称“小米”（不是那个小米）~从上一篇从 CreateApp 开始学习 Vue 源码中，基本了解了与两个方法的来源和大致执行过程，这里依然以上文的流程图来进行回顾：所以在创建好应用 app 后执行mount函数，通过将我们的入口组件App.vue转换成VNode树，最后使用patch()函数将VNode树转换为真实 Dom 渲染到页面上。而 Vue 3 的 diff 算法，与 Vue 2 一样，依然在patch过程中。那么首先，先来看一下 VNode 的生成吧~
2023-04-10 11:07:47
1157
1
原创 Vue2 diff 算法图解
看 Vue 2 的源代码已经很久了，从用 flow 到如今使用 TypeScript，我每次都会打开它的源代码看一看，但是每次都只看到了数据初始化部分，也就是的阶段，对于如何生成 VNode（Visual Dom Node， 也可以直接称为 vdom） 以及组件更新时如何比较 VNode（diff）始终没有仔细研究，只知道采用了双端 diff 算法，至于这个双端是怎么开始怎么结束的也一直没有去看过，所以这次趁写文章的机会仔细研究一下。在我的理解中，diff 指代的是，即新旧内容之间的区别计算；
2023-04-07 09:37:08
1020
原创 Bpmn.js 进阶指南（万字长文）
由于 bpmn.js 内部各个模块相互独立，很难编写出全面且流畅的使用教程，之前写的文章也常常是写到一半便没了头绪，所以看起来和没看没什么区别。现在在了解了 bpmn.js 与 diagram.js 的源码，并对相关模块和插件进行了 dts (typescript declare) 的编写之后，心里大致明白如何在原来的基础上进行扩展与重置，所以希望这篇文章能写的尽量全面和清晰，减少大家入坑时消耗的时间和精力。上节中，讲述了 bpmn.js 的简介和相关底层依赖，以及在 Vue 2.x 项目中的基础使用。本篇
2022-07-07 15:07:35
3131
原创 avaScript高程笔记——客户端存储
现在越来越多的网站是动态网站，常常需要将后端数据传输给前端保存或者更新到页面中，尤其是用户偏好设置，保存在客户端不仅可以减少请求耗时，也能降低服务端的压力。客户端（这里一般指浏览器）目前主要包括三类存储方式：cookie， Web Storage 和 IndexedDB。其中 Web Storage 又包含 Local Storage 和 Session Storage。（现在主流浏览器还支持 Web SQL，这里暂时不做介绍…主要是不大了解）1. cookiecookie，全名叫 HTTP c.
2021-02-24 18:50:06
3244
原创 设计模式（二）—— 创建型模式
设计模式（二）—— 创建型模式文章首发于 掘金作者：MiyueFE著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。创建型模式，即处理对象创建过程的设计模式，根据实际情况来使用合适的模式创建对象。创建型模式主要是将系统所需要的用到的具体类封装起来，在内部实现这些具体类的创建和结合，并对外隐藏这个过程细节。外部无法直接访问这个对象的创建和组合过程。使用者只需要关心何时、何地、由谁、怎样创建这个对象。创建型模式主要包含以下几种：简单工厂模式 Simple Factory工
2021-02-21 11:41:47
1442
原创 设计模式（一）——七大原则
设计模式（一）——七大原则内容来自 《JavaScript设计模式》张容铭 著 （2015年）、《大话设计模式》程杰 著、“Java设计模式” C语言中文网文章首发于 掘金作者：MiyueFE著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。序：设计模式（Design Patterns），指软件/程序开发过程中被经常使用的一种代码逻辑设计经验的集合，目的是为了提高代码的安全性、可靠性、可读性、可维护性、可拓展性。使用设计模式来进行开发，就是为了降低代码的耦合度，增加代码
2021-02-21 11:39:38
352
原创 Bpmn.js自定义文件说明
Bpmn.js自定义文件说明由于工作需要（其实不是很需要），在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process Designer, 预览地址 MiyueFE blog, 欢迎 fork 和 star。前言在使用 bpmn-js 绘制流程图时，可能会存在需要开发者自己定义属性或者元素的情况，为了保证符合官方定义，对官方文档进行了汉化说明。以下说明基于个人理解，可能与真实作用有出入，希望大家指出不正确或者意义不明的地
2021-02-21 11:36:46
10056
8
原创 Bpmn.js 中文文档(二)
Bpmn.js 中文文档(二)前言：由于工作需要（其实不是很需要），在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process Designer, 预览地址 MiyueFE blog, 欢迎 fork 和 star。四. Modules7. Modeling 基本建模方法Diagram.js 提供的基础建模工厂 BaseModeling，注入了 EventBus, ElementFactory, CommandSta
2021-02-21 11:34:05
15877
2
原创 Bpmn.js 中文文档(一)
Bpmn.js 中文文档(一)由于工作需要（其实不是很需要），在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process Designer, 预览地址 MiyueFE blog, 欢迎 fork 和 star。一. 引入Bpmn.js并初始化建模器/* 基于vue2.x， 省略了template模板与部分data */import BpmnModeler from "bpmn-js/lib/Modeler"exp
2021-02-21 11:31:01
70646
21
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人