前端
文章平均质量分 56
是梦梦啊
只要我够勤快,咸鱼总会翻身哒!
展开
-
【项目中的一些报错】记录
第一步:npm install autoprefixer@latest caniuse-lite@latest browserslist@latest --save-dev,结果还是不行。第二步: 第一步不行,就删掉node_modlues还有packjosan.lcok文件,重新npm install。运行 ‘npm install -g husky’ 来安装husky,然后再次尝试运行命令。全局安装npm install eslint babel-eslint -g即可。根据提示安装对象的node。原创 2023-12-05 09:57:29 · 841 阅读 · 0 评论 -
【踩坑】Putty报错: Can’t agree a key change algorithm
根据需要选择自己想要下载的版本,我是下载的如下图所示的版本。原因可能是putty版本太老了,更新putty就好了。原创 2023-11-09 09:15:48 · 725 阅读 · 0 评论 -
nrm和nvm使用
安装下载:https://github.com/coreybutler/nvm-windows/releases。nrm use 切换镜像源,like: nrm use taobao。nrm是npm的镜像源管理工具。nrm可以在不同npm源之间切换。nvm install latest: 下载最新的node版本。nrm current 查看当前正在使用的镜像源。安装:npm install -g nrm。nrm ls 查看当前已添加的镜像源列表。nrm delete 删除源。nrm add 添加源。原创 2022-12-26 14:40:10 · 994 阅读 · 0 评论 -
【基础恶补】JavaScript数组的一些方法,reduce,filter,reverse,map等
方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并成一个新数组返回。map 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。负整数从数组中的最后一个元素开始。push() 将一个或多个元素添加到数组的末尾,并返回该数组的新长度。:一个新的、通过测试的元素组成的数组,如果没有符合条件的,则返回一个空数组。原创 2022-12-02 19:08:47 · 2215 阅读 · 3 评论 -
【TypeScirpt学习记录】二
但由于 JavaScript 中,对于 obj[prop] 形式的访问会将数字索引访问转换为字符串索引访问,也就是说, obj[599] 和 obj[‘599’] 的效果是一致的。因此,在字符串索引签名类型中我们仍然可以声明数字类型的键。any和unknown的最大区别:any放弃了所有类型检查,但是unknown并没有。never被称为Bottom Type,是整个类型系统层级中最底层的类型。可以将对象中的所有键转换为对应字面量类型,再组合成联合类型。索引签名类型:快速声明一个键值类型一致的类型结构。原创 2022-11-02 18:44:17 · 338 阅读 · 0 评论 -
【TypeScirpt学习记录】一
上面的code和status,确定了值的集合,可以获取精确的提示,因为一般code和status都是和后端约定好的一些固定值。,但是type会提示重复定义(interface可以定义多次,但同一个type只能定义一次)type将一个函数签名、一组联合类型、一个工具类型等等抽离成一个完整独立的类型。上文的status就是字面量类型,它比原始类型更为精确,可以分为一下几类。联合类型的常用场景之一是通过多个对象类型的联合。交叉类型继承的,interface是使用。根据vip类型来推导其他的类型。原创 2022-10-31 18:04:27 · 268 阅读 · 0 评论 -
【React: 踩坑】Warning: Function components cannot be given refs. Attempts to access this ref will fail.
这里的RgInput是其他人封装过的input框,后来我换成了antd的input也可以直接使用ref,不需要去包一层forwardRef了。我就想得到了在B框上使用ref,通过调用xxxRef.current?.focus()来实现这个小场景。套了一层forwardRef,并且有了第二个参数ref,在input上传入了ref={ref}有两个input框A、B,在A输入之后要进行校验,如果校验通过,自动聚焦到B的输入框……因为原来父组件通过ref获取了子组件的节点,子组件是函数式组件。...原创 2022-07-29 14:28:09 · 4524 阅读 · 1 评论 -
【面试准备:react】状态管理 mobx?redux?
核心原理:利用defineProperty或Proxy,实现数据的Observble,在get中收集依赖,set中触发依赖绑定的监听函数。mobx通过action去更改state在react组件中使用,observer:将状态和组件建立联系。有没有方法在项目开发中store只需一次注入? 可以,使用Provider,inject,适用于class组件如果是hooks + mobx,可以使用useContext后续待补充...原创 2022-07-03 17:58:19 · 319 阅读 · 0 评论 -
【面试准备:react】hooks的原理
前言:renderWithHooks函数的作用是调用function组件函数的主要函数。function组件初始化:function组件更新:那么renderwithHooks做了些什么呢?在react-r econciler/src/ReactFiberHooks.js中回到原点,renderWithHooks函数的主要作用:1、置空workInProgress树的memoizedState和updateQueue,因为要把新的hooks信息挂载到这两个属性上,然后在组件的 commit阶段,将原创 2022-07-03 08:42:23 · 1287 阅读 · 1 评论 -
【面试准备:算法】二叉树
最近面试和刷算法题都有遇到二叉树,所以先浅浅浅学一下~ ,后续还要继续学习深入了解!!定义:二叉树有一个根节点,最多有两个子节点,一个左子节点,一个右子节点。满二叉树:每一层都是最大的结点,不能有空。完全二叉树:结点按照编号从左到右依次构建二叉树,不存在无左子节点,却有右子节点的情况二叉树的遍历更详细,可以参考这篇文章:【图解数据结构】树和二叉树全面总结...原创 2022-07-01 16:46:53 · 161 阅读 · 0 评论 -
【面试准备-react】React.memo和useMemo、useCallback的区别
1、前言2、定义:3、memo和useMemo的区别:1、react.memo()是一个高阶组件,我们可以使用它来包装不想重新渲染的组件,props没有变化,则不会冲性能渲染此组件2、useMemo是一个react hook,我们可以使用它在组件中包装函数。可以使用它来确保该函数中的值仅在依赖项之一发生变化时才重新计算4、定义:5、useMemo和useCallback的区别:1、useCallback优化针对于子组件渲染,返回值是函数。2、useMemo优化针对于当前组件高开销的计算。返回值是缓存原创 2022-06-28 20:17:43 · 1360 阅读 · 0 评论 -
charCodeAt() 方法了解和用法&unicode编码表
前言:最近在看一些算法题,发现有时候借用到charCodeAt方法,所以趁此机会来学习一下(●ˇ∀ˇ●)MDN的解释:W3C的解释:附链接:https://blog.csdn.net/fedawn/article/details/7307993原创 2022-06-24 18:19:06 · 5281 阅读 · 0 评论 -
【2022面试准备】变量类型检测
一、内存空间和类型内存空间分为: 栈内存和堆内存原始类型值被分配到栈内存中而引用类型被分配到堆内存中原始类型:string number boolean undefined null symbol bigInt引用类型:Object(包含object/function/array)二、如何判断类型:1、typeof :可以判断原始类型,但是引用类型判断不了,除函数外所有的引用类型都会被判定为object2、instanceof: 可以判断引用类型具体是什么类型3、Object.prototyp原创 2022-06-13 19:34:39 · 119 阅读 · 0 评论 -
Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?
报错信息:warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop?解决:在Modal上加属性: forceRender={true} destroyOnClose={false}参考链接: https://github.com/ant-design/ant-design/issues/21543...原创 2022-03-24 15:40:52 · 1396 阅读 · 0 评论 -
【面试1】构造函数、原型、原型链、new
1、什么是构造函数?如果一个函数被设计出来,是用于通过new关键字创建对象的,它就是一个构造函数。如下:function Father(name,age){ this.name = name; this.age = age;}构造函数有如下特征:(1)、首字母大写(2)、构造函数应该使用new来调用(3)、构造函数调用后,会返回一个对象(4)、构造函数的返回值若返回的值是一个数字、字符串、布尔,直接忽略,就当看不见。若返回的值是一个对象,则使用返回的对象(5)、构造函数中的原创 2022-02-09 22:23:12 · 286 阅读 · 0 评论 -
[Typescript 泛型学习] |学习记录
[Typescript 泛型学习] |学习记录泛型:类型变量:它是一种特殊的变量,只用于表示类型而不是值。泛型函数的两种使用方法:泛型接口:泛型类:泛型约束:泛型:类型变量:它是一种特殊的变量,只用于表示类型而不是值。function identity(arg: T): T { return arg; }T就是类型变量。我们把这个版本的identity函数叫做泛型,因为它可以适用于多个类型。泛型函数的两种使用方法:1、传入所有的参数,包含类型参数:使用了<>括起来而不是()let原创 2021-10-20 16:32:23 · 116 阅读 · 0 评论 -
$ git config credential.helper store
$ git config credential.helper store安装依赖包的时候,输入密码账号错误,再输入一次$ git config credential.helper store就可重新输入!太有用了!!npm cache clean -f 强制清除缓存,需要以管理员身份打开prowershellgit config --list 可以查询name和邮箱https://stackoverflow.com/questions/15381198/remove-credentials-fr原创 2021-09-18 14:56:25 · 2386 阅读 · 0 评论 -
CSS基础知识点
CSS基础知识点1、什么是盒模型?标准盒模型:box-sizing:content-box(W3C)IE盒模型:box-sizing:border-box(IE)2、行内、块级元素有哪些?行内:块级:区别如何取消行内元素的间隙?3、padding:1px2px3px;则等效于什么?4、什么是边距重叠?什么情况下会发生边距重叠?如何解决边距重叠?5、什么是BFC?如何触发BFC6、那么BFC的原理是什么呢?7、BFC的使用场景有哪些呢8、什么是高度塌陷,清除浮动?9、清除浮动的方法9、样式优先级10、css3原创 2021-08-29 19:00:00 · 705 阅读 · 0 评论 -
ES6中的Class语法糖
什么是classclass就是类,和ES5中的构造函数十分相似,绝大部分功能都是一致的,但是class的写法,能让对象原型的功能更加清晰,更加符合面向对象语言的特点。它是构造函数的另一种写法class Person {}typeof Person // "function"Person.prototype.constructor === Person // true使用通过new来生产一个实例class Person {}let json = new Person()con原创 2021-08-24 10:21:45 · 251 阅读 · 0 评论 -
javaScript的多种继承方式(8种)
这里写目录标题1、原型链继承2、 借用构造函数3、组合继承4、原型式继承5、寄生式继承6、寄生组合式继承7、混入方式继承多个对象8、ES6类继承extends1、原型链继承缺点: 多个实例对引用类型的操作会被篡改。2、 借用构造函数缺点:只能继承父类的实例属性和方法,不能继承原型属性/方法无法实现复用,每个子类都有父类实例函数的副本,影响性能3、组合继承缺点:在使用子类创建实例对象时,其原型中会存在两份相同的属性/方法4、原型式继承缺点: 原型链继承多个实例的引用类型属性指向相同,存原创 2021-08-23 19:58:04 · 321 阅读 · 0 评论 -
this指向,new关键字
一、this原则一般情况下谁调用他就指向谁,普通函数this:this永远指向 调用 包含 自己(this本身) 的 函数 对应的对象。1、 默认绑定非严格模式下 this 指向全局对象(浏览器下指向 Window,Node.js 环境是 Global ),严格模式下,this 绑定到 undefined ,严格模式不允许this指向全局对象。默认绑定的另一种情况在函数中以函数作为参数传递,例如setTimeOut和setInterval等,这些函数中传递的函数中的this指向,在非严格模式指向的原创 2021-08-23 18:01:05 · 263 阅读 · 0 评论 -
Error: Multiple configuration files found. Please remove one: - package.json
问题:如图,因为我在package.json和.babelrc文件中都配置了导致重复配置解决:在package.json或者.babelrc里保留一份配置即可原创 2021-07-01 18:37:34 · 931 阅读 · 0 评论 -
dependencies和devDependencies的区别
dependencies 生产环境 --savedevDependencies 开发环境 --save–dev , 一般安装本地调试的,如eslint等如果自己需要某一依赖,在安装时一定要使用npm install echarts --save或npm install echarts --save–dev,即将依赖配置到package.json中对应的对象中,而非简单使用npm install echarts命令(可以正常安装依赖,但不会配置到package.json文件中),因为如果是协作编程,p原创 2021-06-28 18:30:06 · 221 阅读 · 0 评论 -
前端性能优化——gzip压缩
背景:把js,css,图片等压缩,尽量减少文件的大小,提升响应速度压缩原理:客户端: 请求头中有个Accept-Encoding来标识对压缩的支持服务端:配置启用压缩,压缩的文件类型,压缩方式。当客户端请求到服务端的时候,服务器解析请求头,如果客户端支持gzip压缩,响应时对请求的资源进行压缩并返回给客户端,浏览器按照自己的方式解析,在http响应头,我们可以看到content-encoding:gzip,这是指服务端使用了gzip的压缩方式。如何查看是否压缩?content-encoding是g原创 2021-05-24 11:42:52 · 941 阅读 · 0 评论 -
mobx学习
Mobx:https://cn.mobx.js.org/intro/concepts.htmlMST文档:https://mobx-state-tree.js.org/intro/philosophyMST介绍参考文章:https://juejin.im/post/6844903772972384263Cerebral:https://cerebraljs.com/docs/views/angularjs.htmlMobx适合中小型项目1、js语法编写2、es6的装饰器写法babel插件:[原创 2021-05-10 10:05:16 · 341 阅读 · 0 评论 -
JavaScript 执行机制
JavaScript 执行机制前言因为JavaScript是一门单线程语言,所以我们可以得出结论:JavaScript是按照语句出现的顺序执行的。例子:setTimeout(function(){console.log(‘定时器开始啦’)});new Promise(function(resolve){console.log(‘马上执行for循环啦’);for(var i = 0; i < 10000; i++){i == 99 && resolve();}})原创 2021-05-10 10:01:10 · 117 阅读 · 0 评论 -
重绘和重排
重绘和重排?重排,又叫回流浏览器运行机制:–1、 构建DOM树 生成节点2、 构建渲染树 css3、 布局渲染树 确定渲染位置4、 绘制渲染树 开始渲染重绘: 一个元素外观的改变,会触发元素的重绘。如:color、background-color重排(回流、reflow):元素的规模尺寸、布局、隐藏等行为改变而需要重新构建,这就称为回流重排必定引发重绘重排触发条件:1、 页面元素初始化2、 元素位置改变3、 添加删除可见的DOM元素4、 元素尺寸的改变—— 大小、外边距,边框原创 2021-05-10 09:59:08 · 257 阅读 · 0 评论 -
2021面试准备2
1、async、await和promise2、map和set3、 骨架屏目前大部分项目都是使用Vue、React、Angular框架开发,而这三个框架都是JS触发UI渲染,在JS代码下载解析完成之前,页面不会展示任何内容,这就产生了大家熟知的白屏问题。解决优化白屏问题成为前端必须要关注的问题,以下有几种常规的解决方案:Loading + 客户端渲染(CSR)骨架屏(Skeleton)+ 客户端渲染(CSR)预渲染(PreRender)服务端渲染(SSR)目前这几种方案里,SSR效果最好,原创 2021-05-07 10:20:35 · 141 阅读 · 0 评论 -
ant-design的description组件中给label添加自定义样式
ant-design的description组件中给label添加自定义样式修改前:<Descriptions.Item label={"减免类型">修改后:<Descriptions.Item label={ <span>{"减免类型"}<span style={{color:'red', paddingLeft:'10px',verticalAlign:'middle'}}>*</span></span> }>原创 2021-04-19 11:26:18 · 3799 阅读 · 0 评论 -
cookie,localstorage、sessionStorage的区别
前端本地存储的方式有三种,分别是cookie,localstorage和sessionStorage,他们的区别如下:1、生命周期:cookie:可设置失效时间,没有设置的话,默认是关闭浏览器后失效localStorage:除非被手动清除,否则将会永久保存。sessionStorage: 仅在当前网页会话下有效,关闭页面或浏览器后就会被清除。2、存放数据大小:cookie:4KB左右localStorage和sessionStorage:可以保存5MB的信息。3、http请求:cooki原创 2021-03-25 16:56:58 · 594 阅读 · 0 评论 -
Array.prototype.slice.call()方法详解
摘自:http://blog.csdn.net/i10630226、https://www.jianshu.com/p/c5df0156b229在很多时候经常看到Array.prototype.slice.call()方法,比如Array.prototype.slice.call(arguments),下面讲一下其原理:1、基本讲解1.在JS里Array是一个类 slice是此类里的一个方法 ,那么使用此方法应该Array.prototype.slice这么去用slice从字面上的意思很容易理解就是原创 2021-03-23 15:45:22 · 387 阅读 · 0 评论 -
2021面试前期准备——JS基础(持续更新)
数据类型1、js的基础类型js数据类型: 8种Number、String、Boolean、Undefined、Null、Object、Symbol、BigInt(安全存储、操作大整数)js基础类型:5种String、Number、Boolean、Null、Undefinedjs引用类型:3种Array、function、Object 使用typeOf,结果都是object2、null、undefined、isNaN,NaNnull和undefined的区别null: typeof原创 2021-03-19 15:56:47 · 427 阅读 · 0 评论 -
正则匹配字符串前后不输入空格,中间可以有空格
/^\S.*\S$|(^\S{0,1}\S$)/原创 2021-02-19 16:24:20 · 3860 阅读 · 0 评论 -
vs code格式化快捷键
Visual Studio Code可以通过以下快捷键 格式化代码:On Windows Shift + Alt + FOn Mac Shift + Option + FOn Ubuntu Ctrl + Shift + I原创 2020-12-23 19:56:11 · 601 阅读 · 0 评论 -
JS数组扁平化处理方法总结
1、toStringconst arr = [1, 2, 3, [4, 5, [6, 7]]];const flatten = arr.toString().split(',');console.log(flatten);//["1", "2", "3", "4", "5", "6", "7"]优点:简单,方便,对原数据没有影响缺点:最好数组元素全是数字或字符,不会跳过空位2、joinconst arr = [1, 2, 3, [4, 5, [6, 7]]];const flatten原创 2020-12-21 15:10:45 · 216 阅读 · 0 评论 -
没有package.json文件 saveError ENOENT: no such file or directory, open ‘D:\mobx-test\package.json‘
报错如图:分析:我运行的是npm i -y,单词拼写错误(/ω\)解决办法:npm init -y ,就可以啦!原创 2020-11-20 11:04:35 · 257 阅读 · 0 评论 -
axios中使用finally
业务场景:提交某个表单时,为了防止重复提交,提交后按钮需要置灰,直到提交完成按钮才可点击。如果没有finally函数,则需要在then和catch里都写入恢复按钮的代码,但是有了finally函数,我们只需要把这段代码写入函数中即可,因为finally函数中的逻辑,请求完成之后无论是成功失败都会被执行使用方法:1、 npm i promise.prototype.finally –S2、 在main.js中引用,require("promise.prototype.finally").shim();原创 2020-11-10 15:07:21 · 13062 阅读 · 0 评论 -
header请求中referer的含义或者作用
什么是Referer?Referer 是 HTTP 请求header 的一部分,当浏览器(或者模拟浏览器行为)向web 服务器发送请求的时候,头信息里有包含 Referer 。比如我在www.sojson.com 里有一个www.baidu.com 链接,那么点击这个www.baidu.com ,它的header 信息里就有:Referer=https://www.sojson.com由此可以看出来吧。它就是表示一个来源。看下图的一个请求的 Referer 信息。这里有一个小问题要转载 2020-11-03 16:06:12 · 8819 阅读 · 0 评论 -
No mapping for the Unicode charactor exists in the target multi-byte code page解决办法
遇到的问题:No mapping for the Unicode charactor exists in the target multi-byte code page;解决:nginx的安装目录中不能出现中文,将中文的文件夹名改成英文就可以了其他:nginx的下载、安装、启动1、nginx下载地址: http://nginx.org/en/download.html我选择的是windows的稳定版本,可以视情况自己选择:2、下载后解压,可以直接运行nginx.exe运行,也可以运行cmd原创 2020-11-02 16:26:25 · 1581 阅读 · 0 评论 -
计算属性名 ES6
MDN解释:从ECMAScript 2015开始,对象初始化语法开始支持计算属性名。其允许在[]中放入表达式,计算结果可以当做属性名。这种用法和用方括号访问属性非常类似,也许你已经用来读取和设置属性了。现在同样的语法也可以用于对象字面值了:// Computed property names (ES6)var i = 0;var a = { ["foo" + ++i]: i, ["foo" + ++i]: i, ["foo" + ++i]: i};console.log(a.foo原创 2020-10-30 15:40:39 · 438 阅读 · 0 评论