liangerwen's☻blog https://blog-nine-navy-52.vercel.app 这瓜娃子懒得很，什么都没有留哈！ Mon, 20 Apr 2026 09:22:17 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed zh-CN All rights reserved 2026, liangerwen <![CDATA[React-Customer: 一个用于React项目定制化的解耦的库]]> https://blog-nine-navy-52.vercel.app/posts/React-Customer: 一个用于React项目定制化的解耦的库 React-Customer: 一个用于React项目定制化的解耦的库 Thu, 15 May 2025 00:00:00 GMT );创建平台组件使用 withCustom HOC 包装平台组件，使其可定制：import { withCustom } from "react-customer"; import { Button } from "antd"; export interface AppExposeApi { clickButton: () => void; } export interface AppCustomApi { setInputText: (text: string) => void; } const App = withCustom( "App", ({ customApi, exposeApi, wrap }) => { const clickButton = () => { customApi?.setInputText?.("点击了Button1"); }; exposeApi({ clickButton }); return wrap( <> ); } ); export default App;创建定制插件使用 withDefineCustom HOC 创建定制插件：import { forwardRef, useState, useImperativeHandle } from "react"; import { withDefineCustom } from "react-customer"; import { Button, ButtonProps, Input } from "antd"; const AppPlugin = withDefineCustom<{ clickButton: () => void; }>( "App", forwardRef(({ merge, platformApi }, ref) => { const [text, setText] = useState(""); const setInputText = (txt: string) => setText(txt); useImperativeHandle(ref, () => { return { setInputText }; }); return merge((element) => { element.replaceChildren("button-02", "我是Button2【定制按钮-A】"); element.replaceProps("button-02", { onClick: () => { setText("点击了定制按钮Button2【A】"); }, }); element.appendBefore( "button-01", ); element.appendAfter( "button-02", setText(e.target.value)} /> ); }); }) ); export default [AppPlugin];应用场景React-Customer 特别适用于以下场景：SaaS 平台定制化 对于需要为不同客户提供定制化功能的 SaaS 平台，React-Customer 提供了一种优雅的方式来实现定制，而不需要为每个客户维护单独的代码分支。大型企业应用 在大型企业应用中，不同部门或业务线可能需要对共享组件进行定制。React-Customer 允许基于同一套核心组件，为不同业务需求提供定制化解决方案。白标产品开发 对于需要以不同品牌或外观提供的白标产品，React-Customer 可以轻松实现 UI 的定制化，包括样式、布局和功能的调整。插件化架构 对于希望实现插件化架构的应用，React-Customer 提供了一种结构化的方式来定义和集成插件，使应用更具扩展性。优势与特点解耦平台与定制逻辑：平台开发者和定制开发者可以独立工作，减少协作成本。非侵入式定制：通过 data-id 属性标识元素，实现对组件的精确定制，而不需要修改原始组件代码。双向 API 通信：平台组件和定制插件之间可以双向通信，实现复杂的交互逻辑。类型安全：通过 TypeScript 接口定义平台 API 和定制 API，提供类型安全的开发体验。灵活的元素操作：提供丰富的元素操作工具，满足各种定制需求。总结React-Customer 是一个为 React 设计的定制化库，通过提供结构化的方式来解耦平台逻辑和定制逻辑，使得 SaaS 应用的定制化开发更加高效和可维护。 它的核心架构基于 React Context 和高阶组件，实现了平台组件和定制插件之间的无缝集成。 无论是需要为不同客户提供定制化功能的 SaaS 平台，还是需要实现插件化架构的大型企业应用，React-Customer 都提供了一种优雅而强大的解决方案。 附上 github 地址：https://github.com/liangerwen/react-customer]]> <![CDATA[基于 Next.js + ContentLayer + MDX 构建无后端博客系统]]> https://blog-nine-navy-52.vercel.app/posts/基于 Next.js + ContentLayer + MDX 构建无后端博客系统 基于 Next.js + ContentLayer + MDX 构建无后端博客系统 Sat, 22 Mar 2025 00:00:00 GMT ({ name: "Post", filePathPattern: `**/*.mdx`, fields: { title: { type: "string", required: true }, date: { type: "date", required: true }, }, computedFields: { slug: { type: "string", resolve: (post) => post._raw.flattenedPath, }, }, })); export default makeSource({ contentDirPath: "data/posts", documentTypes: [Post], });创建文章在 data/posts 目录下创建 Markdown 或 MDX 文件：--- title: "Hello, Next.js!" date: 2023-10-01 --- This is a blog post written in **MDX**.实现文章列表页在 src/app/page.tsx 中实现文章列表：import { allPosts } from "contentlayer/generated"; import Link from "next/link"; export default function Home() { return (

