- 博客(167)
- 收藏
- 关注
RSS订阅原创 使用 React Testing Library 测试 Antd Form 组件
重点在于对 Form.useForm() 的处理，其返回值包含了Form组件数据管理的相关方法。
2023-09-23 09:46:15
459
翻译 18个强大的JavaScript技能
当你需要写一个递归函数时，你声明了一个函数名，但每次修改函数名时，你总是忘记修改内部函数名。当你在开发过程中需要打印dom元素时，使用console.log往往只能打印出整个dom元素，而你无法查看dom元素的内部属性。当你需要打印出当前页面，但你需要修改当前的布局时。当你需要打印当前页面时。
2023-05-30 14:16:29
247
转载 维护好一个复杂项目
维护好一个复杂项目很难，这次分享了两个实践中有用的方案，第一个抱有主人翁心态设计代码，要在设计之初就做好考量，不要寄希望于对没有好好设计的系统做缝缝补补。第二是深入理解为什么现代社会的运作巧妙之处，尽可能把代码架构组织一定程度映射到社会的运作机制上，目前来看，社会最适合代码借鉴的思路就是解耦，再利用庞大的分工协作网络完成单人无法完成的工作。
2023-04-13 14:25:56
79
原创 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
380
原创 webpack打包结果运行流程分析
webpack自身的定位是一个模块打包器，他的的理念是万物皆模块。然而其自身只能处理 javascript 模块以及 json 模块，那么何以敢称万物皆可打包呢，这就引出了 loader 机制，loader 可将各式各样的引用资源进行转化，然后输出为 webpack 可以识别的 javascript 模块并进行打包处理。基本配置const path = require('path');/** * 为配置文件提供类型支持 * @type {import('webpack').Configurati
2022-03-20 22:47:12
1050
原创 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
1932
转载 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
3724
原创 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
449
原创 封装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
822
原创 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
417
原创 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
1183
原创 迁移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
184
原创 实现一个 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
443
转载 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
5496
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
281
原创 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
825
原创 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
220
原创 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
1872
原创 Nodejs提取图片主题色（一）
需求一个可以正常访问的图片链接排除掉图片数据值中灰色系rgb的值（即 r=g=b 的值）统计剩余的rgb值，得出颜色排行这里主要参考了 https://github.com/lokesh/color-thief 开源项目使用方式ColorThief.getColor('https://lokeshdhakar.com/projects/color-thief/images/image-1.jpg') .then((color) => { console.log('col
2020-08-25 17:36:44
1745
原创 基于Koa中间件替代前端Promise链式调用
先明白几个关键词Koa 中间件及其洋葱圈模型koa-compose常见中间件原理浅析Promise 链式调用Promise 链式调用问题场景假设有一个大表单页面，表单提交之前需要做一下几件事表单字段校验（比如邮箱格式校验）个别字段的敏感词校验提交字段名或字段值格式化处理（比如时间格式）提交数据到后端实现一：流水式处理// 表单提交需做几下4个阶段的处理const submit = () => { /** * 1. 表单校验 * 此处省略若
2020-07-12 11:40:09
321
原创 koa2+ts中为Context扩展自定义属性
问题来源为了简化 ctx.body 赋值操作，想要在 ctx 扩展两个自定义方法， success 及 error使用起来如下// 响应成功状态请求ctx.success({ username: 'test'});// 等价于ctx.body = { code: 1, data: { username: 'test' }};// 响应失败状态请求ctx.error("参数不正确");// 等价于ctx.body = { code: 0, dat
2020-07-02 15:15:38
3647
原创 常见中间件原理浅析
常用中间件原理浅析Koa2 中间件原理/** * Compose `middleware` returning * a fully valid middleware comprised * of all those which are passed. * * @param {Array} middleware * @return {Function} * @api public */function compose (middleware) { // 中间件列表格式化校验 i
2020-05-29 16:52:05
471
原创 React16常用自定义Hooks封装
/* eslint-disable import/prefer-default-export */import { useState, useRef, useEffect, useReducer } from 'react';type noop = () => void;/** * @description 强制重渲染 */export const useForceUpda...
2020-04-18 12:53:55
3345
原创 Ant Design 组件small、default、large自定义
Ant Design 组件small、default、large自定义定制主题项目中常见于Ant Design 的样式变量覆盖下面是一些常用的通用变量@ant-prefix: ant; // ant design 类名前缀@primary-color: #1890ff; // 全局主色@link-color: #1890ff; // 链接色@success-color: #52c41...
2020-03-20 09:44:34
2065
原创 TypeScript-工具类型的设计
TypeScript-工具类型的设计文章目录TypeScript-工具类型的设计预备知识尝试解一道面试题工具类型分析与设计注意事项如何训练工具类型的编写呢？预备知识TypeScript高级类型-PartialTypeScript高级类型-条件类型（重要前置知识）TypeScript高级类型-实用技巧尝试解一道面试题原题地址详细描述可见上面链接，这里只说明一下核心点我们有一...
2020-02-03 13:19:40
378
原创 TypeScript-易混淆点解读
TypeScript-易混淆点解读文章目录TypeScript-易混淆点解读字面量类型类型字面量可辨识联合类型类型别名与接口的异同点相同点不同点字面量类型字面量是JavaScript本身提供的一个准确变量，其主要分为字符串字面量类型、数字字面量类型、真值字面量类型、枚举字面量类型、大整数字面量类型。// 字符串字面量类型let foo: 'Hello';foo = 'Bar'; // ...
2020-02-02 11:36:24
688
原创 TypeScript高级类型-内置实用工具类型
TypeScript高级类型-内置实用工具类型文章目录TypeScript高级类型-内置实用工具类型预备知识`Partial``Required``Readonly``Pick预备知识TypeScript高级类型-PartialTypeScript高级类型-条件类型（重要前置知识）TypeScript高级类型-实用技巧Partial<T>将泛型 T 中的所有属性转化为可...
2020-02-01 18:15:49
1468
原创 TypeScript高级类型-实用技巧
TypeScript高级类型-实用技巧文章目录TypeScript高级类型-实用技巧预备知识类型递归特殊关键字注释is 关键字泛型约束预备知识TypeScript高级类型-PartialTypeScript高级类型-条件类型类型递归在 TypeScript 中有这样一个内置类型工具 Required<T>，它可以将对象类型 T 上的所有 可选属性 转化为 必填属性。先...
2020-02-01 15:29:36
1854
翻译 TypeScript 3.7 带来了哪些好用的功能
TypeScript 3.7 带来了哪些好用的功能文章目录TypeScript 3.7 带来了哪些好用的功能Optional Chining（可选链）Nullish Coalescing`--declaration` and `--allowJs`Optional Chining（可选链）Optional Chining 核心点在于它允许我们写出在遇到 null 或者 undefined 时...
2020-01-31 17:17:17
818
原创 TypeScript高级类型-条件类型
TypeScript高级类型-条件类型预备知识：泛型高级类型为什么需要条件类型？在TypeScript使用过程中，我们一般会直接指定具体类型比如：let str: string = 'test';然而，我们在编写代码的过程中，会遇到不能明确指定其具体类型的情况比如：declare function f<T extends boolean>(x: T): T e...
2020-01-30 13:18:20
3689
原创 TypeScript高级类型-Partial
TypeScript高级类型-Partial预备知识：TypeScript类型系统接口泛型先来看一下 Partial 类型的定义/** * Make all properties in T optional */type Partial<T> = { [P in keyof T]?: T[P];};假设我们有一个定义 user 的接口，如下int...
2020-01-29 22:50:12
38016
2
原创 TypeScript useRef 使用问题
TypeScript useRef 使用问题interface IModalReturn { destroy: () => void; update: (newConfig: ModalFuncProps) => void;}let confirmModalRef = useRef<IModalReturn>(null);confirmModalRef...
2020-01-13 10:13:59
16754
原创 mobx-react-lite + Context 使用不完全指南
mobx-react-lite + Context 使用不完全指南mobx-react-lite 是 mobx-react 的轻量版，增加了对函数式组件 hooks 的支持随着 React Hooks 的推出，让我们在不编写 class 的情况下使用 state 以及其他的 React 特性，现在项目中使用Hooks的函数式组件日益增多，而多个组件之间的状态管理变得日益复杂。那么在多层级...
2019-12-17 16:01:48
5443
6
转载 webpack Dll（预编译） 进阶优化
1. 基础概念：dll（预编译） 其实就是缓存说实话我刚看见这个 dll 动态链接库的时候，我真被镇住了：这是什么玩意？怎么根本没听说过？好学的我赶紧 Google 一下，在维基百科里找到了标准定义：所谓动态链接，就是把一些经常会共享的代码制作成 DLL 档，当可执行文件调用到 DLL 档内的函数时，Windows 操作系统才会把 DLL 档加载存储器内，DLL 档本身的结构就是可执行档，...
2019-09-25 20:33:41
786
原创 React Hooks简易实现redux状态管理
React Hook中提供的 useContext 、 useReducer 以及 context API可以实现类redux的状态管理功能，具体API的使用方法见官方文档，这里结合 TypeScript 演示如何进行组件的状态管理首先创建共享数据的Store组件 BgStore.tsximport * as React from 'react';interface IState { //...
2019-09-15 22:59:34
809
原创 React Router Config（React 集中配置式路由）
React Router Config 简介React Router Config 是 React Router 的一个辅助工具，主要帮你做集中配置式路由什么是配置式路由呢，如下import App from '../App';import Child from '../components/route-static/Child';import GrandChild from '../c...
2019-07-09 20:36:20
18860
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人