- 博客(56)
- 收藏
- 关注
RSS订阅原创 umi官方文档中的常见API
umi官方文档中的常见API基本APIdynamic动态加载组件常见使用场景：组件体积太大，不适合直接计入bundle中，以免影响首屏加载速度。例如：某组件HugeA包含巨大的实现/依赖了巨大的三方库，且该组件HugeA的使用不在首屏显示范围内，可被单独拆出。这时候，dynamic就该上场了为什么使用dynamic：封装了使用一个异步组件需要做的状态维护工作，开发者可以更加专注于自己的业务组件开发，而不必关心code spliting、async module loading等等技术细节通常搭配
2022-05-24 08:30:00
2997
原创 JS 比较两个数组差异的方法
JS 比较两个数组差异的方法在开发过程中，我们有时需要对两个的数组进行差异的比较，并将差异变成一个新的数组，我们可以使用简单的方法实现。差异比较方法：const getArrDifference = (arr1, arr2) => { return arr1.concat(arr2).filter((v, i, arr) => { return arr.indexOf(v) === arr.lastIndexOf(v); })}演示示例：const getArrDi
2022-05-16 15:34:44
9699
4
原创 React中memo()，useMemo()，useCallback()的使用(区别，解决了什么问题)
React中memo()，useMemo()，useCallback()的使用前言：React框架中，当组件的props或state发生变化时，会重新渲染组件，实际开发中会遇到不必要的重新渲染场景。这里的memo()，useMemo()，useCallback()都是应用在函数组件中。调理不够清楚，希望你能够一步一步看。React.memo()React.memo()和类组件中React.PureComponent()很相似，它可以帮助我们控制什么时候重新渲染组件，它适用于函数组件，但不适用于 cla
2022-05-09 17:57:24
932
1
原创 git提交失败之running pre-commit hook: lint-staged
git提交失败之running pre-commit hook: lint-staged在项目中提交代码时遇到了git报错，但是很疑惑不知道为什么报错。上网差了查才发现是项目中有语法校验，在提交中git默认不允许存在很多语法错误的文件提交。错误提示： git:>running pre-commit hook:lint-staged错误分析： 错误的意思是大概是有一个钩子，提交前检查项目代码的规范，eslint的检查。提交失败的原因：项目中error过多，导致检测未通过，提交失败。解决办法：
2022-04-20 20:54:58
14049
2
原创 node修改版本
node如何回退版本我们在日常开发中有可能经常会碰到项目所需要的node版本往往不是新的，我们就需要修改我们的全局node的版本来适配项目。这里我使用gnvmgnvm的github地址由于另外两个由于网速问题，这里推荐使用百度网盘下载，其实就是一个gnvm.exe文件下载完成后，放到node目录中在cmd中输入gnvm version ，出现以下结果代表系统能够识别了安装想要版本的node，这里我举例为14.17.4，命令为： gnvm install 14.17.4这
2022-04-06 21:32:00
1577
1
原创 闭包的简单认识
闭包的简单认识闭包的定义一个函数和对其周围环境(词法环境)的引用绑定在一起(或者说函数被引用包围)，这样的组合就是闭包。也就是说，闭包可以让你在一个内层函数中访问到其外层函数的作用域。在js中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。// 简单的闭包，在函数中return中返回一个函数并调用function makeFunc(){ let name = "Tom"; return () => { alert(name); }}let myF
2022-04-06 09:00:00
284
原创 JavaScript中的toLocaleString()方法你知道吗？
JavaScript中的totoLocaleString()方法你知道吗？前言在看到一个需求(面试题)，如果将一串数字每隔三位利用’,'进行分隔，也就是我们所说的数字千分位格式。在我想如何实现的时候，totoLocaleString()这个函数进入了我的视野，它能轻松的将一串数字轻松转成千分位格式。但这个函数实在是陌生，我就去了解了一下，却发现了这个函数神奇的用途，下面就简单总结一下简单介绍totoLocaleString()方法是用于返回格式化对象后的字符串，该字符串格式因语言不同返回值也会不同（
2022-02-16 21:00:00
2879
原创 JavaScript中回调函数(callback)的简单介绍
JavaScript中回调函数(callback)的简单介绍什么是回调函数(callback)？被作为实参传入另一个函数，并在该外部函数内被调用，用来完成某些任务的函数，称为回调函数。也就是说回调函数是一个函数，作为参数传给另一个JavaScript函数，回调函数将会在这个函数执行完成后立即执行。回调函数是在传给的函数内部被调用执行的。为什么要用到回调函数呢，它的好处在哪里？正如上面对于回调函数的介绍那样所说的，如果当有很多地方需要调用同一个函数，并且这一函数根据不同的需要，作不同的处理，这个时候用
2022-02-15 21:32:48
8654
原创 JavaScript中call()、apply()、bind()的用法
JavaScript中call()、apply()、bind()的用法三个比较和用法介绍call()、apply()、bind()三者目的都是用来改变this的指向，但用法有一些不同call()语法：call(thisObj,arg1,arg2,...,argN)参数：thisObj：this要指向的对象，arg1,arg2,...,argN:参数列表，参数可以是任意类型，当thisObj为null、undefined的时候，默认指向window注意：会立即执行函数apply()语法：
2022-02-15 21:21:26
372
原创 万字总结JavaScript 中Array对象身上的方法
JavaScript Array方法我觉得平时对数组的加工操作可能要比字符串更加频繁，而且操作的逻辑复杂程度也是存在不确定性。Array对象身上的方法有很多，其实常用的也就几个，我们需要牢记这些常用的方法。废话不多说，下面在进入正题前，声明一下：本人前端菜????，文采水平有限，还望指正。1. concat():连接两个或更多的数组，并返回结果语法：array1.concat(array2,array3,...,arrayN)参数： 该参数可以是具体的值，也可以是数组对象。可以是任意多个返回值：
2022-02-06 12:28:34
744
原创 JavaScript String 对象身上的方法你都记住了几个？【建议保存，适合前端入门的人在工作的时候方便查找】
JavaScript String 方法js中常见的对字符串操作的方法有很多，常用的其实就那几个。我们只需要牢记几个常用的就可以了，对于不常用的，我们可以去网上查或者收藏我的博客(手动????)。废话不多说，下面在进入正题前，声明一下：本人前端菜????，文采水平有限，还望指正。简单介绍一下String 对象String对象：用于处理文本(字符串)创建方法： let txt1 = new String(); // 简单方式： let txt = 'string';String 对象属性：
2022-01-28 23:15:36
1377
原创 React 脚手架在IIS上进行部署
React 脚手架在IIS上进行部署利用react脚手架生成一个初始的项目我们需要先执行下面命令安装脚手架npm install -g create-react-app利用脚手架创建React项目执行以下命令进行项目创建 其中 project 为项目名称，会在当前目录下创建该文件夹并生成项目文件，执行完之后就直接可以进入目录启动项目create-react-app project启动React项目切换到项目文件夹 cd project 并启动项目 npm start.项目
2022-01-25 22:02:59
1600
原创 富文本编辑器之wangEditor
富文本编辑器之wangEditor在公司做项目时，遇到了需要富文本编辑器能够上传图片到服务器，上网找了一些，发现了一个国内开源的富文本编辑器----wangEditor，由于是国内的，文档介绍比较清楚，个人认为上手起来也很方便。如果工作上你有类似需求，不妨可以去官网看看，官网地址由于现在做的项目前端用的是React，这个编辑器完全支持React ,同时也支持Vue。官网所说：快速接入，配置简单，几行代码即可生成。集成了所有常见功能，无需二次开发。在 Vue React 也可以快速接入。我是参看该编译器
2022-01-24 21:50:52
782
原创 JS中filter()和reduce()方法介绍
JS中filter()和reduce()方法介绍filter()filter()方法是ES6的新语法，和forEach,map类似。filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意：filter() 不会对空数组进行检测。filter不会改变原始数组。语法：array.filter(function(currentValue,index,arr),thisValue)参数：回调函数function(currentValue,index,ar
2022-01-20 12:00:00
848
原创 面试之求一串字符串中每个字符的出现次数
求一串字符串中每个字符的出现次数for循环实现，最容易理解：var arrString = 'fghffgaga';var strArr = arrString.split('');var rel = {};var count = 1;for (var i = 0; i < strArr.length; i++) { for (var j = i + 1; j < strArr.length; j++) { if (strArr[i] == strArr[
2022-01-20 08:30:00
327
原创 JS中的forEach()和map()方法介绍
JS中的forEach()和map()方法介绍forEach()forEach 是ES5扩展的语法，可以使用它遍历数组，对象。forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。注意：forEach()对于空数组是不会执行回调函数的，并且它不会改变原数组语法：array.forEach(function(currentValue,index,arr),thisValue)参数 ：回调函数function(currentValue,index,arr) 必需，数组中每个元素需
2022-01-19 21:43:16
777
原创 使用ts+webpack5一步一步搭建一个最简单react的环境
使用ts+webpack5一步一步搭建一个最简单react的环境开始之前在开始之前，你需要了解以下基础知识：电脑上需要安装Node.js包管理工具(npm或yarn)VS Code编辑器了解webpack，webpack-cli，webpack-dev-server了解react，react-dom，@types/react，@types/react-dom了解typescript环境配置初始化node环境，这里用的是yarnyarn init -y安装typescript环境
2022-01-09 15:28:15
739
原创 实现Ant Design Tree组件的节点的增删改
实现Ant Design Tree组件的节点的增删改在做项目时最近遇到一个需求，需要用到Antd中的tree，并能够实现对tree的节点的增加和删除，以及节点名称的修改。去翻Antd官网文档，发现tree组件并没有提供关于节点操作的api，但是有鼠标右击的api。借助这个鼠标右击，以及其他组件是可以实现对节点的增删改。下面进行截图介绍：截图介绍第一部分：Tree组件最外层节点只能增加子节点父节点可以增加子节点，修改自己的节点名称，删除节点3.最内层节点不允许再添加子节点，只允许修改自己的
2022-01-05 21:47:11
6043
3
转载 面试之HTTP强缓存和协商缓存
HTTP强缓存和协商缓存浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。所以根据上面的特点，浏览器缓存有下面的优点：减少冗余的数据传输减少服务器负担加快客户端加载网页的速度浏览器缓存是Web性能优化的重要方式。那么浏览器缓存的过程究竟是怎么样的呢？在浏览器第一次发起请求时，本地无缓存，向web服务器发送请求，服务器起端响应请求，浏览器端缓存。过程如下：在第一次请求时，服务器会将页面最后修改时间通过La
2022-01-03 17:23:39
1142
原创 面试必备之手写节流和防抖函数
面试必备之手写节流和防抖函数手写防抖函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-12-30 22:50:42
560
原创 2021年终总结
2021年终总结关于年终总结，其实说实话没想搞得要多么正式，从小文采就不好，就简单记录记录，留给以后的自己看。回顾我的大学生活2017年怀着懵懂的无知进入了一个双非的本科院校，开始了我的大学生活。大学生活说是四年，其实满打满算也就三年。第四年，该考研的考研，该跑出去实习的出去实习，然后你突然发现身边的人都散了，都开始忙自己的事了。三年里也并没有真正多么努力的学习，也就为了应付期末考试，保证不挂科去学习。现在想想，如果大二自己开始懂事或者有人点醒，说不定自己的状态也不至于到现在这个地步。每当看到比自己小
2021-12-30 22:33:19
202
原创 React图片懒加载和路由懒加载的简单介绍
React图片懒加载和路由懒加载的使用1. 路由懒加载路由懒加载实现代码分隔，可以将代码拆分视为增量下载应用程序。安装：npm install @loadable/component 使用：import loadable from '@loadable/component'const LoadDemoComponent = loadable(() => import('./components/Demo.jsx'))function App() { return (
2021-12-29 22:16:51
606
原创 简单探讨event.target和event.currentTarget的区别
简单探讨event.target和event.currentTarget的区别对于Dom对象的事件的认识，可能我们最熟悉的就是给一个按钮绑定一个点击事件，如果想要获取该按钮的一些事件属性，我们无疑会给回调函数传递一个event事件对象。在这个事件对象中，event.target和event.currentTarget同样都能获取该Dom对象，但是具体还是有一些不同。1. 对比getElementsByTagName()、getElementById()、getElementsByClassName()获
2021-12-27 00:15:00
310
原创 React Router V6变更介绍
React Router V6 变更介绍之前一直在用5.x版本的Router，突然发现Router V6有一些变化，可以说是对嵌套路由更加友好了。这里，我们就做个简单的介绍。1. < Switch > 重命名为< Routes >之前在用Router时，需要用Switch包裹，Switch可以提高路由匹配效率(单一匹配) 。在V6中，该顶级组件将被重命名为Routes，注意的是其功能大部分保持不变。2. < Route >的新特性变更component/ren
2021-12-22 23:06:28
702
2
原创 React Hooks的万字介绍，想了解Hooks，看这篇就够了
文章目录Hooks的简单了解为什么要学HooksuseState简单介绍useEffect简单介绍1. 基本使用Hooks的简单了解从功能上看：类组件约=函数组件+hooks在React API中，凡事use开头的都是Hooks,比如：useState、useEffect、useCallback、useContext为什么要学Hooks之前存在的问题： 1. 类组件：生命周期难以理解，更难熟练运用2. 复用状态的render-props和高阶组件思想理解起来不容易3. 最火的状态管理方
2021-12-16 22:10:41
331
原创 用最简单的例子，带你理解var、let、const以及var中的变量提升
用最简单的例子，带你理解var、let、const以及var中的变量提升var 的变量提升机制当我们在全局作用域或者块级(局部,函数)作用域中利用var关键字声明变量时，这个变量都会被提升到此时作用域的最顶端，这就是我们在谈到var时最经常说的变量提升。下面我们看个例子：const person = (status) => { if(status){ var name = '前端攻城狮'; }else{ console.log(name);
2021-12-13 07:00:00
596
原创 Web前端学习路线及面试准备
Web前端学习路线及面试准备有幸在GitHub上看到一个人总结的Web前端学习路线，其实不止只有前端，总结了前后端，DevOps等领域的学习路线，有兴趣的小伙伴可以看看，希望能够让勤奋的你，得到应有的价值。前端学习路线GitHub总结地址(全)从掘金上看到一个博主总结的前端面试需要掌握的知识点，我觉得挺全的，这里也给出链接。面试准备知识点...
2021-12-12 16:22:59
465
原创 JS中数组去重的方式
JS中数组去重的方式方式一：Set(ES6)let arr = [1,2,2,3,3,4,5,2];const unique = arr => [...new Set(arr)];console.log(unique(arr));// [ 1, 2, 3, 4, 5 ]方式二：reducelet arr = [1,2,2,3,3,4,5,2];const unique = (arr) =>{ return arr.sort().reduce((acc,cur) =>
2021-12-08 23:25:32
513
原创 使用flat()方法实现数组扁平化和手写数组扁平化函数
使用flat()方法实现数组扁平化和手写数组扁平化函数flat()方法flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回，对原数据没有影响。下面为flat方法使用的案例：const testArr=["a",["b","c"],["d",["e",["f"]]],"g"];//flat不传参时，默认扁平化一层console.log(testArr.flat());// [ 'a', 'b', 'c', 'd', [ 'e', [ 'f'
2021-12-07 22:20:20
614
原创 前端高效开发必备的js库梳理，日常使用中会持续更新
前端高效开发必备的js库梳理身处前端的环境中，我们会发现，前端更新换代非常快，每年都会有大量的新的框架和库出现，同时也会有很多会被淘汰。作为一个合格的前端开发人员，需要在技术快速迭代更新中，学会总结。js常用工具类lodash：一个一致性、模块化、高性能的JavaScript实用工具库ramda：一个很重要的库，提供了许多有用的方法，每个前端人员都应该掌握这个工具day.js：一个轻量的处理时间和日期的JavaScript库，和Moment.js的API设计保持完全一样，体积只有2kbbig.
2021-12-05 18:32:17
147
原创 webpack4 报错 Could not find plugin “proposal-class-static-block“. Ensure there is an entry in...
webpack4 报错 Could not find plugin “proposal-class-static-block“. Ensure there is an entry in ./available-plugins使用babel-loader做js兼容性处理时，我们安装完babel-loader后还需要安装@babel/core 和@babel/preset-env但是在安装完毕后，运行webpack 命令，进行打包时，控制台报 “Could not find plugin “propo
2021-12-02 23:22:17
2198
原创 webpack在打包图片后出现的问题：background-image显示为“url([object Module])”，图片无法显示
webpack在打包图片后出现的问题：background-image显示为“url([object Module])”，图片无法显示原因：因为url-loader默认使用es6模块化解析，解析时会出现[object Module]。但是webpack5之后就没有这个问题了，可能默认已经配置。解决方案：关闭url-loader的es6Module，让他以commonjs的方式解析在配置中添加：“esModule: false”{ // 问题：默认处理不了html中
2021-12-01 22:02:41
1624
原创 webpack 配置 style-loader时出现错误：Module build failed (from ../node_modules/style-loader/dist/cjs.js)
webpack 配置 style-loader时出现错误，Module build failed (from …/node_modules/style-loader/dist/cjs.js):TypeError: this.getOptions is not a function at Object.loader1.确保loader配置中的顺序，loader的执行顺序是从右到左，从下到上的，这里要注意 style-loader 和css-loader的顺序 ，style-loader 要放在前面2. 使
2021-12-01 21:49:25
3675
原创 React 版本的真开箱即用的富文本编辑器wysiwyg
React 版本的真开箱即用的富文本编辑器这篇文章推荐的react 版的富文本编辑器名字叫做wysiwyg，第一时间你可能觉得这个名字起的很烂，很难记，但是当你知道它的全称后就很好记了，全称为 What you see is what you get(所见即所得)。这个富文本编辑器是偶然在掘金上看到的，宣传上主打开箱即用，在用过后，确实基本能做到开箱即用，基本下载后，不需要进行什么配置。Github文档地址官方Demo地址import React, { Component } from 'react
2021-11-29 22:28:39
621
原创 利用React+Ant Design 的Upload组件进行封装的上传多个图片的照片墙组件
利用React+Ant Design 的Upload组件进行封装的上传多个图片的照片墙组件Antd 提供了对文件上传的Upload组件，个人感觉还是非常好用的。在公司里，如果使用了Antd，那么Upload必定是要封装成一个单独的组件的。下面的代码是对Upload组件进行的封装，自认为注释已经比较全了。后面也有如何调用这个组件获取到上传后的服务器返回的图片名称。Antd Upload组件官方指引直接上代码，这里是封装的Upload组件：//将图片加工成base64编码形式function get
2021-11-29 22:24:51
1271
原创 解决命令窗口报错：无法加载文件 C:\Users\Admin\AppData\Roaming\npm\yarn.ps1,因为在此系统因为在此系统上禁止运行脚本。
无法加载文件 C:\Users\11053\AppData\Roaming\npm\yarn.ps1,因为在此系统因为在此系统上禁止运行脚本。错误如下：步骤:搜索PowerShell，并以管理员身份运行若要在本地计算机上运行您编写的未签名脚本和来自其他用户的签名脚本，请使用以下命令将计算机上的 执行策略更改为 RemoteSigned执行：set-ExecutionPolicy RemoteSigned查看执行策略：get-ExecutionPolicy问题应该已经被解
2021-11-28 15:31:49
2295
2
原创 React 版本的真开箱即用的富文本编辑器wysiwyg
React 版本的真开箱即用的富文本编辑器这篇文章推荐的react 版的富文本编辑器名字叫做wysiwyg，第一时间你可能觉得这个名字起的很烂，很难记，但是当你知道它的全称后就很好记了，全称为 What you see is what you get(所见即所得)。这个富文本编辑器是偶然在掘金上看到的，宣传上主打开箱即用，在用过后，确实基本能做到开箱即用，基本下载后，不需要进行什么配置。Github文档地址官方Demo地址import React, { Component } from 'react
2021-11-27 15:01:45
593
原创 React+AntDesign结合Table、Modal+Form的使用，以及Ant Design 4.x Modal + Form搭配使用时，如何在Modal中使用表单验证
React+AntDesign结合Table、Modal+Form的使用最近写React + AntDesign时，使用到Modal和Form组件时候，因为Modal组件自带onOk按钮，因此不能使用Form自带的onFinish函数进行表单验证，查了查资料，大致了解是通过使用 ref 的方式获得表单值甚至可以发起表单校验方法。不多说了，直接上代码。export default class App extends Component { formRef=React.createRef(); s
2021-11-23 23:21:13
1240
原创 使用React Antd框架时，出现Modal里加form表单，用ref回显数据，第一次取到的是null
使用React Antd框架时，出现Modal里加form表单，用ref回显数据，第一次取到的是null在react项目里，使用ui框架ant-design。table列表的每一行都有编辑按钮，点击编辑，弹窗Modal出现，里面使用Form表单，然后用ref回显数据。但是发现第一次取的时候，ref取到的current总是null，关闭再次打开就可以正常取到。这里的解决方法是：Modal组件中有一个属性为强制渲染给Modal加上此属性即可forceRender="true"...
2021-11-23 22:53:05
1742
3
原创 React + Ant Design 4.X版本表单Form数据回显、重置表单、获取表单某一项的值、获取整个表单的值
React + Ant Design 4.X版本表单Form数据回显、重置表单、获取表单某一项的值、获取整个表单的值由于 4.x版本弃用了3.x中的Form.create()高阶函数，这里我们使用ref。下面的是使用以前老的ref的声明，以及使用，这里只是作为展示，不推荐使用。给From表单添加ref属性，假设这里设置的ref=“addForm”在满足条件的时候，通过下列方法做不同的事①表单数据回显（设置值）this.refs.addForm.setFieldsValue({name: ‘xxxx
2021-11-23 22:23:50
4662
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人