- 博客(185)
- 收藏
- 关注
RSS订阅原创 Zustand 状态管理：从入门到实践
Zustand 状态管理指南这篇文章涵盖了 Zustand 的核心概念和常见用法，从基础的 Store 创建、组件交互，到性能优化（Selectors, Shallow Comparison）、异步处理、代码组织（Slices）、功能扩展（Middleware）以及特定场景（计算属性）的解决方案。
2025-03-27 20:32:36
786
原创 使用 openai-agent-python 和 dify-workflows-mcp 进行前端代码优化
最新发布了MCP（Model Control Protocol）能力，本文将结合进行代码演示，展示如何利用这些工具优化前端代码。创建llm.pyimport os。
2025-03-27 19:35:25
282
原创 AI Agent开发框架分析：前端视角
对于高级应用，可以考虑 LangChainJS + LlamaIndex-js 的组合，前者处理交互逻辑，后者负责数据检索。也是不错的选择，尤其适合希望通过可视化界面快速构建AI功能的前端开发者。对于前端开发者，我推荐。如果需要简化开发流程，
2025-03-10 19:46:07
911
原创 Cline 如何快速构建一个 MCP Server 应用
开发一个 MCP Server 应用（dify-workflows-mcp ），用于实现在 vscode cline 的 MCP Client 中调用 dify 里面的指定工作流。
2025-03-05 21:04:10
1297
原创 Dify Workflows MCP Server （TypeScript）设计与实战
一个 Model Context Protocol (MCP) 服务器的 TypeScript 实现，将 Dify 工作流作为工具暴露出来，可直接集成到Cline或Roo Code中进行调用。
2025-02-27 13:36:07
2378
2
原创 AI代码标注专家Prompt指令的最佳实践
AI代码标注专家 Prompt 可作为项目级别提示词使用，专门负责为 AI 生成的代码添加特定的注释标记，然后基于 Node 脚本可以初步统计出 AI 代码占比。
2025-02-25 16:21:36
268
原创 实验 Figma MCP + Cursor 联合工作流
使用此 Model Context Protocol 服务器授予 Cursor 对 Figma 文件的访问权限。当 Cursor 可以访问 Figma 设计数据时，它比粘贴屏幕截图等其他方法更能准确地进行代码转化。具体配置方式可直接参考仓库中详细介绍。
2025-02-22 18:41:32
2802
原创 基于 DeepSeek + Gemeni 打造 AI+前端的多人聊天室
一个基于 React 和 Cloudflare Pages(免费一键部署) 的多人 AI 聊天应用，支持多个 AI 角色同时参与对话，提供类似群聊的交互体验。
2025-02-22 12:00:37
2521
原创 基于Deepseek大模型落地代码流程可视化功能
基于VSCode插件体系，开发 DeepSeek Code2Mermaid 功能，将代码的执行流程转为可在线预览的Mermaid流程图，提升代码的可读性。
2025-02-17 12:38:42
432
原创 代码可视化专家Prompt指令的最佳实践
代码可视化专家 Prompt 提示词可作为自定义提示词使用，可基于提供的代码文件、片段输出代码执行流程图。
2025-02-13 18:44:46
346
转载 GitHub Copilot Agent 模式的系统提示词泄漏
今天破解了一下 GitHub Copilot Agent 模式下的系统提示词，可以看出来，它内置了一系列工具：search_codebase：进行自然语言搜索，用于在用户当前工作区中查找与其问题相关的代码或文档注释。run_in_terminal： 在终端中运行一个 shell 命令。edit_file：修改文件file_search：按照 glob 模式在工作区中搜索文件。只返回匹配的文件路径，最多 20 个结果。read_file：读取文件的内容。list_dir：列出目录内容。
2025-02-10 10:05:23
89
原创 LangChain 表达式语言 (LCEL) 的链式使用方法
你可以把它想象成用乐高积木搭建流程，每个积木代表一个组件（比如 LLM、PromptTemplate、输出解析器等），通过 LCEL，你可以像拼积木一样把它们连接起来，形成一个完整的流程。通过理解 LCEL 的核心概念和常用 API，你可以灵活地组合各种组件，实现各种各样的功能。提取出来，并格式化成字符串，添加到输入中，然后传递给下一个 PromptTemplate。以流式方式调用 Runnable 对象，返回一个生成器，可以逐个获取结果。两个链会并行执行，最终返回一个字典，包含两个链的输出结果。
2025-02-07 14:47:31
963
原创 前端代码整洁度提升专家Prompt指令的最佳实践
前端代码整洁度提升专家Prompt 提示词可作为自定义提示词使用，可对提供的代码进行优化。本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-02-07 14:27:11
185
原创 前端开发架构师Prompt指令的最佳实践
前端开发架构师Prompt 提示词可作为系统提示词使用，可基于用户的需求输出对应的编码方案。本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-02-07 11:07:13
608
原创 前端组件标准化专家Prompt指令的最佳实践
前端组件标准化专家Prompt 提示词可作为项目自定义提示词使用，本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-02-05 17:16:17
482
原创 代码变更审查Prompt指令的最佳实践
代码变更审查 Prompt 提示词可作为项目自定义提示词使用，本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。
2025-01-16 11:40:57
395
原创 使用 React Testing Library 测试 Antd Form 组件
重点在于对 Form.useForm() 的处理，其返回值包含了Form组件数据管理的相关方法。
2023-09-23 09:46:15
642
翻译 18个强大的JavaScript技能
当你需要写一个递归函数时，你声明了一个函数名，但每次修改函数名时，你总是忘记修改内部函数名。当你在开发过程中需要打印dom元素时，使用console.log往往只能打印出整个dom元素，而你无法查看dom元素的内部属性。当你需要打印出当前页面，但你需要修改当前的布局时。当你需要打印当前页面时。
2023-05-30 14:16:29
297
转载 维护好一个复杂项目
维护好一个复杂项目很难，这次分享了两个实践中有用的方案，第一个抱有主人翁心态设计代码，要在设计之初就做好考量，不要寄希望于对没有好好设计的系统做缝缝补补。第二是深入理解为什么现代社会的运作巧妙之处，尽可能把代码架构组织一定程度映射到社会的运作机制上，目前来看，社会最适合代码借鉴的思路就是解耦，再利用庞大的分工协作网络完成单人无法完成的工作。
2023-04-13 14:25:56
123
原创 IDE进阶配置
setting.jsonnode_modules 中展示文件范围配置Vim配置主题颜色修改{ "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }, "terminal.integrated.fontSize": 15, "workbench.startupEditor": "newUntitledFile", "files.associations": { "*.tpl": "ht
2022-05-23 15:08:36
427
原创 webpack打包结果运行流程分析
webpack自身的定位是一个模块打包器，他的的理念是万物皆模块。然而其自身只能处理 javascript 模块以及 json 模块，那么何以敢称万物皆可打包呢，这就引出了 loader 机制，loader 可将各式各样的引用资源进行转化，然后输出为 webpack 可以识别的 javascript 模块并进行打包处理。基本配置const path = require('path');/** * 为配置文件提供类型支持 * @type {import('webpack').Configurati
2022-03-20 22:47:12
1101
原创 JavaScript复制图片和下载图片到本地
JavaScript复制图片和下载图片到本地基本代码结构<div className="html-canvas-wrap" ref={canvasWrap}> <div className="html-canvas"> <h3>标题</h3> <p>标题描述</p> <img src={TestImg} alt="" /> </div> <button onClick={handleC
2022-03-20 16:28:29
2056
转载 Jest 模拟 window.location 方法
Jest 模拟 window.location 方法当你要在 jest 中 mock window.location 时，你可能会这么做it('mocks and calls window.location.reload', () => { window.location.reload = jest.fn(); window.location.reload(); expect(window.location.reload).toHaveBeenCalled();});当你运行这个
2021-09-29 17:27:14
4216
原创 React App 配置单元测试环境
React App 配置单元测试环境为什么选择 React Testing Library 而不是 EnzymeCreate-React-App 创建的应用开箱即用Jest 一款 JavaScript 测试框架 创建 Jest 配置文件安装 jest 和 babel-jestnpm i -D jest @types/jest babel-jest 创建 Jest 配置文件 jest.config.js// 根据问答创建配置文件jest --init配置 Jest 测试环境其
2021-08-07 22:56:11
506
原创 封装Form表单组件极简版
确定要实现的功能import React, { useRef } from 'react'import Form from './Form'import FormItem from './FormItem'import Input from './Input'const FormContext = () => { const formRef = useRef(null) // 功能1：提交时获取所有表单数据 const submit = () => { form
2021-07-25 14:12:59
907
原创 Axios请求封装
Axios请求封装支持 get 、post 快捷调用支持重复请求取消支持通用错误处理支持类型推导import request, { AxiosError, AxiosRequestConfig, AxiosResponse, AxiosInstance, Method } from 'axios';import { message } from 'antd';import qs from 'qs';/** * 接口Response出参 */export interface IRe
2021-05-08 14:57:43
494
原创 IE11下polyfill严格模式报错问题总结
问题现象项目运行在IE11中产生报错，错误如下：该错误会阻塞页面加载，导致页面空白。问题分析根据报错的行和列信息找到引发错误的代码var TypedArrayConstructorsList = { Int8Array: 1, Uint8Array: 1, Uint8ClampedArray: 1, Int16Array: 2, Uint16Array: 2, Int32Array: 4, Uint32Array: 4, Float32Array: 4, Fl
2021-04-23 19:42:07
1293
原创 迁移Koa中间件模型至前端业务中
Koa 链式中间件原理常见中间件原理浅析其核心关键点在于中间件的之间的链式调用-实现方法则是在当前中间件中保存下一个中间件的引用洋葱圈模型的实现依赖于 async ... await，这也决定了中间件的固定写法async function commonMiddleware(ctx, next){ try{ // do something await next() // do something } .catch(err){ // handle
2021-03-22 17:46:10
219
原创 实现一个 EventEmitter
实现一个 EventEmitterNode.js的events 模块对外提供了一个 EventEmitter 对象，用于对 Node.js 中的事件进行统一管理。因为 Node.js 采用了事件驱动机制，而 EventEmitter 就是 Node.js 实现事件驱动的基础。在 EventEmitter 的基础上，Node.js 中几乎所有的模块都继承了这个类，以实现异步事件驱动架构。基本使用let events = require('events');let eventEmitter = new
2021-03-14 12:06:37
489
转载 JS 常见的 6 种继承方式
探究 JS 常见的 6 种继承方式第一种：原型链继承原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。function Parent1() { this.name = 'parent1' this.play = [1, 2, 3]}function Child1() { this.type = 'child1'}Child1.pro
2021-03-14 11:41:53
5653
1
转载 React架构的演变-从同步到异步
React架构的演变-从同步到异步为了加深对 React 更新机制的理解，本文转载于：作者：Shenfq链接：https://juejin.im/post/6875681311500025869React 16 之所以要进行一次大的重构，是因为之前的版本中有一些不可避免的缺陷，一些更新操作需要由同步改为异步。React 15 是如何进行一次 setState 更新的import React from 'react'class App extends React.Component {
2020-11-01 20:09:42
321
原创 Jest难点进阶
Jest难点进阶snapshot 快照测试快照的使用const generateConfig= () => ({ host: 'localhost', port: 3000})test('test config snapshot', () => { expect(generateConfig()).toMatchSnapshot()})test('test another config snapshot', () => { expect(generateA
2020-10-03 17:43:01
907
原创 Jest 前端自动化测试框架基础入门
Jest 前端自动化测试框架基础入门常用匹配器toBe() 引用比较toEqual() 值比较toBeTruthy 布尔值判断toBeGreaterThan 数字比较toBeLessThan 数字比较toMatch 字符串正则匹配toMatchObject 对象检测包含元素toContain 数组检测包含元素not 取反异步处理使用done完成函数test('异步处理 - done', (done) => { expect.assertions(1) fetc
2020-10-03 10:35:18
254
原创 Nodejs提取图片主图色（二）
Nodejs提取图片主图色（一）如何提高颜色提取的正确率主要是 images、jpeg-js、pngjs 共用，彼此之间并不冲突// node-pixels.js'use strict';var ndarray = require('ndarray');// var path = require('path');var PNG = require('pngjs').PNG; // 处理 png 文件var jpeg = require('jpeg-js'); // 处理 jpg/jpe.
2020-08-28 20:14:09
1970
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人