- 博客(185)
- 收藏
- 关注
RSS订阅原创 ant-design源码解析——Upload上传组件
文件上传是我们开发中不可或缺的一部分，我们将在本文深入解析组件的实现。相信看完以后对于React以及Ant Design的工作原理理解能更上一层楼。
2024-08-14 18:04:54
848
原创 彻底搞懂ahooks State实现原理
State可以是string或undefined。它表示 cookie 的值。Options继承了，用于配置 cookie 的属性（如过期时间、路径等）。：可以是一个初始值或者一个返回初始值的函数。: S) => S);: boolean;serializer?onError?: 同步存储的事件名称。: 定义状态的类型，可以是一个值或一个接受当前状态的函数。Options: 用于配置 Hook 行为的选项，包含默认值、是否监听存储变化、序列化和反序列化函数，错误处理函数等。
2024-08-14 18:01:44
840
原创 彻底精通ahooks原理【Effect篇】
ahooks是优秀的库，也是我们日常中开发一直会用到的库，学习理解这些Hooks的源码可以让我们深入理解ahooks，也能让我们对React基础Hook的理解更上一层楼。本文我们将对ahooks中所有副作用的钩子函数进行源码剖析。
2024-08-09 17:14:32
1001
原创 主流的用户身份认证方案？都在这里！
在现在的互联网服务中，用户认证是至关重要的环节。用户向服务器发送用户名和密码，以发起登录请求。服务器对用户提供的信息进行验证。验证通过后，在当前会话（session）中保存相关数据，例如用户角色、登录时间等关键信息。服务器向用户返回一个唯一的 session_id，并将其写入用户的 Cookie 中。用户后续的每一次请求，都会通过 Cookie 将 session_id 传递回服务器。
2024-07-02 14:17:19
719
原创 彻底搞懂Webpack插件
首先我们先回忆一下Webpack插件是如何使用的？下面是一份基础的Webpack可以看到，插件都在plugins中，并且这是一个数组，包含了每一个插件的实例化调用，可以给这个实例传一些参数，因此不难看出来，Webpack插件就是一个类。
2024-07-02 13:59:32
516
原创 如何通过流式渲染提升用户体验？
本文从理论层面深入探讨了流式渲染的相关实现方案。理论上，流式渲染的概念和实现相对简单。HTTP 标准和 Node.js 早在很久以前就对这一特性提供了支持。然而，在实际的工程应用中，流式渲染并非易事。以 React 为例，要实现流式渲染，不仅需要 React 自身作为用户界面（UI）框架提供支持，还需要借助像 nextjs 这样的元框架（meta framework）来赋予服务端相应的能力。
2024-06-27 01:15:45
1161
原创 深入理解前端缓存
前端缓存是所有前端程序员在成长历程中必须要面临的问题，它会让我们的项目得到非常大的优化提升，同样也会带来一些其它方面的困扰。等，但是我相信大部分的前端程序员不了解它们的缓存机制。接下来我将带你们深入理解缓存的机制以及缓存时间的判断公式，如何合理的使用缓存机制来更好的提升优化。我将会把前端缓存分成HTTP缓存和浏览器缓存两个部分来和大家一起聊聊。
2024-06-21 18:48:11
1314
原创 绝大部分的场景你并不需要localStroage
在实际业务开发中，有很多的使用场景，如：用户偏好设置、购物车信息、用户信息等等，如果只是把网站的主题色，就像使用暗黑还是明亮模式的信息存在里也还好，毕竟不涉及敏感信息，就像umi的官网一样，本地存储存了主题偏好、github stars这些信息。或者是像掘金Web端，通过来保存用户的搜索历史作持久化。这样即使我懂技术，把这个存储删了也无所谓，只是我的搜索历史被清了而已。但在很多场景下，我发现会有同学把用户信息、ID、或者是会话鉴权的token存在中，这其实是很危险的技术方案。
2024-05-01 22:35:31
32
原创 写出好代码的底层逻辑
到底什么是编程，知乎上这样的一个问题，编程的本质是什么？很多人都给了自己的回答，但我发现很多回答，要么长篇大论各种编程范式，要么说得特别抽象，比如下面的回答，毫无指导意义。其实，很多人对于事物本质的理解，似乎都有道理，但是我们希望这个答案可以指导我们编程的行为，知道如何写出好代码，如果我们从这个角度来看，那这个问题的答案就需要非常地具体，可执行。这么多解释里，陈皓老师的解释最为具体，当然他也是引用的国外大佬的研究结论，但分析得相当好。简单的两个公式表达得比较透彻。程序 = 算法 + 数据结构。
2024-04-08 14:50:09
910
原创 手机抓包也太简单好玩了吧！
我们选择Charles来作为抓包工具，本文将从0到1讲解从电脑端抓包到手机端抓包。Charles是一款被广泛使用的网络抓包工具，它可以用来监控和调试通过HTTP和HTTPS协议发送和接收的所有网络请求和响应。Charles通常用于网页和网络应用的开发过程中，帮助开发人员理解他们的应用是如何与互联网通信的，以及调试网络相关的问题。以下是Charles。
2024-03-22 00:38:48
682
原创 【转载】深度学习笔记——详解损失函数
原文链接: https://blog.csdn.net/weixin_53765658/article/details/136360033CSDN账号: Purepiscesgithub账号: purepisces希望大家可以Star Machine Learning Blog https://github.com/purepisces/Wenqing-Machine_Learning_Blog损失函数根据您使用的神经网络类型和数据类型，不同的损失函数可能会变得有用，例如分类问题的交叉熵损失，回归
2024-03-01 17:17:11
967
1
原创 彻底搞懂OAuth2.0第三方授权免登原理
OAuth 2.0是一个授权框架，允许第三方应用程序获取对资源拥有者（例如，用户）资源的有限访问权限，而不需要向第三方暴露资源拥有者的凭据（通常是一个密码）。这种授权通常用于允许用户让一个应用程序对另一个系统进行安全访问，通常用于“登陆”的场景。免登（免密码登录）原理在OAuth 2.0框架中可以通过几种不同的grant类型实现，最常见的是使用“授权码”（Authorization Code）流程。
2024-02-28 17:36:25
1064
原创 深入浅出扫码登录
扫码登录是一种便捷的身份验证方式，用户通过扫描屏幕上显示的二维码（QR码）来登录应用或网站。这种登录方式在移动设备普及的背景下变得越来越流行，因为它提供了一个无需记忆密码的安全登录选项。二维码的展示当用户想要登录时（通常在Web应用或者PC软件中），服务器会生成一个包含特定登录信息的二维码并展示给用户。二维码的扫描用户使用手机上的应用（例如移动端的App内置扫码功能或通用的二维码扫码应用）扫描二维码。扫码功能得以识别出二维码内包含的登录信息。登录验证。
2024-02-27 16:22:08
835
原创 使用Animate.css让你你的网页添加眼前一亮的动画
默认情况下，动画只播放一次，持续1秒。/* 持续时间改为2秒 *//* 延迟1秒开始动画 *//* 设置无限次重复动画 */在HTML中，只需要给元素添加class.myElement。
2024-02-26 16:32:08
1383
原创 探索TypeScript：装饰器
最近在学习Nest.js的内容，发现装饰器本质和Java的面向切面编程。装饰器用于给类,方法,属性以及方法参数等增加一些附属功能而不影响其原有特性。其在Typescript应用中的主要作用类似于Java中的注解,在AOP(面向切面编程)使用场景下非常有用。是一种编程范式，它允许我们分离，藉此达到增加模块化程度的目标。它可以在不修改代码自身的前提下，给已有代码增加额外的行为（通知）,例如: 一个类方法的执行耗时统计或者记录日志,可以单独拿出来写成装饰器。看一下官方的解释更加清晰明了。
2024-02-24 13:34:59
875
原创 前端首屏、白屏与卡顿性能优化？你想要的都在这里！
具体来说，在初次请求资源时，设置 Etag（比如使用资源的 md5 作为 Etag），并且返回 200 的状态码，之后请求时带上 If-none-match 字段，来询问服务器当前版本是否可用。离线化是指线上实时变动的资源数据静态化到本地。比如当我们打开一个页面，它的内容超过了浏览器的可视窗口大小，我们可以先加载前端的可视区域内容，剩下的内容等它进入可视区域后再按需加载。首先也还是问题的定位，先通过 charles 等工具抓包看一下数据接口，如果是和数据相关的问题，找后端同事，或者用数据缓存的方式解决。
2024-02-20 14:01:22
1177
原创 一对HTML标签，让你的网站白屏时间减少300ms！
简单来说，DNS 的作用是将域名解析为 IP 地址，解析的过程是耗时的，转化后会做本地缓存，我们的优化的目标主要是针对用户第一次访问站点的时候陷入长时间白屏的问题。DNS 解析可以分为两类，第一类是页面 DNS 解析，当用户输入 url 地址后（比如是第一次访问站点），便开始页面 DNS 解析，这个过程是省不了的，因为你无法在用户访问站点之前就让他提前把 DNS 解析好；
2024-02-18 23:23:12
806
原创 伪造身份请求怎么办？看这篇就够了
我们可以在客户端和服务端的通信中加入一个额外的约定签名，签名可以由当前时间戳信息、设备ID、日期、双方约定好的秘钥经过一些加密算法构造而成加密解密方式互相约定好，这样攻击者就算拿到了。身份鉴权方案，token会作为主要的鉴权方式来作为前后端通信校验的凭证，当该token被篡改或者直接被第三方拿到，就可以伪造该用户做一系列业务操作，是一种非常严重的安全漏洞。打印出来的用户名是jack，不是aaa，当然校验失败了，这下我们的伪造解决方案实现了，我们可以把这一层逻辑全部集成在一个中间件上。
2024-02-09 11:57:14
1032
原创 给我两分钟，让我教会你Typeorm联表查询
表和表之间都会有关联关系，在Nest项目中我们应该如何联表查询返回数据给客户端呢？// 文件目录: src/entities/user.entity.tsid: string;
2024-02-03 17:28:42
1763
原创 每个人都可以是架构师，每个人都需要培养架构思维
架构”，即架设、构建。完成对于平台的合理架设，包括其首当其冲的可用，到可扩展、容易被开发、产品、业务、销售等全面接受的一个整体的设计。完成对于平台的完备构建，是指，将设计好的、开发好的平台，能够有容器展示其本色。英雄本色，不能让英雄落寞。找一个最好的场地，展示其能力，构建出一个完备性的平台。综合两点，即可以是一个好的架构。
2024-01-22 15:36:49
1095
原创 渐进式手写Redux
例子虽然短小，但是包含了Redux的全部核心功能，我们的手写目标就是替换引入createStore的redux库，要替换它，我们需要知道它都有些什么东西。结果没问题，再次可喜可贺，而官方的实现方式也是这样的，只是在中间加入了更多的异常处理。可以看到，中间件在createStore中作为第二个参数传入，官方称为enhancer，顾名思义是一个增强器，用于增强辅助store能力。中间件本质是加强dispatch，我们拿到加强后的dispatch，最后再把dispatch和原始store返回即可。
2024-01-20 18:27:29
750
原创 想把应用接入钉钉网关？其实很简单
笔者最近接触了多个和钉钉微应用的项目，并且从接入钉钉到授权免登整个过程也是相同的，沉淀出这部分能力写一篇文章来记录一下。首先钉钉接入和网关有什么关系？为什么要有网关呢？由于钉钉免登鉴权这一块前后端做的事情都是一样的，因此服务端可以专门建设一个“钉钉网关”来处理业务外钉钉的事务并且转发微服务；前端可以专门建设一个“钉钉调用client”来和网关鉴权、调用服务，整个流程图大概是这样的：钉钉免登，获取AuthCode；服务端通过AuthCode获取调用钉钉OpenAPI的token；
2023-12-21 21:13:31
1160
原创 React状态管理方案盘点
本文不会介绍各个状态管理工具的具体使用或者如何二次封装，而是从状态管理的概念入手，讲解我们应该关注状态管理工具的什么、常用状态管理工具的分类和比较、以及实际业务中如何去选择状态管理工具，让你对状态管理有更进一步的理解。状态管理工具并不是必需品，有时候context API就够了。不要什么都存到状态管理工具里头去！！！想清楚到底需不需要共享，有时候就是抽离到父组件的事。
2023-11-10 10:56:52
348
原创 Midway.js打通WebSocket前后端监听通道
WebSocket协议允许客户端和服务端持久化连接，这种可以持续连接的特性使得WebScoket特别适用于游戏或者聊天室的场景，同样也适用于订单提交完以后监听状态变化进行页面刷新的场景。在Midway中提供了对于ws模块的支持和封装，能够快速创建WebSocket服务。
2023-11-08 17:34:46
261
原创 使用 Node.js 搭建 API 网关
什么是前端UI自动化测试平台？由于部门的业务域非常广，项目体量也很足，大约有100+项目，10条业务线，因此需要这样前端基建来保证业务的强交付、高质量。业务层：在前端可以添加多个项目，提供预发、生产的域名、项目负责人，对已有项目具备主动执行项目所有测试用例的能力；应用层：存储在自动化测试平台服务端项目中，保存各个项目的测试用例，通过来执行pkg中的jest测试命令，例如执行A项目的测试用例即，对应；
2023-11-01 17:10:55
664
原创 构建Web UI自动化测试平台
什么是前端UI自动化测试平台？由于部门的业务域非常广，项目体量也很足，大约有100+项目，10条业务线，因此需要这样前端基建来保证业务的强交付、高质量。业务层：在前端可以添加多个项目，提供预发、生产的域名、项目负责人，对已有项目具备主动执行项目所有测试用例的能力；应用层：存储在自动化测试平台服务端项目中，保存各个项目的测试用例，通过来执行pkg中的jest测试命令，例如执行A项目的测试用例即，对应；
2023-10-30 17:40:22
438
原创 从零到一完成Midway.js登录、注册、鉴权功能
服务端框架———Midway.js;密码加密存储———bcrypt.js;数据库存储———typeormmysql;登录鉴权———jwt;
2023-10-16 17:23:51
594
原创 探索useCallback、useMemo、useContext原理
和useMemo原理类似，只是入参有所不同。缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；useMemo缓存的是回调函数的return，也就是具体的值，类似Vue的计算属性，如果依赖项没有更新，就会使用缓存的return；官网有这样一段描述相当于。所以这里，只以为例进行分析。这两个hook原理还是很简单的，因为是系列文章，很多内容和前面文章都重复了，所以导致这篇都没啥能写的了。总结下原理：这两个hook的做法就是通过将函数或者值存储在对应的。
2023-09-28 14:47:18
149
原创 setState是同步还是异步的？
setState到底是同步还是异步？})})})这段代码的输出结果，第一个会输出data，而第二个会输出setTimeout。也就是第一次setState的时候，是异步更新的，而第二次setState的时候，它又变成了同步更新，是不是有点晕呢？我们去源码里看一下setState更新调度的时候到底做了些什么。
2023-09-21 11:24:57
103
原创 React路由守卫权限管理
路由守卫是指在路由跳转前、跳转后做一些动作所触发的钩子函数，在后台管理系统中涉及到权限控制相关的逻辑时经常会看见，在实现路由跳转真实动作前会先校验该登录用户是否有权限，或者是token是否过期才会通过，反之就会执行其他操作，例如返回首页或登录页。那么如何通过来实现项目中的路由守卫呢？一共有两种方案：通过公共高阶组件拦截；在项目根目录判断拦截；
2023-09-11 18:10:43
2335
1
原创 JS监听页面回退前进的方案
您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~在业务中遇到需求，App中的H5页面跳转到其他外链页面，外链页面修改了整个APP中的导航栏样式，回退到当前页面，导航栏受到了影响，造成了用户体验下降的问题，步骤如下：问题解决的思路无非两种~我们选择第一种，因为第二种别人不干。通过可以监听到页面展示，我们在当前页做一个监听操作，与不同之处是，当页面主动刷新渲染后，每次加载页面，都会走到的回调，这就很符合页面回退做处理的业务场景。根据思路写出如下代码：那么如何判断页面此次加载是
2023-08-03 16:02:04
1131
1
原创 React几种避免子组件无效刷新的方案
一个很常见的场景，React中父组件和子组件在一起，子组件不依赖于父组件任何数据，但是会一起发生变化。在探究原理之前，先回忆一下，React中的Diff算法会将更新前后的两棵虚拟DOM树做对比，但这并不会决定组件是否更新，只会决定是否要复用老的节点。import {Child组件没有接收来自父组件的值，每次点击父组件元素让name更新，Child组件会更新吗？答案是会的，你一定会好奇，子组件没有接收任何的props，为什么也会更新呢？
2023-07-31 18:17:32
1028
1
原创 浅谈虚拟DOM、Diff算法、Key机制
传说中的虚拟DOM本身其实并不稀奇，只是一个JS对象，里面嵌套了许多JS对象，就像是一个树节点，因此在React中，组件模板必须只能有一个根元素，这样就是一个唯一父节点向下向内扩展的数据结构，如果有多个根节点就会变得情况非常复杂，不利于框架本身维护。的结合，Diff算法并非首创，在Vue中也有Diff算法的概念，React引入Diff算法的基础上做了质的优化，如果在计算一棵树到另一棵树有哪些节点发生变化时，传统Diff算法会通过循环+递归的形式去依次对比，并且该过程不可逆，时间复杂度达到了。
2023-07-11 15:56:48
180
原创 解决H5在native中键盘弹起影响页面交互
中拉起键盘再收回，滚动列表实际距离发生变化，被键盘一起弹上去了（我这里大约是400px的样子）这是笔者在业务中遇到的一个问题，简单总结记录，如果对于这种情况有更好的方案也欢迎留言讨论~的组件触发了收起键盘的事件，所以考虑用类名定位的方案来搞定，同时我们直接封装成一个。把这段代码放在出现问题的页面里，发现页面会不稳定的回弹到顶部，排查下来应该是。可以看到页面被弹上去了，再次重复步骤页面会继续弹上去，排查了一下发现是在。这里入参我们给出在页面中需要被监听的组件类名，一般来说都是。
2023-06-16 11:48:56
480
原创 性能优化记录
最近零零散散的对刚接手的一个新项目做了一些优化，白屏、打包相关的内容都涉及到了，写一篇文章来记录一下。本文总结了一下博主近期性能优化的一些点，对于这些点有什么处理不好的地方可以一起讨论~如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~
2023-06-05 16:10:40
252
原创 面试官：useEffect和useLayoutEffect有什么区别？
源码级别角度剖析React中useEffect和useLayoutEffect的区别
2023-06-04 14:29:39
289
原创 Midway.js探索与实践
我司的技术基建在Midway之上，主要是面向中后台前后端一体化方案，大白话就是全栈应用解决方案，什么是Midway呢？是用于构建 Node.js 云函数的Serverless框架。帮助您在云原生时代大幅降低维护成本，更专注于产品研发，而其专注于函数即服务，你只需要编写JavaScript函数就可以像编写Java接口一样的简单，并且提供了开箱即用的部署解决方案。如果你没有Serverless相关概念，通过本文了解Midway是一个快速入门认知到概念的方式，Midway的能力有很多，可以继续在官方文档中探索。
2023-06-02 16:40:46
770
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人