- 博客(107)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 ios跳转页面回退不刷新问题&&解决方案
文章目录问题分析解决方案问题用react开发的H5项目在移动端中遇到了兼容性的问题：在页面a，点击提交按钮后，按钮状态置灰，并跳转到页面b，再从b页面退回到a页面，在Android手机中没有问题，a页面正常显示。在IOS手机中，a页面的提交按钮仍然是置灰状态，不可点击。分析Android：跳转路由再回来后触发了页面刷新，触发componentDidMount等生命周期，按钮状态刷新，重新变为了可点击状态。ios:跳转路由再回来，不会触发页面刷新，也不会触发componentDidMoun
2021-06-17 15:19:07
2974
8
原创 前端页面填加水印方案及实现
文章目录一、背景二、实现1.利用canvas绘制水印信息2.页面展示水印三、完整代码四、调用五、验证一、背景最近有个项目需要在页面上加上水印。这里尝试了一个实现方案。二、实现1.利用canvas绘制水印信息 var can = document.createElement('canvas'); can.width = 250; can.height = 150; var cans = can.getContext('2d'); cans.rotate(-20 *
2021-04-06 15:28:04
1789
8
原创 前端项目(React)接入eslint静态代码检查及一些问题解决方案
Using this.refs is deprecatedUsing string literals in ref attributes is deprecated‘xxx‘ is missing in props validation和 组件变量 is assigned a value but never used解决方案eslint安装配置初始化检验代码
2021-03-29 10:19:58
4284
15
原创 移动端1px实现和问题踩坑
效果要实现移动端上的一像素线，window.devicePixelRatio=物理像素 /CSS像素目前主流的屏幕DPR=2或者3。拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 0.5。一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的0.5px先看看效果：Chrome浏览器PCChrome浏览器移动端IE浏览器下，显示问题实现代码<div class="wrap"
2021-03-19 13:35:44
926
8
原创 不使用插件实现一个移动端日期选择器
React不使用滚动插件实现移动端日期选择器背景需要做一个只包含年月的日期选择器，但目前大多数的日期选择器中，手指滑动使用了better-scroll插件作为移动端滚动插件,需要先安装依赖better-scroll，这无疑会增加项目的体积，所以决定自己实现一个不使用插件的日期选择器。效果图先附上效果图实现实现思路不使用滚动插件利用 touchmove 实现监听手指滑动用两个列表分别展示年份和月份列表固定三行展示上一年，当前年，下一年的数值滑动的时候，通过判断手指滑动的方向改变数值，
2021-02-08 19:04:51
1410
7
原创 cookie的读写设计和浏览器控制台Application设计不一致？
cookie的读写设计和浏览器控制台Application设计不一致？http协议和https协议下的cookie用https的链接登录状态验证正常，但是在http协议下，会出现set cookie失败的情况，导致登录状态验证失败。查看控制台，报错如下：提示【会覆盖具有“Secure”属性的cookie】
2022-05-04 01:56:35
637
原创 网络安全初探-CSRF攻击方式&&防御手段
文章目录一、CSRF二、常见的攻击类型1.GET类型的CSRF2.POST类型的CSRF3.链接类型的CSRF三、CSRF的特点四、防护策略1.同源检测Origin Header和Referer HeaderSamesite Cookie属性2.提交时要求附加本域CSRF Token双重Cookie验证一、CSRFCSRF（Cross-site requestforgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭
2021-05-19 18:01:06
1567
8
原创 网络安全初探-XSS攻击方式&&防御手段
文章目录一、什么是 XSS二、XSS注入的方法三、XSS 攻击的分类1.反射型XSS2.存储型XSS3.DOM型XSS四、XSS 攻击的预防1.预防 DOM 型 XSS 攻击2.输入过滤3.拼接HTML时对其进行转义4.Content Security Policy5.其他安全措施一、什么是 XSSCross-Site Scripting（跨站脚本攻击）简称XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如Coo
2021-05-19 17:16:08
1048
7
原创 对react中key的理解&&利用key让组件重新渲染
文章目录key的作用原理对比流程react组件中的key利用key让组件重新渲染当我们渲染列表时通常会用到keyconst listItems = numbers.map((item) => <li key={item.id}>{item.val}</li>)key的作用（一般同级同结构的子节点都需要采用key属性，方便diff算法的使用）纯静态的同级同结构节点的渲染，可以采用index作为key的值，因为这里不需要动态去变化节点里面的内容的值；对于一组动
2021-04-30 13:06:33
2158
4
原创 react-router简单整理总结
文章目录一、react-router与react-router-dom区别二、React-router1.路由组件 BrowserRouter 和 HashRouter2.路径匹配组件: Route 和 Switch2.1Route2.2Switch2.3导航组件: Link 和 NavLink2.4 Redirect2.5 withRouter2.3编程式导航 - history 对象一、react-router与react-router-dom区别react-router: 实现了路由的核心功能
2021-04-29 16:50:36
751
4
原创 JS打印二叉树所有路径(从根节点到叶子结点)
文章目录题目描述实现题目描述打印二叉树所有路径(从根节点到叶子结点)// Input:// 1// / \//2 3// / \// 5 6// OutPut:// 1->2// 1->3->5// 1->3->6实现使用递归方法来解决此问题。用一个栈stack 来存储路径，当遍历到叶子结点时，将stac
2021-04-28 20:59:19
1116
6
原创 单页面应用(SPA)&&前端路由hash 模式 VS history 模式
单页面应用(SPA)&&前端路由hash 模式VS history 模式前端路由的由来保证只有一个 HTML 页面，且与用户交互时不刷新和跳转页面的同时，为 SPA 中的每个视图展示形式匹配一个特殊的 url。在刷新、前进、后退和SEO时均通过这个特殊的 url 来实现。history兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了
2021-04-28 11:08:01
1566
6
原创 产品同学成为了我学习Git命令的动力
有多个需求，本来说的是一起上线的，所以我就把它们全放在一个分支开发了，按需求分别提交的commit，结果，产品说其中的某个需求A需要改动一个，并且延后上线（按捺住想打他的冲动）。所以我需要把这个需求A从当前分支分离出来，并放到一个新的分支上，继续开发。git 把当前分支的某次commit分离出来到另一个分支，并删除当前分支上的commit
2021-04-25 11:08:56
245
4
原创 JS实现二叉树的重建
文章目录1.根据前序+中序2.根据后序+中序function TreeNode(x) { this.val = x; this.left = null; this.right = null;}前序or后序用来确认根节点前序中，根节点在第一个，后序中根节点在最后一个利用根节点将中序遍历数组分割为左子树、右子树 相关数据。对于中序遍历，根节点左边的节点即左子树，根节点右边的节点即右子树。1.根据前序+中序function creatTree(pre, vin){
2021-04-19 19:35:41
3295
16
原创 数据结构与算法-二叉树的遍历递归&&非递归
文章目录一、递归1.前序2.中序3.后序二、非递归1.前序2.中序3.后序一、递归1.前序根左右// 所有遍历函数的入参都是树的根结点对象function preorder(root) { // 递归边界，root 为空 if(!root) { return } // 输出当前遍历的结点值 console.log('当前遍历的结点值是：', root.val) // 递归遍历左子树 preorder(roo
2021-04-19 15:21:31
499
4
原创 算法-分析爬楼梯问题从递归-＞记忆化搜索-＞动态规划
文章目录爬楼梯问题1.递归思想分析问题代码实现存在的问题2.记忆化搜索3.记忆化搜索转化为动态规划爬楼梯问题题目描述：假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？例子：输入： 2输出： 2解释： 有两种方法可以爬到楼顶。1 阶 + 1 阶2 阶输入： 3输出： 3解释： 有三种方法可以爬到楼顶。1 阶 + 1 阶 + 1 阶1 阶 + 2 阶2 阶 + 1 阶1.递归思想分析问题那么站在第
2021-04-18 16:47:34
1152
13
原创 基础算法-递归与回溯思想&&解题思路&&解题模板(附经典例题)
回溯法是一种选优搜索法，按选优条件向前搜索，以达到目标。但当探索到某一步时，发现原先选择并不优或达不到目标，就退回一步重新选择，这种走不通就退回再走的技术为回溯法，而满足回溯条件的某个状态的点称为 “回溯点”。许多复杂的，规模较大的问题都可以使用回溯法，有“通用解题方法”的美称。> 回溯算法的基本思想是：从一条路往前走，能进则进，不能进则退回来，换一条路再试。 ——LeetCode解题模板总结1.什么时候用2.为什么这样用3.怎么用例题-全排列问题例题-子集问题
2021-04-18 15:54:40
420
原创 JS中浅拷贝和深拷贝的区别以及几种实现方式
深拷贝和浅拷贝浅拷贝和赋值深拷贝1. 递归实现2. 通过JSON对象实现深拷贝3. 通过jQuery的extend方法实现深拷贝4. Object.assign()拷贝5. lodash函数库实现深拷贝
2021-04-17 16:08:53
749
2
原创 十大排序算法JS实现以及复杂度分析
一、冒泡排序二、选择排序三、插入排序四、希尔排序五、归并排序六、快速排序七、堆排序八、计数排序九、桶排序十、基数排序
2021-04-15 19:49:02
1820
7
原创 十大排序算法-分治思想-归并排序&&快速排序(js实现)
分治思想解决问题:- 分解子问题- 求解每个子问题- 合并子问题的解，得出大问题的解
2021-04-13 19:49:15
1021
9
原创 H5项目适配系统深色模式方案总结
文章目录一、背景二、问题三、H5项目适配深色模式方案1.声明 color-scheme1.1meta1.2CSS2.通过 CSS 媒体查询3.图片适配4. JavaScript中判断当前模式&监听模式变化4.1matchMedia4.2addListener()JavaScript监听判断一、背景随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减
2021-04-13 17:51:20
3647
23
原创 十大排序算法-冒泡排序&&选择排序&&插入排序(js基本实现&&改进)
1.基本思路分析冒泡排序的过程，就是从第一个元素开始，**重复比较相邻的两个项**，若第一项比第二项更大，则**交换**两者的位置；反之不动。2.复杂度分析- **最好**时间复杂度：O(n)- **最坏**时间复杂度：O(n^2)- **平均**时间复杂度：O(n^2)3.实现4.改进-不做无差别比较5.改进-最好情况O(n)
2021-04-13 11:05:41
295
4
原创 跨域问题产生的原因以及十种解决方案
一、什么是跨域？同源策略：协议+域名+端口三、解决方案1.JSONP跨域2.跨域资源共享（CORS）简单请求CORS跨域示例3.nginx代理跨域nginx配置解决iconfont跨域nginx反向代理接口跨域4.nodejs中间件代理跨域5.document.domain + iframe跨域6.location.hash + iframe跨域7.window.name + iframe跨域8.postMessage跨域9.WebSocket协议跨域10.浏览器开启跨域
2021-04-12 15:37:21
8457
24
原创 计算机网络-HTTP首部字段分析总结
文章目录通用首部字段请求首部字段响应首部字段实体首部字段非 HTTP/1.1 首部字段首部字段分析图通用首部字段字段说明备注Cache-Control控制缓存行为public：所有内容都将被缓存（客户端和代理服务器都可缓存）private：所有内容只有客户端可以缓存，Cache-Control的默认取值no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存max-age=xxx (
2021-04-12 13:05:24
1444
14
原创 CSS-粘连布局-实现以及变形实战
文章目录一、粘连布局二、简单实现三、实战-简化DOM结构注意点一、粘连布局特点：有一块内容，当的高康足够长的时候，紧跟在后面的元素会跟在元素的后面滚动。当元素比较短的时候(比如小于屏幕的高度),我们期望这个元素能够“粘连”在屏幕的底部如图：图片来源https://blog.youkuaiyun.com/VhWfR2u02Q/article/details/84076421二、简单实现DOM结构：<body> <div class="wrap">
2021-04-09 20:10:49
2074
19
原创 计算机基础-死锁(概念、产生条件、解决方案)
当线程A持有独占锁a，并尝试去获取独占锁b的同时，线程B持有独占锁b，并尝试获取独占锁a的情况下，就会发生AB两个线程由于互相持有对方需要的锁，而发生的阻塞现象，我们称为死锁。造成死锁必须达成的4个条件互斥条件：一个资源每次只能被一个线程使用。请求与保持条件：一个线程因请求资源而阻塞时，对已获得的资源保持不放。不剥夺条件：线程已获得的资源，在未使用完之前，不能强行剥夺。循环等待条件：若干线程之间形成一种头尾相接的循环等待资源关系。- 死锁防止- 死锁避免-死锁检测和恢复
2021-04-08 21:40:13
2122
26
原创 计算机基础-进程与线程的区别与联系(附面试题)
线程之间的是怎么进行交互的进程之间又是怎样进行交互多线程、多进程应用场景进程要分配一大部分的内存，而线程只需要分配一部分栈就可以了.一个程序至少有一个进程,一个进程至少有一个线程. 进程是资源分配的最小单位，线程是程序执行的最小单位。一个线程可以创建和撤销另一个线程，同一个进程中的多个线程之间可以并发执行.线程执行开销小，但不利于资源的管理和保护；而进程正相反。同时，线程适合于在SMP机器上运行，而进程则可以跨机器迁移。线程才是真正去运行的，而进程呢，则是像容器
2021-04-08 21:09:27
646
14
原创 计算机网络-三次握手&&四次挥手(含面试常见题)
文章目录一、三次握手1.三次握手流程2.相关问题2.1为什么需要三次握手，两次不行吗？2.2什么是半连接队列？2.3ISN(Initial Sequence Number)是固定的吗？2.4三次握手过程中可以携带数据吗？2.5 SYN攻击是什么？二、四次挥手1.四次挥手过程2.相关问题2.1挥手为什么需要四次？2.2 2MSL等待状态2.3四次挥手释放连接时，等待2MSL的意义?2.4为什么TIME_WAIT状态需要经过2MSL才能返回到CLOSE状态？三、总结一、三次握手1.三次握手流程第一次
2021-04-06 17:49:30
1935
14
原创 面试官：说说UDP和TCP的特点及区别
文章目录一、TCP 的主要特点二、UDP 的主要特点三、TCP 和 UDP 的区别四、TCP 和 UDP 分别对应的常见应用层协议1.TCP 对应的应用层协议2. UDP 对应的应用层协议一、TCP 的主要特点TCP 是面向连接的。（就好像打电话一样，通话前需要先拨号建立连接，通话结束后要挂机释放连接）；每一条 TCP 连接只能有两个端点，每一条 TCP 连接只能是点对点的（一对一）；TCP 提供可靠交付的服务。通过 TCP 连接传送的数据，无差错、不丢失、不重复、并且按序到达；T
2021-04-06 17:03:38
640
6
原创 计算机网络-OSI七层协议模型、TCPIP四层模型和五层协议体系结构之间的关系&各层的作用
各层的作用物理层：主要作用是传输比特流数据链路层：定义了如何让格式化数据以进行传输，以及如何让控制对物理介质的访问网络层：提供连接和路径选择运输层：传输数据会话层：发起会话或者接受会话请求表示层：确保一个系统的应用层所发送的信息可以被另一个系统的应用层读取应用层：为用户的应用程序（例如电子邮件、文件传输和终端仿真）提供网络服务。
2021-04-06 13:19:52
984
2
原创 计算机网络-http1.0,http2.0,https之间的区别以及HTTPS工作流程&加密方式
计算机网络-http1.0,http2.0,https之间的区别以及HTTPS工作流程&加密方式.HTTPS是-用不对称加密协商用哪种对称加密方式。 用协商好了的对称加密，加密内容。1. HTTP/2采用二进制格式而非文本格式 2. HTTP/2是完全多路复用的，而非有序并阻塞的——只需一个连接即可实现并行3. 使用报头压缩，HTTP/2降低了开销4. HTTP/2让服务器可以将响应主动“推送”到客户端缓存中
2021-04-06 13:00:23
735
原创 H5项目兼容PC端和移动端的方案(持续跟新)
H5项目兼容PC端和移动端的方案(持续跟新)一、利用CSS媒体查询维护两套样式二、移动端1像素线问题
2021-04-05 18:07:14
7423
9
原创 浏览器常用对象概述
一、window对象二、navigator对象三、screen对象四、location对象五、document对象六、history对象
2021-04-05 15:47:15
1378
原创 前端setInterval和setTimeout计时误差问题分析&&解决方案
setInterval指定的是“开始执行”之间的间隔，并不考虑每次任务执行本身所消耗的时间。因此实际上，两次执行之间的间隔会小于指定的时间。比如，setInterval指定每 100ms 执行一次，每次执行需要 5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。如果某次执行耗时特别长，比如需要105毫秒，那么它结束后，下一次执行就会立即开始。为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。
2021-04-02 15:16:26
8032
14
原创 websocket优缺点、应用场景以及与HTTP协议的异同
websocket 协议概述WebSocket与HTTP协议的异同Websocket优点Websocket缺点Websocket的作用Websocket应用场景
2021-04-01 22:08:31
17516
12
原创 React-性能优化(一)
一、使用React.Memo来缓存组件二、使用useMemo缓存大量的计算三、避免使用内联对象四、避免使用匿名函数五、延迟加载不是立即需要的组件六、调整CSS而不是强制组件加载和卸载七、使用React.Fragment避免添加额外的DOM八、基于 shouldComponentUpdate 优化九、基于 PureComponent + immutable.js 优化浅比较：将针对值类型数据对比其值是否相等，而针对数组、对象等引用类型的数据则对比其引用是否相等。
2021-04-01 21:23:17
552
2
原创 React-高阶组件(一)
高阶组件是参数为组件，返回值为新组件的函数。- 组件:将 props 转换为 UI- 高阶组件:将组件转换为另一个组件。一、概念与普通组件的区别二、什么时候使用三、例子四、使用总结
2021-04-01 20:12:56
448
4
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人