沐唐风宋雨

实现流程编排设计器的心路历程

Jason847 — Mon, 10 Jul 2023 19:25:58 +0800

接上回《「AntV」使用AntV X6实现流程编排设计器》一文说到，流程编排设计器的实现方案是将低代码引擎和AntV X6作为画布相结合。为什么会有这样的想法？

「AntV」使用AntV X6实现流程编排设计器

Jason847 — Wed, 05 Jul 2023 19:43:42 +0800

基于AntV X6低成本定制能力：AntV X6是基于HTML和SVG的图表编辑引擎，提供了丰富的API和自定义事件，可以通过编写JavaScript代码，快速实现自定义的图表样式、布局和交互方式，满足具体业务需求。高度可扩展性：AntV X6提供了众多内置扩展，包括DAG图、ER图、流程图等应用，可以帮助你根据自己的需要，自由扩展和定制功能和组件，实现更加灵活的业务需求。

【问题】TypeError: Cannot read properties of undefined (reading ‘getStackAddendum‘)

Jason847 — Wed, 05 Jul 2023 15:31:40 +0800

项目运行中，控制台提示类型错误，无法读取未定义的属性。

hooks 源码浅析 — Scene

Jason847 — Sat, 27 Aug 2022 17:30:24 +0800

阅读ahooks中usePagination、useAntdTable、useFusionTable、useInfiniteScroll、useDynamicList等相关源代码，学习记录

React Ref

Jason847 — Fri, 27 Aug 2021 18:05:02 +0800

React 支持一个特殊的、可以附加到任何组件上的 ref 属性。此属性可以是一个对象（React 16.3）、或者一个回调函数、或者一个字符串（遗留 API）。 interface RefObject { readonly current: T | null; } type RefCallback = { bivarianceHack(instance: T | null): void }["bivarianceHack"]; type LegacyRef

第一个VSCode 插件开发实战

Jason847 — Thu, 01 Apr 2021 18:01:05 +0800

每个扩展程序都有一个清单文件，package.json。它有Node.js相关的字段，例如scripts、dependencies。也有VS Code 特定的字段，例如publisher、activationEvents、 contributes。

Uncaught SyntaxError: Unexpected identifier

Jason847 — Sat, 06 Mar 2021 20:35:42 +0800

问题描述：全局变量globalConfig.viewModel读取不到。而在其他同事的电脑上是可以正常访问的。原因分析：查看了HTML中全局配置，后端写入了错误的json格式数据其实错误提示第一行已经表明了问题，当时并没有在意Uncau

关于Promise.resolve(v)和new Promise(resolve =＞ resolve(v))是否等价问题

Jason847 — Fri, 05 Mar 2021 15:06:04 +0800

借鉴在《ECMAScript 6 入门》一书中描述的内容，`Promise.resolve('foo')`等价于`new Promise(resolve => resolve('foo'))`。如果`resolve`的参数是一个`promise`对象呢，是否仍然等价？

【flex:1】、【flex:0】、【flex:auto】、【flex:none】

Jason847 — Thu, 25 Feb 2021 23:04:30 +0800

flex:1 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; flex:0 flex-grow: 0; flex-shrink: 1; flex-basis: 0%; flex:auto flex-grow: 1; flex-shrink: 1; flex-basis: auto; flex:none flex-grow: 0; flex-shrink: 0; flex-basis: auto; 详细参考flex属性-flex:1到底是什么 ...

模板字符串格式化

Jason847 — Wed, 24 Feb 2021 22:32:15 +0800

给定一个模板和一个对象，利用对象中的数据渲染模板，并返回最终结果。 let obj = { group: { name: "国际", jobs: ["前端", "后端", "产品"] }, company: '云浪' } let str = '你好，我们公司是{{company}}，我们属于{{group.name}}业务线，我们在招聘各种方向的人才，包括{{group.jobs[0]}}、{{group["jobs"][1]}}等。'; 个人解决

浅析webpack执行流程

Jason847 — Wed, 20 Jan 2021 15:30:39 +0800

