- 博客(47)
- 收藏
- 关注
RSS订阅原创 谷歌浏览器插件篇之console Importer
作为一名前端开发者，相信在开发实践中，使用过诸多第三方库。譬如：lodash、moment、dayjs、antd等数不胜数。然每每使用，经起繁琐，便令人有反抗之意。其步骤如下：首先要在搭建好的项目里，安装、引入、使用。这里有个问题，如果我只是想调研一下，同等功能包的性能呢？比如：momentjs和dayjs。又或者，仅仅想尝试下某个API的用法呢？那以上做法是不是显得有些冗余呢？那么接下来这个插件，可以帮大家解决这个问题。
2023-08-19 22:09:58
1081
原创 ts + axios + useRequest （ahooks）—— 实现请求封装
现在越来越多的项目开始ts化，我们今天就一块学习一下，关于ts的请求封装。定义一个泛型接口，用于指定请求参数和响应数据的类型。
2023-08-08 11:28:43
1505
原创 基于 Ant Design 的 Layout，我们可以封装一个双菜单栏（都为左侧菜单）的组件。
通过这种方式，我们可以快速地构建一个双菜单栏的布局，并且可以根据需要自定义菜单项和路由。来管理左侧菜单的展开和收缩状态。同时，我们在左侧菜单的每一个菜单项中使用了。组件，该组件包含两个左侧菜单栏。组件时，只需要将需要展示的子组件作为该组件的。组件，该组件用于跳转到对应的页面。在这个例子中，我们定义了一个。
2023-05-25 15:43:23
516
原创 基于 antd 封装一个可配置的表单组件
由于我们需要根据传入的配置项来渲染表单项，因此我们通过。属性表示表单项校验规则。我们还需要根据表单项的类型来选择渲染。方法将配置项数组中的每个配置项都渲染为一个。以上代码中，我们首先引入了 antd 中的。组件进行关联，以便我们可以使用。方法来绑定表单项的值。接下来，我们定义了一个名为。，以方便我们在代码中使用。属性表示表单项的初始值，中提供的方法来操作表单。组件与 antd 的。
2023-05-25 15:24:34
870
原创 js实现深拷贝的几种方式
JSON.parse和JSON.stringify提供了深拷贝的功能，但只适用于支持序列化和反序列化的数据类型，如基本数据类型和部分对象类型。lodash是一款流行的JavaScript工具库，它提供了_.cloneDeep方法，可以实现深拷贝。递归实现是最基本的深拷贝方式，它遍历对象属性，若属性本身是引用类型，则继续递归拷贝。Object.assign也可以实现深拷贝，但只能复制可枚举属性，不能复制继承属性。3.Object.assign实现。4.lodash实现。
2023-05-10 11:14:52
917
原创 函数柯理化的理解
这种技术的主要作用是让函数更加灵活，可以更方便地进行复合和组合，并且可以动态地生成新函数，从而满足不同的需求。这样，我们就可以复用已有的柯里化函数，而不用每次都重新定义。此外，柯里化也可以用于实现一些高阶函数的功能，比如函数的部分应用、函数的组合等。函数柯里化是将一个接受多个参数的函数转化为接受一个单一参数（最初函数的第一个参数）的函数，并返回接受余下参数而且返回结果的新函数的技术。
2023-05-08 17:04:36
99
原创 js中reduce的使用场景：
在reduce方法的回调函数中判断当前元素是否为数组，如果是则递归调用flatten函数进行扁平化操作；reduce主要用于将一个数组或对象中的多个值合并为一个值，并且可以对每个元素进行指定的操作。「1」 数组求和、平均值、最大值、最小值等操作；数组求和、平均值、最大值、最小值等操作。「4」将数组中的元素按照某个属性进行分组。「5」将对象的属性值进行合并、计算等操作。将数组中的元素按照某个属性进行分组。将对象的属性值进行合并、计算等操作。「3」对数组进行去重、排序等操作。对数组进行去重、排序等操作。
2023-05-08 16:46:29
710
原创 antd-tabs点击进入某个tab下的详情，返回列表预期回到当前tab
antd-tabs点击进入某个tab下的详情，返回列表预期回到当前tab
2023-01-29 18:20:27
679
原创 【antd-form+useLayoutEffect】获取子组件的form实例
在做需求的时候，我遇到了一个场景，需要拿到子组件的form实例，父组件来提交。后来，我查看了react文档，发现有一个hook可以帮助我实现，那便是。希望我的分享，能帮助大家～～～❤️❤️❤️。大家好，我是一枚程序鱼🐟！起初，我思考了很久，但是……
2022-09-04 01:50:52
675
原创 【setInterval应用】倒计时 -useEffect+setInterval实现轮询
setInterval的有关的应用1.倒计时2.useEffect+setInterval实现轮询
2022-09-03 22:35:09
1073
2
原创 用于diff功能的插件库～～react-diff-viewer
大家好～～我是一枚程序鱼🐟最近发现一款专门用于diff的插件～react-diff-viewer。可支持的功能包括拆分视图、内联视图、单词差异、行高高亮等。当然它的高度也是可定制的。使用步骤如下：1.安装插件——yarn i react-diff-viewer or npm ireact-diff-viewer2.引入并使用：import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';完整代码如下：impor.
2022-05-05 10:48:37
4643
3
原创 classnames函数—动态切换class样式
大家好～～我是一枚程序鱼🐟在最近的项目中，有使用classnames库动态切换class样式～～于是乎，我就查阅了资料并了解了基本的用法。我做了一下总结，希望对大家有帮助：classnames函数接受任意量的参数，可以是字符串或者对象。属性值为true时，说明添加到了该样式，为false时，该样式不生效。官方给的例子：classNames('foo', 'bar'); // => 'foo bar'classNames('foo', { bar: true }); // =>
2022-04-28 15:09:00
858
原创 格式化json数据
大家好～～我是一枚程序鱼🐟最近因为工作需，我发现了一款比较好用的美化json的一款插件——react-json-view。首先，我先介绍一下这个插件，该插件里面内置了一个组件，我们可以更改组件的属性来实现以下功能：它包括主题颜色更改、数据的展开收起、并且支持复制粘贴功能等。我们可以通过在线调试，得到我们想要的效果。这是效果图：在线调试链接如下：RJV Demohttps://mac-s-g.github.io/react-json-view/demo/dist/使用步骤：1.安装
2022-04-28 11:13:32
1095
原创 antd-react-Dropdown下拉菜单（上下箭头切换动画）
pd非让搞一个这个下拉框上下箭头切换的动画，没办法谁让咱们是打工人呢（虽然心里是一万个愿意，但是也能硬着头皮上呀）。代码实现如下：1.引入并使用组件import { Menu, Dropdown } from 'antd';import { DownOutlined, UpOutlined} from '@ant-design/icons'; //上箭头和下箭头的图标 <Dropdown overlay={menu} trigger={['c
2022-03-25 16:37:47
3312
原创 网址分享（保持学习）
前端八股文：🔥 连八股文都不懂还指望在前端混下去么 - 掘金高频前端面试题汇总之CSS篇：「2021」高频前端面试题汇总之CSS篇 - 掘金深入浅出HTTPS工作原理：深入浅出HTTPS工作原理_xinjing_wangtao的博客-CSDN博客_https原理……后续更新中……...
2022-03-24 18:20:31
799
原创 计算对象的层数
判断对象里，是否有对象，有的话就递归+1。let obj1 = { a: 1, b: [1, 2, 3, 4], }; const getObjLevel = (obj) => { let level = 1; let objValue = Object.values(obj); for (let i = 0; i < objValue.length; i++) { if (typeof objVa
2022-03-24 17:44:53
645
原创 实现destructuringArray方法
说明：实现destructuringArray方法，达到如下效果destructuringArray( [1,[2,4],3], "[a,[b],c]" );result{ a:1, b:2, c:3 }const destructuringArray = (arr, str) => { const handleAfterStr = Array.isArray(str) ? str : JSON.parse(str.replace(/([a-z]+)/g, '"$1"
2022-03-24 01:08:39
200
原创 antd-table-react（在table组件外实现全选）
效果图如下：代码实现：import styles from './index.less';import React, { useEffect, useState } from 'react';import { Table, Button} from 'antd';const columns = [ { title: 'Name', dataIndex: 'name', render: (text: string) => <a>{text}&l.
2022-03-22 22:08:22
1491
2
原创 题目：找出数组中第k大和第m大的数字相加之和
说明：实现一个方法，找出数组中第k大和第m大的数字相加之和。示例：let arr=[1,2,4,4,3,5],k=2,m=4;findTopSum(arr,k,m); 第2大的数字是4，出现次数是2次，第4大的数字是2，出现的次数是1次，所以最终结果是10。const findTopSum = (arr, k, m) => { const arr1 = arr; // 排序并去重后的数组 const newArr = Array.from(new
2022-03-22 21:30:36
561
原创 题目：请用原型链或者class实现一个计数器，能够实现链式加减乘除。
1.使用原型链方法function myCalculator(num) { this.num = num; } myCalculator.prototype.add = function (n) { this.num = this.num + n return this } myCalculator.prototype.minus = function (n) { this.num = this.num - n
2022-03-22 21:23:34
623
原创 封装一个函数，入参分别是，n（表示数组的长度）times（表示相邻项元素的和是奇数的次数），最终要返回一个数组，要返回数组的每一项不能重复，且数组的每一项范围是[1,n].
输入：3，1 ===> 输出： [1,3,2]输入：4，2 ===> 输出：[1,2,4,3]const handleArray = (n, times) => { let arr = []; for (let i = 1; i <= n; i++) { arr.push(i); } let count = 0; for (let j = 0; j < arr.length - 1; j++.
2022-03-07 18:26:35
194
原创 antd-react-form-动态增删表单项
以antd4.x版本为例。代码如下：const [checkList] = useState([{ label: '客户端', value: 1 }, { label: '服务端', value: 2 }, { label: 'MTOP', value: 3 }]);// checked列表 const [showFlag, setShowFlag] = useState(false); // 控制是否可以增添表单 <Form {...for
2022-03-02 14:58:00
1680
原创 antd-table-分页
1.对pagination参数进行设置const paginationProps = { current: pageNum, pageSize, // showTotal: () => ( // <span>总共{total}项</span> // ), total, onChange: page => handlePageChange(page), hideOnSinglePage: false,
2022-03-02 14:04:35
11993
4
原创 封装一个函数，比较两个版本号，如果一致就返回0，前者大于后者就返回1，前者小于后者就返回-1。
例如：输入：0.1，0.1.1 ===> -1输入：0.1，0.1.0 ===> 0输入：0.1.2，0.1.1===> 1思路：首先对传入的字符串进行.分割，然后分别对分割得到的数组进行遍历，判断他们每一项的大小情况。 function compareVersion(version1, version2) { var arr1=version1.split('.') var arr2=version2.split('.')
2022-02-20 16:40:43
423
原创 将多维数组转化为一维数组
例如：[1, [2], [3, [4, [5]]]] ===>[1, 2, 3, 4, 5]const array = [1, [2], [3, [4, [5]]]]; function flat(array) { let arr = array.concat().join(',').split(','); let newArr=[]; arr.forEach((v,i)=> { ne...
2022-02-20 16:02:45
750
原创 把url后面的参数转化成对象的形式
例如：'?name=feizhu&from=alibaba&job=frontend&extraInfo=%7B%22a%22%3A%22b%22%2C%22c%22%3A%22d%22%7D'===> {name:"feizhu",from:'alibaba',job:'frontend',extraInfo: {a: 'b', c: 'd'}}思路如下：对传入的url进行切割，保留问号后的部分，并且对处理后的数据进行&符号分割。对分割的每一部分进行循环遍历，
2022-02-20 15:39:48
3389
原创 封装一个函数，去掉字符串中的下划线，并返回不含下划线且遵循驼峰法命名的字符串。
思路：首先我们对传入的字符串进行判空，存在的话，就以下划线对字符串进行分割，对分割好的字符串（即转化为数组了）进行遍历，对遍历到的每一项进行空字符串分割，并且对分割的第一项进行大写转化，通过三目运算把转化后的大写项插入到对应的位置，把最后的结果放在新数组中，最后把新数组转化为字符串。function snake2camel(str) { // 对字符串“_”进行分割 if (str) { var strArr = str.split('_');.
2022-02-20 01:01:14
444
原创 对url中的参数进行提取，并放在对象中，若出现中文编码就编译成中文。
思路都写在注释里面了。 function parseQueryString(url) { // 用于存放属性和属性值 var obj = {}; // 转义中文 var url1 = decodeURIComponent(url); // 找到问号的位置 var index = url1.indexOf('?'); // 找到参数的第一个位置,并截取url?后面的参数 va.
2022-02-19 19:57:39
344
原创 判断两个字符串是否相同 只要求相同，不考虑顺序。
思路：判断传入的两个字符串的长度，如果长度不一致就返回false，长度一样的话，就遍历这两个字符串，结合使用charCodeAt方法。charCodeAt该方法是 返回的是Unicode 编码值。利用Unicode 编码值之和来判断两个字符串的是否一致。如果它们Unicode 编码值之和相同说明字符串是相同的，那就返回true，反之就返回false。 const isSame = (str1, str2) => { let CodeAt1 = 0; let CodeAt2
2022-02-19 19:42:53
1892
2
原创 实现一个函数 find，传入一个数组和数字，返回最接近这个数字的所有元素
const find = (arr, num) => { let newArr = []; let arr1 = []; for (let i = 0; i < arr.length; i++) { newArr.push(Math.abs(arr[i] - num)); if (arr.length === newArr.length) { const firstNum = Math.min(...new.
2022-02-19 19:34:16
1143
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人