- 博客(31)
- 收藏
- 关注
RSS订阅原创 一文了解webpack和vite中Tree-Shaking
1.1 摇树优化（Tree Shaking）是Webpack中一种用于优化JavaScript代码的技术。它的目标是。1.2 Tree-shaking 它的名字来源于通过摇晃（shake）JavaScript代码的抽象语法树（AST），是一种用于优化JavaScript代码的技术，主要用于，使得最终生成的代码包含应用程序中实际使用的部分。这主要用于减小应用程序的体积，提高加载性能。
2024-05-10 20:34:13
1845
原创 React状态管理比较&原理
Redux：Redux 是一个行业标准的状态管理库，它利用 flux 架构来创建不可变的数据存储。优点提供可预测的、一致的状态管理，因为状态总是通过一个称为 reducer 的纯函数，从上一个状态和派发的操作中派生出来的。便于调试和测试，因为状态和动作都是可序列化的，可以使用 devtools 或 Redux 工具包进行检查和操作。由于状态是集中化和模块化的，逻辑与用户界面组件是分离的，因此便于扩展和维护。缺点存在大量模板代码、陡峭的学习曲线和冗长的语法。
2024-04-11 16:24:56
503
翻译 regeneratorRuntime is not defined
regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容async/await的语法。值得注意的是，如果你是node.js的运行环境，由于node.js已经支持的async/await，固无需配置。但如果你用了比如vue ssr之类的，也就是仍旧使用了webpack打包，并有node.js运行，可能需要将其排除掉，或者根本不使用babel-loader。是webpack打包生成的全局辅助函数，由babel生成，用于兼容async/await的语法。
2023-06-05 15:00:40
1552
原创 error TS2786: ‘SortableBody‘ cannot be used as a JSX component.
react升级18版本问题
2022-11-02 12:00:38
1761
原创 error TS2322: Type {} is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes
error TS2322: Type {} is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes
2022-11-02 11:38:48
5491
原创 this.props.histroy.push中 state 传参问题
问题描述【hash路由】利用this.props.history.push() 在发起路由跳转时，将参数赋值给state传参。【写法如下】this.props.history.push({ pathname: '/noAccess', state: { name: "lmm"}， search: "name" });在 /noAccess 页面下获取参数const { location: { state = {}, search = "" } } = this.propsconsole.log
2022-05-18 12:16:10
1452
原创 The react-scripts package provided by Create React App requires a dependency
react脚手架npm start报错问题在使用react脚手架工具npx create-react-app my-app构建react应用运行时会报错，原因：webpack版本过高解决方法在构建的项目中增加.env文件，并在文件中增加 SKIP_PREFLIGHT_CHECK=true 即可。原理永远禁用此预检检查...
2021-08-02 20:03:44
2707
原创 接口请求方式ajax、fetch、axios比较分析
1、综述请求方式底层依赖ajax使用XMLHttpRequest对象来请求数据，原生JS实现fetchfetch是前端发展的一种新技术产物（1）fetch是一个低层次的API，你可以把它考虑成原生的XHR。但fetch不是ajax的进一步封装，而是原生JS，没有使用XMLHttpRequest对象。（2）fetch是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。axiosaxios不是一种新的技术。axios 是一个基于Pr
2021-03-28 12:19:35
189
原创 react 新手引导如何选择
1、项目背景：react16+ 、 ant-design4+2、开发要求：尽量少的开发量3、备选方案及其分析名称githubdemo官网react-guidehttps://github.com/liuyangjike/react-guidereactourhttps://github.com/elrumordelaluz/reactourhttps://codesandbox.io/s/6z56m8x18k?module=/App.js&file=
2020-12-16 21:00:36
1149
2
原创 修改远程git仓库密码 - 报错 fatal: Authentication failed for
修改远程git仓库密码 - 报错 fatal: Authentication failed for问题描述：由于一些原因，需要修改github登陆密码，修改完成后本地vscode连接的远程仓库无法再提交代码！具体报错信息如下：Missing or invalid credentials.remote: HTTP Basic: Access deniedfatal: Authentication failed for 'https://git.baidu.com/name/hello.git
2020-12-16 20:43:28
1475
原创 react项目中接入Nginx反向代理实现跨域
一、项目背景说明：本项目使用react脚手架npx create-react-app my-app工具直接构建，请求接口方式使用的是axios。二、 具体操作步骤http-proxy-middlewarenpm install http-proxy-middlewaresrc文件下创建一个 setupProxy.js文件setupProxy.js手动配置接口请求的写法备注：如果不成功可以先确认一下电脑上是否安装了nginx...
2020-08-14 17:45:16
2221
原创 JS事件循环中的宏任务和微任务执行顺序
1. 宏任务和微任务事件其中微任务的优先级高于微任务，括号内为事件运行环境宏任务微任务I/O事件/onClick点击事件process.netTick （Node）setTimeoutNutationObserver（浏览器）setImmediate（Node）PromisesetIntervalrequestAnimationFrame（...
2020-04-01 18:01:54
2749
1
转载 图解HTTPS
我们都知道HTTPS能够加密信息，以免敏感信息被第三方获取。所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。HTTPS简介HTTPS其实是有两部分组成：HTTP + SSL / TLS，也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过TLS进行加密，所以传输的数据都是加密后的数据。具体是如何进行加密，解密，验证的，且看下图。客户端...
2019-12-05 11:44:46
507
原创 ES6箭头函数详解
箭头函数、没有prototype、没有自己的this指向、不可以使用arguments、自然不可以new。函数体内this的指向是定义时所在的对象，而不是使用时所在的对象，箭头函数与普通函数之间的区别对this的关联。内置this的值，取决于箭头函数在哪里定义，而非箭头函数执行的上下文环境。new 不可用。箭头函数不能用new关键字来实例化对象，否则报错。this指向不会改变。函数内置...
2019-11-21 16:17:14
158
原创 闭包
如果没准备真的无从下口，大概知道但又不知道从哪说。今天总结一下套路说法1. 从闭包的定义开始首先从闭包的定义来说是：闭包是有权访问另一个函数作用域中的变量的函数。3. 引出作用域其中的作用域是指，在某个空间范围内的，可以对数据进行读写操作的区域。对于变量而言它只有全局作用域和函数作用域，没有块级作用域。全局作用域呢：全局作用域下的变量，在任一函数内部都可以访问，定义的变量只有在程序全部运行...
2019-11-21 16:11:47
165
原创 滴滴前端面经_网约车
编程题给定一个字符串“adgeidjdddiggg”删除出现次数最小的字符，输出“dgiddddiggg”思路：输入为字符串，输出为字符串情况 => 巧用对象obj={}function text1(str) { let len = str.length let obj = {} let chart // 先转成对应的对象，统计出现次数{ a: 1, d: 5, g...
2019-11-21 16:09:54
591
原创 0.1+0.2 !== 0.3原因？解决办法（前端）
1、产生原因JS中的基本数据类型6中：Number、Undefined、Null、Boolean、String、 Symbol 。其中JS数字运算时存在精度缺失问题。其主要原因是因为在计算机中，无论是定点数还是浮点数都是以多位二进制的方式进行存储和运算的。在JS中数字采用的IEEE 754的双精度标准进行存储，我们可以无需知道他的存储形式，只需要简单的理解成就是存储一个数值所使用的二进制位数比...
2019-11-20 20:22:34
1992
原创 JavaScript数组操作方法总结（根据是否改变原数组分类）
JS操作数组常用方法是否改变元素数组slice()是否改变原数组：否语法：arrayObject.slice(start,end)作用：返回参数：join()是否改变原数组：否语法：作用：返回参数：concat()是否改变原数组：否语法：作用：返回参数：splice()是否改变原数组：是语法：作用：返回参数：push()是否改变原数组...
2019-10-13 02:04:59
424
原创 快手---效率部门---web前端开发---面经
1. 说一下浏览器缓存浏览器缓存分为强缓存和协商缓存；强缓存：expiresHttp1.0 中的标准，表明过期时间，注意此处的时间都是指的是服务器的时间。可以看到过期时间被设定为了：Thu, 28 Sep 2017 06:38:37 GMT存在的问题：服务器时间与客户端时间的不一致，就会导致缓存跟期待效果出现偏差。Cache-ControlHttp1.1 中的标准，可以看成...
2019-10-12 21:56:37
3099
3
原创 nextTick, setTimeout 以及 setImmediate 三者的执行顺序
这个问题是有关执行顺序和Event Loop的。关于Event Loop和任务队列等概念，可以先阅读我引用中的文章，本文主要分析一些存在的疑惑点。下面这个例子比较典型：setImmediate(function(){ console.log(1);},0);setTimeout(function(){ console.log(2);},0);new Promise(fu...
2019-10-12 21:55:14
1551
1
原创 拼多多笔试题-编程
【题目本意：将数组结构数据转成链表结构，当时没看懂…呜呜…】输入：var arr = [ {id : 1, parents : null}, {id : 2 , parents : 1}, {id : 3 , parents : 2},]输出：var obj = { obj1: { id:1, parents:null, charld:{ id:2...
2019-09-26 21:05:59
378
原创 JavaScript四种定时器
JS的四种定时器剖析setTimeout VS setIntervalsetImmediaterequestAnimationFramesetTimeout VS setIntervalsetTimeout: 设置一个定时器，在定时器到期后执行一次函数或代码段。setTimeout() 只执行 code 一次。setInterval() 方法可按照指定的周期（以毫秒计）来调...
2019-09-14 16:23:35
554
转载 分享 50 个完整的 React Native 项目
一、前言先更正下，不然又有人要出来打假了。标题说是 50 个，但其实目前只有 43 个。那为啥标题非说 50 个？！可是如果叫《43 个完整.....》好像不太好听吧？嘿嘿~ 不过我是每个月 15 号左右去更新的，所以下个月肯定就超过 50 个了。http://www.jianshu.com/p/470606826b12...
2018-11-24 09:32:20
238
原创 angularJS中为什么推荐使用$timeout与$interval而不是JS原生setTimeout() setInterval()方法
angularJS中为什么推荐使用$timeout与$interval而不是JS原生setTimeout() setInterval()方法首先介绍在JavaScript中setTimeout()方法:表示达到延迟执行某个方法的效果；setInterval()方法：表示每隔一段时间调用一次特定的JS方法；为什么在angularjs中不建议使用JS的这两种方法呢？因为这两种方法在使用时都需...
2018-11-15 14:35:28
1595
原创 循环多层嵌套对象中的key值
循环多层嵌套对象中的key值假设有多层嵌套对象obj，试循环出obj中所有非Object类型的key值，输出结果[a,b,c,d,e,f,g,h,i]//定义一个obj对象obj={ a:'12', b:'23', first:{ c:'34', d:'45', second:{ e:'56', f:'67', thre...
2018-11-09 15:02:40
3688
原创 float属性及清除浮动
float属性及清除浮动float属性float 属性定义元素在哪个方向浮动。目前所有主流浏览器都支持 float 属性。属性值值描述left元素向左浮动。right元素向右浮动。none默认值。元素不浮动，并会显示在其在文本中出现的位置。inherit规定应该从父元素继承 float 属性的值。1.浮动对自己的影响块级元素/行内元素设...
2018-11-07 16:06:11
477
原创 Bootstrap3和Bootstrap4区别
Bootstrap3和Bootstrap4区别首先引入Bootstrap3和4官网连接； Bootstrap3 VS Bootstrap4.不同点Bootstrap3Bootstrap4LessSass语言编写4种栅格类5种栅格类使用px为单位使用rem和em为单位（除部分margin和padding使用px）使用push和pull向左右移...
2018-10-26 18:24:11
27202
2
原创 JS数据类型及判断方法总结
JS数据类型及判断方法总结数据类型分类typeOf判断法instanceOf判断法object.prototype.toString判断法数据类型分类JS数据类型共有6种：5种基本数据类型+引用数据类型；5种基本数据类型：undefined,string,boolean,null,number（便于记忆缩写为USB+2N）；引用数据类型object：Function,Array,Date,...
2018-10-24 17:14:10
292
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人