- 博客(119)
- 资源 (1)
- 收藏
- 关注
原创 opcity好rgba的区别
opacity属性的值,可以被其子元素继承,给父级div设置opacity属性,那么所有子元素都会继承这个属性,并且,该元素及其继承该属性的所有子元素的所有内容透明度都会改变。而RGBA设置的元素,只对该元素的背景色有改变,并且,该元素的后代不会继承该属性。...
2020-11-03 00:44:33 164
原创 node知识详解一
模块化开发的意思是如下????将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起,块的内部数据/实现是私有的(在每个模块内部属于私有作用域),只是向外部暴露一些接口(或方法)与外部其它模块通信。不使用模块化开发的缺点:1. 如果把所有的代码放在一个js文件当中,如果想要修改代码封装的函数或者某一部分内容的时候不利于查找。2. 把js代码写在一个文件里,耦合度会变高(也就是代码之间的关联度太强了)不方便后期的维护。3. 而且如果js代码都写在一个文件里,代码的功能点不明确
2020-09-04 16:17:37 2101
原创 FormData文件上传多文件上传
该防范策略的核心在于攻击者虽然在调用提交接口时能携带相关的cookie信息(接口携带的cookie取决于接口的域名),但是无法通过js获取相关cookie的值(js只能获取当前页面域名下的cookie),因而也就拿不到有效的token,无法构造有效的表单数据,请求就会被服务端所拒绝。 ③ 前端触发表单提交接口,发送FormData对象,服务端收到请求后,对比FormData对象中的token与服务端存储的token是否一致,如果一致,则认为是合法请求,否则,认为是CSRF攻击,拒绝请求。
2023-12-20 23:10:05 2801
原创 前端js实现井字游戏和版本号对比js逻辑【适用于vue和react】
/ 实现 compareVersion 方法,用于比较两个版本号(version1、version2) * 如果version1 > version2,返回1;* 如果version1 < version2,返回-1;* 其他情况,返回0。若一方棋子在横、竖、斜方向连成排则为获胜,返回当前玩家是否胜出。,xyz均为大于等于0的整数,至少有x位 * * 目标: *输入一个二维数组代表棋盘,其中 * 『1』代表当前玩家的棋子,『-1』代表对方玩家的棋子。『0』代表没有棋子,
2023-11-01 14:31:11 597
原创 为什么hooks不能写在条件语句或者循环中?
/如果这个hooks被条件语句包裹那么下一个myUseState拿到的currentHookIndex就是上一个的currentHookIndex这样set的时候状态就不对应。就是通过hooks链表的固定顺序来确定对应哪个状态的;因为写在条件语句和循环可能会导致hooks的执行顺序发生改变,因为react hooks内部是通过,hooks的调用顺序来记录对应的状态;// 每次调用myUseState对应的索引,利用闭包来去确定要set的状态值在链表中对应的索引。// 更新状态的函数。
2023-08-07 11:48:21 209
原创 vue2生命周期图
★★★初始化Vue实例当中的数据,经过第二次的初始化后data内部的数据已经有了,并且methods属性也初始化成功了!当中获取/打印包含data数据的或者已经写好在挂载DOM上的模板HTML DOM的时候,因为在这个时期已经渲染在真实DOM上了,所以是可以打印或者输出的。更新阶段执行完mount函数之后,会实时监听data内部的数据,如果数据发生变化就马上执行beforeUpdate函数,beforeUpdate函数执行时,data里面的数据已经更新了,但是data的数据并没有渲染在真实的DOM上,
2023-07-25 15:50:03 261
原创 前端常见状态码
304 not modified,自从上次请求后,请求的网页内容未修改过。301 moved permanently,永久性重定向,表示资源已被分配了新的 URL。303 see other,表示资源存在着另一个 URL,应使用 GET 方法获取资源。302 found,临时性重定向,表示资源临时被分配了新的 URL,支持搜索引擎优化。500可能是你传参请求头,多传了或者请求传参的时候传错了;404一般我们的url写错了,就请求不到后端数据资源。409状态发生冲突conflict。
2023-07-19 16:29:01 44
原创 websoket
Websoket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在webSoket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。全双工通信的意思就是:允许客户端给服务器主动发送信息,也支持服务端给另一个客户端发送信息.它提供一种基于TCP连接上进行全双工通讯的协议;websoket是html5新特性,网站为了实现推送技术,2种方案;
2023-07-19 16:20:35 514
原创 E6新语法for of 和ES3的for in 有什么区别?useState为什么是用数组结构而不用对象?
因为数组的结构可以自己任意定义变量的名称,而如果使用对象的话就只能跟hooks内部的变量名一个的名字,如果需要自定义名字则要用E6语法:去改名字,这样代码量会变大。
2023-07-19 14:06:10 244
原创 qiankun微前端
如果对微服务的概念比较陌生的话,可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块,每个前端模块可以由不同的团队进行管理,并可以自主选择框架,并且有自己的仓库,可以独立部署上线。【比如我们嵌套antdUI框架,我们刚进入是首页,当我们切换到组件的路有时候,我们刷新父应用的页面,你会发现,iframe回到了antd的首页,而不是在组件库的路由上;基座就是所有子应用当中最大的父应用,就相当于我们的路由,子应用就相当于路由出口routerview,子路由可以用任何技术栈去写,并且单独部署;
2023-07-19 12:44:52 236
原创 vue或react当中canvas实现电子签名组件和使用canvas进行图片压缩
vue或react当中canvas实现电子签名组件和使用canvas进行图片压缩
2023-07-18 22:25:51 1040
原创 前端实现电子签名(web、移动端)通用
canvas给咱们供给了许多的Api,供咱们运用,咱们只需求在body标签中创立一个canvas标签,在script标签中拿到canvas这个标签的节点,并创立context(上下文)就能够运用了。咱们将canvas的填充色为透明,并制作填充一个矩形,作为咱们的画布,假如不设置这个填充背景色,在咱们初识渲染的时候是一个黑色背景,这也是它的一个默认色。为啥需求保存偏移量呢,由于鼠标和画布上的间隔是存在必定的偏移间隔,在咱们制作的过程中需求减去这个偏移量,才是咱们实践的制作坐标。那就是canvas。
2023-07-15 17:38:26 1583
原创 前端使用tracking.js进行人脸识别
https://huaweicloud.csdn.net/639ff52edacf622b8df90c2d.html?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Eactivity-1-112848559-blog-126460004.235%5Ev38%5Epc_relevant_sort&depth_1-utm_source=distribute.
2023-07-15 17:30:48 544
原创 React实现控制减少useContext导致非必要的渲染详解_React
如果我们的context的数据是由多个部分组成的,但只有其中一两个字段会频繁更新,但其他的数据都比较稳定时,这时,即使组件值使用到了比较稳定的那部分数据,但它依然会频繁渲染,这就很容易会导致性能问题。上面说到,在useSelector中,我们会订阅stageChange事件,这时,我们会检查selector选中的数据有没有发生变化,有的话便使用forceUpdate进行强制渲染;就这样,当我们在组件时使用useSelector时获取数据时,只有在selector选中的数据被更新时,组件才会重新渲染。
2023-07-12 18:00:35 810
原创 react事件和原生事件有什么区别
React并不是将click事件绑定到了div的真实DOM上,而是在document处监听了所有的事件,当事件发生并且冒泡到document处的时候,React将事件内容封装并交由真正的处理函数运行。
2023-07-12 18:00:08 157
原创 link和@import的区别,性能优化
transition是过度属性,强调过度,它的实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画。注意:由于上面的三个属性都是 CSS3 的属性,没有浏览器可以兼容,所以要在前面加一个-webkit- 来兼容一部分浏览器。css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用。(3)减少使用@import,建议使用link,因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载。// 规定段落中的文本不进行换行。
2023-07-12 16:34:40 1752
原创 说一下 HTML5 drag API
本地存储:提供了 Web Storage 和 IndexedDB API,可以在客户端浏览器中存储和访问数据,用于离线应用和缓存。dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。语义化标签:引入了一些新的标签,如。
2023-07-12 11:44:56 1258
原创 iframe 有那些优点和缺点?
iframe 会阻塞主页面的 onload 事件。用来加载速度较慢的内容(如广告)会产生很多页面,不容易管理。无法被一些搜索引擎索识别。可以使脚本可以并行下载。
2023-07-12 11:25:28 33
原创 产品经理工作日常
2 . 开发过程中的需求沟通,需求调整,是否已经及时更新文档。4 . 是否有延期风险,若有风险是否已及时同步。1 . 确认技术是否完全按照方案进行开发实现。3 . 定期确认开发进度,组织周会同步跟进。
2023-04-14 10:47:35 91
原创 react兼容问题
3.执行命令 npm run eject 将config配置文件暴露出来,修改文件config/webpack.config.js,把paths.appIndexJs,字段调到最前面。1.通过命令 npm install core-js mutation-observer --save 安装模块。2.然后在项目的js入口文件index.js顶部引入模块 core-js和mutation-observer。在config/webpack.config.js文件里 找到entry字段。
2023-03-27 00:46:41 454
原创 移动端插件适配
postcss-px-to-viewport就是这样一款优秀的插件,它能完美解决上面的三个痛点,高效的将代码中px单位转为vw视口单位,一份配置文件完美解决适配问题。lib-flexible+postcss-pxtorem,在相当长一段时间里,这两个插件搭配都是解决移动端布局的神器,lib-flexible是阿里手淘系开源的一个库,用于设置font-size,同时处理一些窗口缩放的问题。propList: [‘*’], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换。
2023-03-23 21:34:22 751
原创 this指向的问题,和new函数的原理
如下在全局下打印定时器的this,因为箭头函数的父级作用域是全局,全局的this是window所以箭头函数内部的this也是指向window。console.log(“默认情况下的this是指向windows的”, this);console.log(“箭头函数在windows下调用的时候”, this);
2023-03-20 16:10:35 73
原创 前端xss攻击和csrf攻击详解
比如你访问了一个银行网站,当你没有关闭这个银行网站的时候又去访问了黑客的网站,黑客就可以通过一些非法的手段去获取到你访问银行网站的cookie这些隐士信息,然后黑客就拿着你的隐私信息去伪造你的身份给银行网站发送一些非法请求。反射性可能往文档对象中的a标签的href的属性换了一个地址,或者插入一个DOM如a标签等等,来诱导用户点击黑客的url地址.或者用户通过点击Dom去改变事件执行函数然后让黑客通过document获取用户个人信息等等。可以理解为攻击者盗用了用户的身份,以用户的名义去发起恶意的请求。
2023-03-20 12:07:02 300
原创 前端手写call,apply,bind方法
bind改变完this指向后返回一个函数不会立即执行,并且bind函数的this指向只能改一次后面在用bind链式调用去写也只是拿到第一次的this和第一次的传参。注意一点箭头函数是无法被call,apply,bind修改this指向的,因为箭头函数没有this。call参数1 是this指向参数,参数22 到 n是我们想要传递给函数的参数要用逗号隔开。bind 参数1 是我们的this指向参数 参数2 到 n是我们要传递的参数。apply 参数1 是this指向参数,参数2 是一个。
2023-03-16 17:18:43 48
原创 从浏览器地址栏输入url到显示页面的步骤
答:如果没有2MSL的等待时间,那么如果客户端最后一次确认报文丢失,那么服务器端就会因为迟迟收不到客户端的确认报文而不断触发服务端的超时重发,如下图所示:
2023-03-16 17:05:15 1210
求两个数组的交集,配合去重方法使用.html
2020-06-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人