bootstrap const runCLI = async (args) => { try { // Create a new instance of the CLI object const cli = new WebpackCLI(); await cli.run(args); // process.argv } catch (error) { logger.error(error); process

Redux之中间件解读

Jason847 — Wed, 20 Jan 2021 09:28:29 +0800

Store增强器（StoreEnhancer）在createStore函数中有一个enhancer参数，StoreEnhancer类型。本质其实是一个高阶函数，执行此函数，返回增强后的store。 /** * @param enhancer store增强器. 你可以选择指定它以增强store的第三方功能，如中间件，时间旅行，持久性等。 * Redux 附带的唯一存储增强器是“applyMiddleware()”. * * @returns A Redux store that lets you

《Web性能优化》读书笔记

Jason847 — Sun, 17 Jan 2021 12:03:55 +0800

浅析阿里云前端构建工具——Dawn

Jason847 — Sun, 17 Jan 2021 00:37:56 +0800

Dawn取「黎明、破晓」之意，原为「阿里云·业务运营团队」内部的前端构建和工程化工具，现已完全开源。它通过 `pipeline` 和 `middleware` 将开发过程抽象为相对固定的阶段和有限的操作，简化并统一了开发人员的日常构建与开发相关的工作。

新年伊始，揪一揪2020的尾巴

Jason847 — Fri, 01 Jan 2021 17:57:13 +0800

翻了翻这些年写过的博客，点点滴滴就像日记一样记录着自己的成长历程。上次写年终总结还是在2019年1月3日，写给2018… 2018，是从Android转做前端的一个开始。从接手一个小的前端功能模块，接触到了项目脚手架的概念，基于此了解到React、Fusion组件库。最先接触的dva当中的connect、mapStateToProps、mapDispatchToProps 等等相关技术点是一脸蒙圈，只会照葫芦瓢实现基本功能，不敢有任何大胆的其他写法。渐渐就会对接触到的任何技术点存留各种各样的问号，出于无

二维数组排列组合

Jason847 — Wed, 30 Dec 2020 19:36:20 +0800

题给定如下一个二维数组，进行排列组合，输出如下形式的一维数组。输入： [ ['a', 'b', 'c', ...], [1, 2, 3, ...], ['x', 'y', 'z', ...], ... ]; 输出 [‘a1x’, ‘a1y’, ‘a1z’, …] 小米一面遇到的一道面试题，当场蒙圈了，过于紧张，愣是没写出来。痛定思痛，埋头思考，想到了一种解法，欢迎交流。解如果二维数组只存在两个一维数组，会怎么做呢？使用嵌套的for function compose(a

分享一下自己的Github Profile

Jason847 — Fri, 06 Nov 2020 18:31:00 +0800

Emoji、Github Readme Stats、Big-O Cheat Sheet、Badge

解决Mac深色模式下文字颜色问题

Jason847 — Thu, 29 Oct 2020 10:01:37 +0800

prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。 body { color: #ddd; } @media (prefers-color-scheme: dark) { body { color: #fff; } } 参考MDN Web Docs

浅析快速排序和归并排序

Jason847 — Tue, 15 Sep 2020 11:13:45 +0800

快速排序伪代码框架 quickSort(array, low, high) { if(low >= high) return; let mid = partition(array, low, high); // 切分数组，并返回分界点mid quickSort(array, low, mid - 1); // 递归左区间 quickSort(array, mid + 1, high); // 递归右区间 } 快排和二叉树的前序遍历框架很类似 traverse(root){ root.

JSON.stringify的认知历程

Jason847 — Sat, 29 Aug 2020 10:22:34 +0800

初入前端，认识到JSON.stringify可以序列化对象为一个字符串，在开发中提供了许多便利。 JSON.stringify({ x: 5, y: 6 }); //"{"x":5,"y":6}" 然后遇到一个需求是序列化字符串，且带有缩进格式化的方式展示在编辑器中。才认识到，原来这个方法还可以传递3个参数。第3个参数用于指定缩进用的空白字符串，用于美化输出（pretty-print）。 JSON.stringify({ x: 5, y: 6, z: {a: 1} }, null, 2); /* "{