学习记录
文章平均质量分 60
是梦梦啊
只要我够勤快,咸鱼总会翻身哒!
展开
-
【CSS:基础】层叠上下文、盒模型和弹性布局
MDN解释:我们假定用户正面向(浏览器)视窗或网页,而HTML元素沿着其相对于用户的一条虚拟的Z轴排开,层叠上下文就是对这些HTML元素的一个三维构想。众HTML元素基于其元素属性按照优先级顺序占据这个空间。原创 2023-02-17 11:17:06 · 440 阅读 · 1 评论 -
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 · 1005 阅读 · 0 评论 -
【git:踩坑】请用git reset --soft HEAD^
简直是天坑,上周我在快要下班的时候提交代码,用了git reset --head HEAD^,虽然回退到之前的版本了,但也直接把之前的代码删除了……慎用,我当时是百度出来的,也没仔细看,就直接上手了,当时真的是脑壳晕了。但是这个只能回复提交了commit的,我当时有两个文件是没有commit的,也直接没有了,于是我只好手动ctrl+z,还好找回来了 T-T。git reset --hard HEAD^:删除工作空间的改动代码,撤销commit且撤销add。原创 2022-12-26 13:49:34 · 5965 阅读 · 2 评论 -
【基础恶补】JavaScript数组的一些方法,reduce,filter,reverse,map等
方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并成一个新数组返回。map 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。负整数从数组中的最后一个元素开始。push() 将一个或多个元素添加到数组的末尾,并返回该数组的新长度。:一个新的、通过测试的元素组成的数组,如果没有符合条件的,则返回一个空数组。原创 2022-12-02 19:08:47 · 2219 阅读 · 3 评论 -
【TypeScirpt学习记录】二
但由于 JavaScript 中,对于 obj[prop] 形式的访问会将数字索引访问转换为字符串索引访问,也就是说, obj[599] 和 obj[‘599’] 的效果是一致的。因此,在字符串索引签名类型中我们仍然可以声明数字类型的键。any和unknown的最大区别:any放弃了所有类型检查,但是unknown并没有。never被称为Bottom Type,是整个类型系统层级中最底层的类型。可以将对象中的所有键转换为对应字面量类型,再组合成联合类型。索引签名类型:快速声明一个键值类型一致的类型结构。原创 2022-11-02 18:44:17 · 339 阅读 · 0 评论 -
【TypeScirpt学习记录】一
上面的code和status,确定了值的集合,可以获取精确的提示,因为一般code和status都是和后端约定好的一些固定值。,但是type会提示重复定义(interface可以定义多次,但同一个type只能定义一次)type将一个函数签名、一组联合类型、一个工具类型等等抽离成一个完整独立的类型。上文的status就是字面量类型,它比原始类型更为精确,可以分为一下几类。联合类型的常用场景之一是通过多个对象类型的联合。交叉类型继承的,interface是使用。根据vip类型来推导其他的类型。原创 2022-10-31 18:04:27 · 271 阅读 · 0 评论 -
【问题记录】next项目打包构建报错(npm WARN deprecated @babel/polyfill@7.12.1)
npm WARN已弃用core-js@2.6.12: core-js@❤️.3不再维护,由于存在大量问题,不建议使用。请将您的依赖项升级到core-js的实际版本。更多信息请参见@babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill)。npm WARN notsup不支持引擎next@12.3.1: wanted: {“node”:“>=12.22.0”}(当前:{“node”:“12.18.3”,“npm”:“6.14.7”})原创 2022-10-13 14:34:06 · 2355 阅读 · 2 评论 -
【面试准备-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 · 1373 阅读 · 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 · 288 阅读 · 0 评论 -
【react踩坑记录2】umijs中如何在首页中document.ejs引用全局变量
首先,在umijs中,document.ejs文件就对应index.html,官方原话:1、 新建 src/pages/document.ejs,umi 约定如果这个文件存在,会作为默认模板2、模板里可通过 context 来获取到 umi 提供的变量,context 包含:route,路由信息,需要打包出多个静态 HTML 时(即配置了 exportStatic 时)有效config,用户配置信息 比如:<link rel="icon" type="image/x-icon" h原创 2022-02-03 12:05:01 · 5041 阅读 · 1 评论 -
【react项目踩坑记录1】antd中table的rowSelection如何设置disabled
有一个需求是将antd中table的复选框直接禁用,查阅了antd文档后,我发现并没有相关的说明,最后查到一个方法,发现可以实现效果,即在rowSelection中加入getCheckboxProps方法,具体方法如下:rowSelection={ selectedRowKeys: selectedRoles, getCheckboxProps(value) { return { disabled: true, }; },}修改前:修改后:...原创 2022-02-03 11:52:07 · 2996 阅读 · 0 评论 -
[React Hook | useMemo、usecallBack] |学习记录
useCallback:把内联回调函数及依赖项数组作为参数传入 useCallback,它将返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新.useCallback(fn,deps) 相当于 useMemo(() => fn, deps)useMemo:把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算如果没有提供依赖项数组,useMemo 在每次渲原创 2021-10-20 18:28:08 · 148 阅读 · 0 评论 -
[Typescript 泛型学习] |学习记录
[Typescript 泛型学习] |学习记录泛型:类型变量:它是一种特殊的变量,只用于表示类型而不是值。泛型函数的两种使用方法:泛型接口:泛型类:泛型约束:泛型:类型变量:它是一种特殊的变量,只用于表示类型而不是值。function identity(arg: T): T { return arg; }T就是类型变量。我们把这个版本的identity函数叫做泛型,因为它可以适用于多个类型。泛型函数的两种使用方法:1、传入所有的参数,包含类型参数:使用了<>括起来而不是()let原创 2021-10-20 16:32:23 · 118 阅读 · 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 · 711 阅读 · 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 · 254 阅读 · 0 评论 -
javaScript的多种继承方式(8种)
这里写目录标题1、原型链继承2、 借用构造函数3、组合继承4、原型式继承5、寄生式继承6、寄生组合式继承7、混入方式继承多个对象8、ES6类继承extends1、原型链继承缺点: 多个实例对引用类型的操作会被篡改。2、 借用构造函数缺点:只能继承父类的实例属性和方法,不能继承原型属性/方法无法实现复用,每个子类都有父类实例函数的副本,影响性能3、组合继承缺点:在使用子类创建实例对象时,其原型中会存在两份相同的属性/方法4、原型式继承缺点: 原型链继承多个实例的引用类型属性指向相同,存原创 2021-08-23 19:58:04 · 324 阅读 · 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 · 266 阅读 · 0 评论 -
Error: Multiple configuration files found. Please remove one: - package.json
问题:如图,因为我在package.json和.babelrc文件中都配置了导致重复配置解决:在package.json或者.babelrc里保留一份配置即可原创 2021-07-01 18:37:34 · 940 阅读 · 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 · 224 阅读 · 0 评论 -
前端性能优化——gzip压缩
背景:把js,css,图片等压缩,尽量减少文件的大小,提升响应速度压缩原理:客户端: 请求头中有个Accept-Encoding来标识对压缩的支持服务端:配置启用压缩,压缩的文件类型,压缩方式。当客户端请求到服务端的时候,服务器解析请求头,如果客户端支持gzip压缩,响应时对请求的资源进行压缩并返回给客户端,浏览器按照自己的方式解析,在http响应头,我们可以看到content-encoding:gzip,这是指服务端使用了gzip的压缩方式。如何查看是否压缩?content-encoding是g原创 2021-05-24 11:42:52 · 944 阅读 · 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 · 344 阅读 · 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 · 118 阅读 · 0 评论 -
重绘和重排
重绘和重排?重排,又叫回流浏览器运行机制:–1、 构建DOM树 生成节点2、 构建渲染树 css3、 布局渲染树 确定渲染位置4、 绘制渲染树 开始渲染重绘: 一个元素外观的改变,会触发元素的重绘。如:color、background-color重排(回流、reflow):元素的规模尺寸、布局、隐藏等行为改变而需要重新构建,这就称为回流重排必定引发重绘重排触发条件:1、 页面元素初始化2、 元素位置改变3、 添加删除可见的DOM元素4、 元素尺寸的改变—— 大小、外边距,边框原创 2021-05-10 09:59:08 · 264 阅读 · 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 · 144 阅读 · 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 · 391 阅读 · 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 · 429 阅读 · 0 评论 -
正则匹配字符串前后不输入空格,中间可以有空格
/^\S.*\S$|(^\S{0,1}\S$)/原创 2021-02-19 16:24:20 · 3877 阅读 · 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 · 218 阅读 · 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 · 1588 阅读 · 0 评论 -
react学习记录(一)
1、纯函数,不能改变传入的参数,例如:function add(a,b) { return a+b } 就是一个纯函数,所有react组件都必须像纯函数一样保证props不被修改2、组件分为函数组件和class组件,分别书写为:函数组件:function Welcome(props){ return <h1>Hello, {props.name}</h1>}它接收唯一带有数据的“props”(代表属性)对象并返回一个react元素class组件:class Wel原创 2020-10-27 17:29:40 · 166 阅读 · 0 评论 -
dependencies和devDependencies的区别
先是字面意思:dependencies 表示 生产环境devDependencies 表示 开发环境结合项目解释:dependencies是项目依赖,要发布到生产环境的,例如axios,vue-router,echarts等devDependencies 是开发依赖的,仅在编写过程中有用,例如eslint,less, polyfill等安装时 npm i xxx -save 代表dependencies ,npm i xxx -save-dev 代表devDependencies...原创 2020-09-17 10:00:58 · 896 阅读 · 0 评论 -
fromCharCode() 方法
将 Unicode 编码转为一个字符:所有主要浏览器都支持 fromCharCode() 方法语法String.fromCharCode(n1, n2, …, nX)参数值n1, n2, …, nX 必需。一个或多个 Unicode 值,即要创建的字符串中的字符的 Unicode 编码。实例1:var n = String.fromCharCode(65);n 输出结果: A实例2:var n = String.fromCharCode(72,69,76,76,79);n 输出结果:原创 2020-09-14 12:01:28 · 2281 阅读 · 0 评论 -
charCodeAt()和charAt()的使用及区别
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。语法:stringObject.charCodeAt(index)index 必需。表示字符串中某个位置的数字,即字符在字符串中的下标。ASCII码表:详情表见:百度ASCII表charAt() 方法可返回指定位置的字符。stringObject.charAt(index)index 必需。表示字符串中某个位置的数字,即字符在字符串中的下标。注释:字符串中第一个字符的下原创 2020-07-16 11:12:41 · 3909 阅读 · 0 评论 -
git常用指令
git stash暂存git stash save 'msg’执行存储时,msg为需要添加的备注,方便查找git stash list可以查看暂存了哪些存储git stash show显示做了哪些改动,默认show第一个存储的,如果要显示其他,git stash show @{index}, index从0开始,代表第一个git stash apply恢复某个存储,但不会把存储从列表中删除,所以可以多次恢复,如果要指定恢复某一个,git stash apply @{index}, inde原创 2020-05-15 16:39:37 · 159 阅读 · 0 评论 -
学习笔记 Ajax与Comet
今日学习2小时:总结:Ajax 是无需刷新页面就能够从服务器取得数据的一种方法。1.ajax运作的核心对象是XMLHttpRequest(XHR)对象2.同源策略是对XHR的一个主要约束,它为通信设置了“相同的域,相同的端口,相同的协议”这一限制。3.解决跨域的方案称为CORS,又叫跨域源资源分享,ie8通过XDomainRequest对象支持CORS,其他浏览器通过XHR对象原生支持C...原创 2020-04-12 20:36:56 · 182 阅读 · 0 评论 -
Vue.use()和vue.prototype.$xxx
vue.use()官方说明:”用于安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。当 install 方法被同一个插件多次调用,插件将只会被安装一次。“总结:插件对象必须要有install初始化插件对象需要通过vue.use()vue.prototy...原创 2020-04-08 15:40:05 · 445 阅读 · 0 评论 -
学习记录
感觉自己真的变成废材了,想要跳槽,想要技术变强却一直没有行动,呆在公司的优化组,技术也一直没有提升,迟早要被淘汰…今天开始,在这里记录每一次学习的时间和一些要点嘻嘻嘻虽然现在的我菜,但不代表以后的我···2020-02-02学习react的redux 75mindispatch一个action,reducer生效改变state...原创 2020-02-02 23:37:50 · 115 阅读 · 0 评论