沐唐风宋雨

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

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

原创 浅析快速排序和归并排序

快速排序伪代码框架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.

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

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

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

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

原创 hooks 源码浅析 — Scene

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

原创 React Ref

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

原创 第一个VSCode 插件开发实战

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

原创 Uncaught SyntaxError: Unexpected identifier

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

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

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

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

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

原创 模板字符串格式化

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

原创 浅析webpack执行流程

bootstrapconst 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之中间件解读

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

原创 《Web性能优化》读书笔记

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

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

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

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

原创 二维数组排列组合

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

原创 分享一下自己的Github Profile

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

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

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

原创 JSON.stringify的认知历程

初入前端，认识到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);/*"{

原创 N叉树的深度优先遍历、广度优先遍历、层序遍历

接口级联数据到组件数据源的映射接口返回的级联值经常与组件需要的label，value需要做映射转换，递归必不可少const originList = [{ code: '2973', name: '陕西', enums: [{ code: '2974', name: '西安', enums: [ { code: '2975', name: '西安市' }, { code: '2976'

原创 实现二叉树前序、中序、后序遍历及广度优先遍历、层序遍历

构造一个树的数据结构tree，如下：const tree = { val: "F", left: { val: "B", left: { val: "A", left: null }, right: { val: "D", left: { val: "C" }, right: { val: "E" } } }, right: { .

原创 表单组件数据到接口参数的数据结构转换

实际开发过程中，表单数据的数据结构与接口参数需要的数据结构往往存在些许差异，此时就需要一对一进行转化，那么如何做才显得优雅呢？举个例子：{ "select": "jack", "startDate": "2020-07-31T16:00:00.000Z", "endDate": "2020-07-31T16:00:00.000Z", "select": [ "a", "b" ],}{ "select": "jack", "startDate": "2020-07-31 16:

原创 利用css的伪元素before、after实现蒸锅

阅读《CSS3艺术》练习<figure class="steamer"> <div class='lid'></div> <div class='pot'></div></figure>/*设置全局样式*/body { display: flex; align-item: center; justify-content: center; background-color: pink; height

原创 Less基本用法

变量@nice-blue: #5b83ad;@light-blue: @nice-blue + #111;#header { background-color: @nice-blue; color: @light-blue;}结果为：#header { background-color: #5b83ad; color: #6c94be;}Mixins使用类选择器，ID选择器混入.a, #b { color: red;}.mixin-class { .a(

原创 无限滚动组件

借助IntersectionObserver实现LoadMore组件，无限下拉加载数据。边界控制没有处理LoadMore.tsx：import React, { useEffect, useRef } from "react";import "./index.css";/**.load-more { height: 100px; background: #eee; text-align: center; line-height: 100px;}**/function Lo

原创 浏览器唤起钉钉PC端解决办法

需求要实现浏览器页面的分享功能，需点击分享打开钉钉PC端的功能。查看官方文档，只提供了打开对应某个人的协议方式：<a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id={id}"></a>，同时需要制定钉钉号。如果只是单纯唤起客户端，则可以考虑如下协议，尝试有效：dingtalk://dingtalkclient/page/link或者dingtalk://dingtalkclient/action

原创 npm全局安装的包到了哪里

npm全局安装的包在哪个目录，可以通过如下命令查看npm root -g在macOS或Linux上，此位置可能是/usr/local/lib/node_modules。 在Windows上，可能是 C:\Users\YOU\AppData\Roaming\npm\node_modules。参阅：npm 将软件包安装到哪里...

原创 推荐两个git相关的VSCode插件

git-commit-plugin

原创 Promise.all与Progress结合实现请求进度监听

要批量发起100,1000或者更多个请求，可以借助于Promise.all，但是如何知道请求过程中接口的调用进度情况呢？/** * 模拟异步请求 */function timeout(time){ return new Promise((resolve)=>{ setTimeout(()=>{ resolve(time); },time); })}function allWithProgress(requests, callback){ le

原创 浅析Promise原理

Promise原型对象在浏览器控制台输入如下代码，可以看到Promise原型对象信息。var p = new Promise(()=>{});console.log(p)Promise原型上有catch、finally、then等方法。同时Promise内部维护了两个属性值status和valuePromise构造方法再看Promise的构造方法，如下图构造函数有all、allSettled、finally、race、reject、resolve等方法。简单实现构造函数实现总结

原创 理解JavaScript中的作用域

执行环境及作用域执行环境定义了变量和函数有权访问的其他数据，决定了它们各自的行为。执行环境，或者叫执行上下文，每个执行环境都有一个与之关联的是 变量对象。存储了所有变量和函数。执行环境分为：全局执行环境、函数执行环境、eval执行环境。在Web浏览器中，全局执行环境被认为是window对象。每个函数都有自己的指定环境。当执行流进入一个函数，函数的环境会被推入一个环境栈（调用栈）调用栈 中存放的就是执行上下文（变量对象）。作用域：就是变量和函数的可访问范围。作用域分为：全局作用域、函数作用域

原创 求两个数组的差异

案例一组CheckBox，每次选中或者取消一个，在onChange中获取到的都是数组值，如何确定变化的那个值呢？体验地址题目如上案例，换一种说法。求解任意两个数组的存在差异的值。注意，有可能第一个数组比第二个数组的值多。也有可能第二个数组的值更多。思路一根据每个值在数组中首次出现和最后一次出现的索引值是否相等进行判断。let arr0 = [1,2,4,5], arr1 = [1,2,3,4,5];let diff = arr0.concat(arr1).filter((value, ind

原创 解决React.forwardRef问题

在使用函数组件时，报错：Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()解决办法：将函数组件通过用forwradRef包装。//子组件function FancyButton(props, ref) ( return <button>Test</button>;);export

原创 formily中基础正则表达式

阅读formily源码时，遇到了平常开发过程中会用到的一些正则表达式，这里做个记录。export default { email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, ipv6: /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\

原创 ES6中import和export

exportexport function funcA() { console.log('funcA');}function funcB() { console.log('funcB');}//使用大括号指定要输出的一组变量export { funcB };//as关键字将输出的变量重命名export { funcB as func2};export default f...

原创 从ES6代码编译看原型链继承

TS代码class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; }}class Point3D extends Point { z: number; constructor(x:number, y:number, z...

原创 《JavaScript高级程序设计》读书笔记 之 执行环境及作用域

执行环境定义了变量和函数有权访问的其他数据，决定了它们各自的行为。执行环境，或者叫执行上下文，每个执行环境都有一个与之关联的是 **变量对象。**存储了所有变量和函数。分为：全局执行上下文、函数执行上下文、eval执行上下文。在Web浏览器中，全局执行环境被认为是window对象。每个函数都有自己的指定环境。当执行流进入一个函数，函数的环境会被推入一个环境栈（调用栈）调用栈 中存放的就是执...

原创 Git常用命令

命令说明范例clone从远程仓库克隆git clone [email protected]:xxx.gitinit创建空仓库或重新初始化现有仓库git initadd添加文件到暂存区git add <file>commit保存暂存区的变更记录到工作区git commit -m "日志说明"status查看文件变更状态git s...

原创 JavaScript 枚举

enum Color { RED,GREEN,BLUE}var Color;(function (Color) { Color[Color["RED"] = 0] = "RED"; Color[Color["GREEN"] = 1] = "GREEN"; Color[Color["BLUE"] = 2] = "BLUE";})(Color || (Color...