Blog Posts

    {allPosts.map((post) => (
  • {post.title}
    • ))}
); }创建 mdx 渲染组件在 src/components/mdx.tsx 中实现 mdx 渲染组件：import { useMDXComponent } from "next-contentlayer/hooks"; export interface MdxProps { code: string; } export default function Mdx({ code }: MdxProps) { const Component = useMDXComponent(code); return ; }实现文章详情页在 src/app/posts/[slug].tsx 中实现文章详情页：import Mdx from "@/src/components/mdx"; import { allPosts } from "contentlayer/generated"; interface IProps { params: { slug: string[] }; } export default function Post({ params }: IProps) { const slug = decodeURIComponent(params.slug.join("/")); const postIdx = allPosts.findIndex((p) => p.slug === slug); const post = allPosts[postIdx]; if (!post) return notFound(); return (

{post.title}

); }迁移到 MDX-Bundler + GitHub API安装 MDX-Bundlernpm install mdx-bundler根据 repo 和 name 获取 issuesconst REPO = "your repo"; const NAME = "your name"; export const fetchGithubIssueList = (type: "page" | "post", current: number) => fetch( `https://api.github.com/search/issues?q=repo:${REPO}+state:open+author:${NAME}+${encodeURIComponent( `[${type}]` )}+in:title&per_page=10&sort=updated&page=${current}` ).then((res) => res.json()); export const fetchGithubIssueDetail = (id: number) => fetch(`https://api.github.com/repos/${REPO}/issues/${id}`).then((res) => res.json() );使用 MDX-Bundler 编译文章import { bundleMDX } from "mdx-bundler"; export const parseMDX = (content: string) => bundleMDX({ source: content, esbuildOptions: (opts) => { opts.target = "es2020"; return opts; }, });改写文章列表页面import { fetchGithubIssueList } from "@/src/utils/github"; import Link from "next/link"; export default async function Home() { const allPosts = await fetchGithubIssueList("post", 1); return (

Blog Posts

    {allPosts.items.map((post) => (
  • {post.title}
    • ))}
); }改写文章详情页面import { parseMDX } from "@/src/utils/parse-mdx"; import { fetchGithubIssueDetail } from "@/src/utils/github"; interface IProps { params: { slug: string }; } export default async function Post({ params }: IProps) { const post = await fetchGithubIssueDetail(params.slug); if (post.status === "404") return notFound(); const { code } = await parseMDX(post.body); return (

{post.title}

); }总结通过 Next.js + ContentLayer + MDX，我们可以快速构建一个无后端博客系统。而迁移到 MDX-Bundler + GitHub API 后，我们可以利用 GitHub Issues 作为文章存储源，实现更灵活的内容管理。这种方案不仅简单高效，还能充分利用现有的工具和平台，适合个人开发者和小型团队。]]> <![CDATA[手写题盘点]]> https://blog-nine-navy-52.vercel.app/posts/手写题盘点 手写题盘点 Tue, 25 Feb 2025 00:00:00 GMT { if (Array.isArray(o)) return []; if (o !== null && typeof o === "object") return {}; return o; }; const cloneBfs = (a) => { const root = getEmpty(a), queue = [{ origin: a, copy: root }], map = new Map(); while (queue.length) { const { origin, copy } = queue.shift(); for (let i in origin) { const empty = getEmpty(origin[i]); if (empty === origin[i]) { copy[i] = origin[i]; } else { if (map.has(origin[i])) { copy[i] = map.get(origin[i]); continue; } copy[i] = empty; queue.push({ origin: origin[i], copy: copy[i] }); map.set(origin[i], empty); } } } return root; };限制 promise 并发数量const pLimit = (limit) => { let count = 0; const task = []; return async (fn) => { if (count >= limit) { await new Promise((r) => task.push(r)); } count++; try { const ret = await fn(); return ret; } finally { count--; if (task.length) { task.shift()(); } } }; };]]> <![CDATA[分享一些前端好用的库和网站]]> https://blog-nine-navy-52.vercel.app/posts/分享一些前端好用的库和网站 分享一些前端好用的库和网站 Wed, 15 Jan 2025 00:00:00 GMT