- 博客(54)
- 收藏
- 关注
RSS订阅原创 【前端性能优化指南】首屏加载优化、内存泄漏、CSS页面性能优化、CSS Sprites等
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能。内存泄露的解释：程序中己动态分配的堆内存由于某种原因未释放或无法释放。根据JS的垃圾回收机制，当内存中引用的次数为0的时候内存才会被回收全局执行上下文中的对象被标记为不再使用才会被释放。
2022-11-04 11:21:27
1709
7
原创 【1024 | 程序员节】浅谈前端开发中常用的设计模式——适配器模式、工厂模式、单例模式等
它提供了一种创建对象的最佳方式。在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。实现了创建者和调用者分离，工厂模式分为简单工厂、工厂方法、抽象工厂模式。保证一个类只有一个实例，并且提供一个访问该全局访问点。MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化我们的开发效率。比如说我们实验室在以前项目开发的时候，使用单页应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。
2022-10-23 14:11:17
2103
153
原创 【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等
addEventListener()方法，用于向指定元素添加事件句柄，它可以更简单的控制事件。语第一个参数是事件的类型(如 “click” 或 “mousedown”)。第二个参数是事件触发后调用的函数。第三个参数是布尔值，用于描述事件是冒泡还是捕获。(该参数是可选的。)冒泡和捕获。事件传递定义了元素事件触发的顺序，如果你将 P 元素插入到 div 元素中，用户点击 P元素，在冒泡中，内部元素先被触发，然后再触发外部元素，在捕获中，外部元素先被触发，再触发内部元素。对象的状态不受外部影响。
2022-10-19 10:00:52
2685
122
原创 【学姐面试宝典】前端基础篇Ⅳ（JavaScript）
当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，包括但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条、鼠标移动、窗口大小更改等。加载的文件，可以是 JS、图片、CSS、HTML 等。
2022-10-16 11:51:55
2421
92
原创 【学姐面试宝典】前端基础篇Ⅲ（CSS）
**前言**>博主主页👉🏻[蜡笔雏田学代码](https://blog.csdn.net/xuxuii?spm=1011.2415.3001.5343)>专栏链接👉🏻[【前端面试专栏】](https://blog.csdn.net/xuxuii/category_11816610.html)>今天继续学习前端面试题相关的知识！>感兴趣的小伙伴一起来看看吧~🤞
2022-10-11 11:25:28
1432
24
原创 【学姐面试宝典】—— 前端基础篇Ⅱ（HTTP/HTML/浏览器）
# Doctype 作用，严格模式与混杂模式如何区分，有何意义作用是`Doctype 声明于文档最前面，告诉浏览器以何种方式来渲染页面。`这里有两种模式，`严格模式`和`混杂模式`。> - 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 >- 混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。
2022-10-08 10:17:50
2238
70
原创 【学姐面试宝典】—— 前端基础篇Ⅰ（HTTP/HTML/浏览器）
http 和 https 的基本概念 - `http: `超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服 务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传 输协议，它可以使浏览器更加高效，使网络传输减少。 - `https: `是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 **(https 的 SSL 加密是在传输层实现
2022-09-27 10:11:13
2244
68
原创 【前端进阶】-TypeScript类型声明文件详解及使用说明
今天几乎所有的JavaScript应用都会引入许多第三方库来完成任务需求。这些第三方库不管是否是用TS编写的，最终都要编译成JS代码，才能发布给开发者使用。我们知道是TS提供了类型，才有了代码提示和类型保护等机制。但在项目开发中使用第三方库时，你会发现它们几乎都有相应的TS类型，这些类型是怎么来的呢？类型声明文件类型声明文件：用来为已存在的JS库提供类型信息。这样在TS项目中使用这些库时，就像用TS一样，都会有代码提示，类型保护等机制了。TS的两种文件类型类型声明文件的使用说明。
2022-09-19 08:35:20
10206
139
原创 【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型
**前言**>博主主页👉🏻[蜡笔雏田学代码](https://blog.csdn.net/xuxuii?spm=1011.2415.3001.5343)>专栏链接👉🏻[【TypeScript专栏】](https://blog.csdn.net/xuxuii/category_11979920.html)>前两篇文章讲解了TypeScript的一些高级类型 >详细内容请阅读如下：🔽>[【前端进阶】-TypeScript高级类型 | 交叉类型、索引签名类型、映射类型](https://blo
2022-09-12 09:22:02
13860
200
原创 【前端进阶】-TypeScript高级类型 | 交叉类型、索引签名类型、映射类型
>博主主页👉🏻[蜡笔雏田学代码](https://blog.csdn.net/xuxuii?spm=1011.2415.3001.5343)>专栏链接👉🏻[【TypeScript专栏】](https://blog.csdn.net/xuxuii/category_11979920.html)>上篇文章讲解了TypeScript部分高级类型 >详细内容请阅读如下：🔽>[【前端进阶】-TypeScript高级类型 | 类的初始化、构造函数、继承、成员可见性](https://blog.csdn
2022-09-07 08:11:44
10624
209
原创 【前端进阶】-TypeScript高级类型 | 类的初始化、构造函数、继承、成员可见性
class类类型兼容性交叉类型泛型 和 keyof运算符索引签名类型 和 索引查询类型映射类型首先来学习一下class类中的一些基本使用。
2022-09-05 09:44:13
2458
122
原创 【TypeScript基础】TypeScript之常用类型（下）
**前言**>博主主页👉🏻[蜡笔雏田学代码](https://blog.csdn.net/xuxuii?spm=1011.2415.3001.5343)>专栏链接👉🏻[【TypeScript专栏】](https://blog.csdn.net/xuxuii/category_11979920.html)>上篇文章讲解了TypeScript的一些常用类型，👉🏻详细内容请阅读[【TypeScript基础】TypeScript之常用类型（上）](https://blog.csdn.net/xux...
2022-08-31 10:06:16
2551
132
原创 【TypeScript基础】TypeScript之常用类型（上）
所有的 JS 代码都是 TS 代码。JS 有类型（比如：number/string等），但是JS 不会检查变量的类型是否发生变化。而TS 会检查。TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。可以将 TS 中的常用基础类型细分为两类：1. JS 已有类型，2.TS 新增类型。JS已有类型。Object（包括：数组，对象，函数等）。TS 新增类型联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等。......
2022-08-29 09:38:35
4524
82
原创 【TypeScript介绍】一文带你初步了解TypeScript
TypeScript(简称TS)是JavaScript的超集（JS有的TS都有）。TypeScript = Type + JavaScript（在JS的基础之上，为JS添加了类型支持）//TS代码：有明确的类型，即：number（数值类型） let age1 : number = 18 //JS代码：无明确类型 let age2 = 18TypeScript是微软开发的开源编程语言，可以在任何运行JavaScript的地方运行（浏览器等）...
2022-08-24 10:49:01
4505
106
原创 【Mobx和React的职责划分】Todos综合案例分析（附源码）
博主主页👉🏻蜡笔雏田学代码专栏链接👉🏻React专栏之前学习了Mobx集中状态管理工具参考文章👉🏻【MobX集中状态管理工具】MobX真的取代了Redux吗今天来学习关于Mobx的一个小案例！感兴趣的小伙伴一起来看看吧~🤞...
2022-08-22 08:36:07
2299
118
原创 【MobX集中状态管理工具】MobX真的取代了Redux吗
一个可以和React良好配合的集中状态管理工具，和Redux解决的问题相似，都可以独立组件进行集中状态管理，mobx和react的关系，相当于vuex和vue。1️⃣初始化mobx的过程是怎样的？声明数据 => 响应式处理 => 定义action函数 => 实例化导出2️⃣mobx如何配合react，需要依赖什么包？mobx-react-lite作为连接包，导出observer方法，包裹组件（只能和函数组件配合）3️⃣模块化解决了什么问题？维护性问题4️⃣如何实现mobx的模块化？......
2022-08-20 08:45:45
3649
112
原创 【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API
博主主页👉🏻蜡笔雏田学代码专栏链接👉🏻React专栏之前学习了react-router-dom5版本的相关内容参考文章👉🏻React路由组件传参的三种方式和 【React路由】编程式路由导航回顾上篇文章👉🏻【React Router 6 快速上手一】，今天来学习react-router-dom6版本的另一些相关知识！感兴趣的小伙伴一起来看看吧~🤞.........
2022-08-17 09:06:16
12267
135
原创 【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet
react-router: 路由的核心库，提供了很多的：组件、钩子。包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 等。等。与React Router 5.x 版本相比，改变了什么？内置组件的变化：移除，新增等。变为等。useParams、、useMatch等。官方明确推荐函数式组件了！！！…......
2022-08-15 08:49:48
14854
130
原创 《React扩展知识二》PureComponent / render props / Error boundary /组件通信方式总结
博主主页👉🏻蜡笔雏田学代码专栏链接👉🏻React专栏接上一篇文章react的扩展知识，今天来学习React的另外一些扩展知识感兴趣的小伙伴一起来看看吧~🤞
2022-08-13 08:38:41
3466
100
原创 《React扩展知识一》setState更新状态2种写法/ lazyLoad / Fragment / Context / Hooks
对象式的setState是函数式的setState的简写方式(语法糖)使用原则：如果新状态不依赖于原状态 ===>使用对象方式如果新状态依赖于原状态 ===>使用函数方式如果需要在setState()执行后获取最新的状态数据, 要在第二个callback函数中读取。...............
2022-08-10 09:15:28
9238
118
原创 【React-Hooks进阶】useState回调函数的参数 / useEffect发送网络请求/ useRef / useContext
前言参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用。语法规则语法选择代码useEffect - 发送网络请求使用场景语法要求正确写法在，然后把这个函数包装成同步...
2022-08-09 09:12:09
18252
111
原创 【React-Hooks基础】入门级详解——useState / useEffect /自定义hook
React体系里组件分为 和 经过多年的实战，函数组件是一个更加匹配React的设计理念 ，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生.注意点：在hooks出现之前，react先后尝试了 mixins混入，HOC高阶组件，render-props等模式但是都有各自的问题，比如mixin的数据来源不清晰，高阶组件的嵌套问题等等class组件就像一个厚重的‘战舰’ 一样，大而全，提供
2022-08-08 08:39:19
25446
92
原创 【Redux】如何实现多组件数据共享
1️⃣定义一个Person组件，和Count组件通过redux共享数据。2️⃣为Person组件编写：reducer、action，配置constant常量。3️⃣重点：Person的reducer和Count的Reducer要使用combineReducers进行合并。合并后的总状态是一个对象！！！4️⃣交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。今天的分享就到这里啦✨\textcolor{red}{今天的分享就到这里啦✨}今天的分享就到这里啦✨。.........
2022-08-05 09:38:58
8905
115
原创 ＜react求和案例＞react-redux基本使用与优化——Provider/mapDispatch
不能使用任何redux的api，只负责页面的呈现、交互等。负责和redux通信，将结果交给UI组件。2️⃣如何创建一个容器组件———依靠react-redux的connect函数connect(mapStateToProps,mapDispatchToProps)(UI组件)mapStateToProps：映射状态，返回值是一个对象mapDispatchToProps：映射操作状态的方法，返回值是一个对象容器组件中的store是靠props传进去的，而不是在容器组件中直接引入。......
2022-08-04 12:34:48
3560
89
原创 Redux求和案例详解版教程
1️⃣去除Count组件自身的状态2️⃣src下建立-src-redux-store.js-count_reducer.js3️⃣。
2022-07-23 10:11:59
1728
106
原创 一文带你了解redux的工作流程——action/reducer/store
redux及其工作流程和案例分析感兴趣的小伙伴一起来看看吧~
2022-07-21 09:44:26
2934
107
原创 React UI组件库——如何快速实现antd的按需引入和自定义主题
按照配置主题的要求，自定义主题需要用到less变量覆盖功能。我们可以引入customize-cra中提供的less相关的函数addLessLoader来帮助加载less样式，同时修改config-overrides.js文件。安装less和less-loader想要修改less文件需要安装less。修改完之后编译less文件需要安装less-loader。修改文件//配置具体的修改规则const{{这里利用了less-loader的modifyVars配置主题。......
2022-07-18 09:37:30
4972
105
原创 【React路由】编程式路由导航和withRouter的使用——push / replace
借助this.props.history对象上的API对操作路由跳转、前进、后退。
2022-07-16 10:45:18
3768
102
原创 React路由组件传参的三种方式——params、search、state
当点击消息1这个导航链接时，展示下方对应的Detail路由组件，并向这个组件传递params参数（ID，TITLE，CONTENT）信息。在路径后面跟上想要传递的值注册路由时，声明接收params参数这样id，title参数就传递给了Detail组件，Detail组件可以通过拿到参数。🔥向路由组件传递search参数当点击消息1这个导航链接时，展示下方对应的Detail路由组件，并向这个组件传递search参数（ID，TITLE，CONTENT）信息。和params的写法有所不同注册路由时，.
2022-07-14 09:27:59
4354
78
原创 【ReactRouter5】路由的模糊匹配，重定向以及嵌套路由
点击Home路由链接，路径为/home/a/b，模糊匹配到路径为/home的Home组件原理:在MyNavLink 中的to属性，会以/作为分隔符，所以就把home、a、b取出来了，并且把取出来的第一个和Route下的path进行比对，匹配上了就显示，匹配不上也不会和后面的a、b进行匹配了，就不会显示组件了。反过来，代码如果是这样的话，Home组件就不会显示了。💥注：路由链接里的 home必须在最前面，不能写成 /a/home/b，否则不能模糊匹配。编写路由链接时的路径必须和注册路由时的路径完全一样，.
2022-07-12 10:52:20
3969
62
原创 一文带你搞懂React路由（详解版）
1️⃣ 单页Web应用（single page web application，SPA）。2️⃣ 整个应用只有（单页面，多组件）。3️⃣ 点击页面中的链接页面，只会做页面的。4️⃣ 数据都需要通过 ajax 请求获取，并在前端异步展现。⭐什么是路由？⭐路由分类：1️⃣后端路由：2️⃣前端路由：⭐前端路由的原理前端路由的实现是依靠 。程序员不直接自己去操作BOM里的history，因为原生的API不好用，所以借助来操作。引入history.js库：创建history对象：如何阻止a标签的跳转？点击a
2022-07-09 13:08:08
3320
21
原创 【React组件】github搜索案例之 兄弟组件通信---PubSubJS / fetch
该方法可以假设A组件想给B组件发送消息（数据），A组件发布消息，B组件（接收数据）就要订阅该消息，这样B就能收到A组件传过来的数据了。下载PubSubJS：引入PubSubJS：📢订阅消息🔊发布消息📝实现步骤1️⃣分别在Search组件和List组件中引入PubSubJS2️⃣List组件订阅消息：当组件挂载完毕时订阅消息3️⃣Search组件使用axios发送请求获取数据并发布消息：4️⃣List组件将要卸载时，取消订阅：📌扩展—fetch发送请求利用fetch()方法发...
2022-07-06 09:49:03
1294
9
原创 【React组件】github搜索案例之 父子组件通信 (附源码)
使用create-react-app脚手架搭建的项目，拆分组件：最外层App父组件，里面分别为Search和List子组件。💥总结在一个React项目中，组件之间的通信是非常重要的环节。父组件在展示子组件，可能会传递一些数据给子组件：子组件向父组件传递消息：...
2022-07-03 13:07:36
2462
29
原创 【React跨域】react ajax配置代理的两种方式--- proxy/setupProxy
1️⃣首先需要在vscode安装axios2️⃣然后使用搭建一个服务器：由于浏览器地址栏默认发送的就是get请求，我们可以在地址栏输入：按下回车键，查看服务是否可以成功返回数据：3️⃣发送请求获取数据：当点击按钮时，控制台显示报错：No ‘Access-Control-Allow-Origin’ header：说明跨域了，违背了同源策略…由于react脚手架运行在3000端口，但是发送请求的服务器在5000端口，形成了跨端口访问的问题，违背了同源策略，所以访问失败。如何解决呢？在react脚手架里通过来
2022-07-01 16:44:34
2865
8
原创 一文带你剖析async/await--【基于Promise的解决异步的最终方案】
如果返回值是的数据,那个结果就为的promise对象如果返回值是，那么Promise对象返回的结果就决定main函数返回结果如果，那么返回的结果是，抛出的结果就是失败的promise对象的结果await 右侧的表达式一般为 , 但也可以是其它的值（数字，字符串，布尔值等）如果表达式是, 直接将此值作为 await 的返回值。📛注意await 必须写在 async 函数中, 但 async 函数中可以没有 await。如果 await 右侧的的 promise 是的, 就会.
2022-06-29 14:32:24
1096
6
原创 【JavaScript】Promise之七大关键问题（附代码）
问题二 ✨一个 promise 指定多个成功/失败回调函数, 都会调用吗?问题三 ✨改变 promise 状态和指定回调函数谁先谁后?1️⃣ 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调2️⃣ 如何?3️⃣ 如何？4️⃣ 什么时候才能得到数据?💤 总结就是执行回调一定是在之后才能执行回调拿到数据。问题五 ✨promise 如何串连多个操作任务?返回一个, 可以形成通过 串连多个同步/异步任务问题六 ✨promise 异常传透?当使用 promise 的.
2022-06-25 19:36:42
383
11
原创 【ES6】JavaScript—Promise_API（resolve，reject，then，catch等方法）
说明: executor 会在 ,内部封装的异步操作在执行器中执行在控制台会先打印出111，再打印出222，如下图：说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的 promise 对象说明: then()的语法糖, 相当于: then(undefined, onRejected)说明: 返回一个💗Promise.reject 方法reason: 失败的原因说明: 返回一个无论传入的参数是什么，返回的结果都是失败的promise对象，打印.
2022-06-22 20:32:10
1609
16
原创 【Promise入门篇】JS--ES6--promise对象详解和基本使用(含代码)
抽象表达：① Promise是一门新的技术（ES6规范）② Promise是JS中进行的新解决方案备注：旧方案是单纯使用回调函数：具体表达：① 从语法上来说：Promise是一个② 从功能上来说：Promise对象用来封装一个，并可以获取其成功/失败的结果值旧的: 必须在启动异步任务前指定promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)什么是回调地狱?回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套......
2022-06-22 19:38:15
2869
8
原创 【跨域】一招带你解决跨域问题——CORS
👇(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。同源： 。违背同源策略就是。下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例：因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。因此：。有以下两种方法：JSONP和CORS最常用的是,而且也是最简单的😂。首先介绍一下JSONP方法，由难到易入手吧！JSO..
2022-06-13 19:41:09
1601
4
空空如也
koa2设置了koa2-cors为何还会跨域失败
2023-02-08
关于#嵌套数组#的问题，如何解决？
2022-08-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人