- 博客(56)
- 收藏
- 关注
RSS订阅原创 项目实战问题
React通过虚拟DOM（Virtual Document Object Model）来提高性能，它在内存中维护了一个UI的状态树，当状态改变时，React会计算出最小的DOM变更，然后批量更新到真实的DOM中，从而提高渲染效率。然而，出于安全考虑，访问令牌通常有较短的有效期，一旦过期，用户就需要再次进行完整的认证流程才能获得新的令牌，这可能影响用户体验。后来，为了进一步提升性能，Facebook推出了Hermes引擎，它专为React Native设计，提供更好的优化和更快的执行速度。
2024-07-18 17:02:15
678
原创 vue全家桶和底层原理
Vue 的数据绑定和 DOM 渲染是异步的。当数据发生变化时，Vue 并不会立即更新 DOM，而是将数据变化放入一个队列中，然后在下一个事件循环的时机批量更新 DOM。这样做是为了避免频繁的 DOM 更新带来的性能开销。nextTick的作用就是确保在 DOM 更新之后执行某个回调函数，使得开发者可以在数据变化后立刻访问到更新后的 DOM。Vue 的nextTick机制通过巧妙地利用 JavaScript 的事件循环和异步机制，保证了在数据变化后能够及时地访问到更新后的 DOM，同时避免了不必要的性能损耗。
2024-07-18 14:43:33
927
原创 部署和运维
则会尝试“重播”一系列提交，将当前分支的提交历史“移动”到目标分支的最新提交之上。会在目标分支的历史上添加一个新的合并提交，这个提交包含了两个分支差异的合并结果。更适用于清理提交历史，比如在开发一个功能分支时，希望它的提交历史看起来好像一直跟随着主分支，或者在提交前希望整理提交历史使其更加清晰。则是通过调整当前分支的提交历史，将它们置于目标分支的最新状态之上，就像这些提交从未离开过目标分支一样。适用于希望保留分支历史的场景，比如在团队协作中，每个功能分支的提交历史都是有价值的，应当被保留。
2024-07-18 10:53:26
785
原创 计算机网络基础知识
强缓存适用于那些更新频率较低的资源，如图片、样式表和脚本文件，因为它们的更新周期较长，可以长时间缓存在客户端。协商缓存更适合那些更新频率较高的资源，如动态生成的内容，因为它能确保客户端始终获取到最新的版本。用于等待所有 Promise 成功解决。用于等待所有 Promise 结束，无论结果如何。用于响应最快完成的 Promise。Vue 的数据绑定和 DOM 渲染是异步的。当数据发生变化时，Vue 并不会立即更新 DOM，而是将数据变化放入一个队列中，然后在下一个事件循环的时机批量更新 DOM。
2024-07-12 15:52:13
745
原创 TypeScript (TS) 类型定义总结
TypeScript类型定义总结：基础类型、接口、类型别名、函数类型、类的类型、泛型、可选参数和默认参数、映射类型
2024-06-07 10:46:09
417
原创 Ts项目中操作DOM时定义类型总结
在使用TypeScript进行DOM操作和事件绑定时，正确地定义元素类型可以显著提升代码的可读性和健壮性，减少类型错误。以下是一些常用类型和实践建议：常用类型。
2024-06-07 10:26:36
606
原创 网络代理总结
网络代理分为几种类型，包括透明代理、正向代理、反向代理和匿名代理。每种类型的代理有不同的用途和透明度级别，透明代理会将客户端的真实信息传递给目标服务器，而匿名和高匿名代理则不同程度地隐藏客户端的信息。：在企业环境中，代理服务器也可以用来分配请求到多个后端服务器，实现负载均衡，或在某个服务器宕机时自动切换到其他可用服务器，保证服务的连续性。：代理服务器可以隐藏客户端的真实IP地址，提供一定程度的匿名性，尤其是在使用匿名代理或高匿名代理时，能有效防止外部追踪用户的网络活动。
2024-05-31 11:20:54
1016
原创 WebSocket和HTTP协议对比
总的来说，WebSocket相较于HTTP，更适用于那些需要低延迟、高实时性和双向通信的应用场景。而HTTP则更适合简单的、偶尔的数据交换和网页内容的请求。
2024-05-31 10:37:37
610
原创 状态码401和403的区别
401 Unauthorized 和 403 Forbidden 是HTTP状态码，它们都表示客户端在尝试访问Web资源时遇到了错误，但两者的含义和应用场景有所不同：401 Unauthorized:403 Forbidden:总结：
2024-05-31 10:36:55
868
原创 前端开发中可能出现内存泄漏的情况总结
同样，添加到DOM元素上的事件监听器，如addEventListener，如果不使用removeEventListener移除不再需要的监听器，也会导致相关对象无法释放。尽管WeakMap和WeakSet中的键是弱引用，不会阻止垃圾回收，但如果它们的值是强引用的对象，且这些对象不再需要时没有从集合中移除，仍然可能导致内存泄漏。如果使用了缓存（如Map、WeakMap等）来存储数据，而没有适当的清理机制，随着时间推移，缓存会不断积累，占用越来越多的内存。全局变量很难被垃圾回收机制自动回收。
2024-04-30 09:35:02
508
原创 JavaScript中遍历对象
返回一个数组，包含了对象自身的所有键，无论键的类型是字符串、Symbol还是其他可迭代类型，并且不管是否可枚举。如果对象有使用Symbol作为键的属性，此方法会返回这些Symbol属性名的数组。返回一个数组的数组，每个内部数组包含一个属性名和相应的属性值。这是最基本的遍历方式，可以遍历对象自身的和继承的可枚举属性。返回一个数组，包含对象自身的所有属性名（无论是否可枚举）。返回一个数组，包含对象自身的所有可枚举属性的属性名。返回一个数组，包含对象自身的所有可枚举属性的属性值。
2024-04-28 11:35:30
444
原创 Antd 嵌套子表格 defaultExpandAllRows 默认展开不生效
从官网定义可知，defaultExpandAllRows 属性仅仅是用于初始化的，当表格数据变化时，表格并未重新初始化，所以defaultExpandAllRows未作用于更新后的数据。在使用 antd 嵌套子表格时，想要默认展开所有子列表，设置属性。通过更新table key的方式来实现每次更新数据时初始化表格。，但是子列表没有展开。
2024-02-26 16:45:21
1000
1
原创 写给大家看的设计书 阅读笔记
含义：将相关的项组织在一起，移动这些项，使它们的物理位置相互靠近，这样一来，相关的项将被看做凝聚为一体的一个组，而不再是一堆彼此无关的片段。
2023-11-01 15:39:31
105
原创 跨域问题分析
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。CORS是一个W3C标准，全称是"跨域资源共享"(Cross-origin resource sharing)，在CORS的规范中有一组新增的HTTP首部字段，允许服务器声明其提供的资源可以被哪些站点跨域使用。
2023-08-07 11:42:39
366
原创 js各种宽高说明
监听滚动事件，根据 document.documentElement.scrollTop + window.innerHeight > dom.offsetTop 判断元素是否在窗口可视区域。scrollHeight 结合clientHeight可以判断多行文本是否溢出，scrollWidth结合clientWidth可以判断单行文本是否溢出，当前元素距浏览器边界的偏移量，以像素为单位。已经滚动到元素的左边界或上边界的像素数。结果 = border。
2023-08-03 16:37:58
448
原创 antd table组件设置scroll，且单元格设置width属性后文本溢出
antd table组件设置scroll，且单元格设置width属性后文本溢出
2023-03-17 16:59:05
1156
原创 html2canvas 截图时外部图片显示空白
html2canvas进行网页截图时会发现，虽然网页中图片能够正常显示，但是图片处是空白的一片。尝试了设置图片跨域等方法但是没有解决。
2023-02-07 15:11:24
2396
原创 CSS画直角梯形
我们最终的实现目标是一个带圆角的直角梯形，无法直接画出，但我们可以画出一个矩形后面拼接一个平行四边形。平行四边形可以利用CSS transform属性的skewX函数画出，如下图。最后利用transform属性的translateX函数将平行四边形移到合适位置就可以实现我们的需求。想做这样一个pk进度条的效果。
2022-09-28 14:51:30
1756
1
原创 webpack打包追加时间戳
iOS始终从缓存中读取同名资源，导致无法加载浏览器中最新版本，所以只要确保每次新打包生成的文件名不同就可以解决。在开发H5时发现由于iOS无法手动清除软件缓存（除非卸载重装），导致新版本上传后页面始终无法更新。在vue.config.js文件中加入以下配置。
2022-09-08 17:47:55
2151
原创 vant2表单组件Field在iOS上校验出错
在安卓手机上可以正常校验，但iOS系统无论输入几个字符都会提示错误，原因可能是iOS输入法会输入特殊字符。需要校验用户的输入，长度超出进行错误提示，所以使用了正则表达式进行校验，代码如下。
2022-09-08 17:36:48
1510
原创 《代码整洁之道》——阅读笔记（1）
类名和对象名应该是名词或名词短语；方法名应是动词或动词短语，属性访问器、修改器和断言应该加上get、set、is前缀。如：fetch、retrieve、get；选择指明了计量对象和计量单位的名称，选择体现本意的名称。以数字系列命名（a1， a2， ……
2022-09-05 17:22:04
202
原创 canvas-drag.js?1674:101 Uncaught DOMException: Failed to execute ‘drawImage‘ on ‘CanvasRenderingCont
确保执行drawImage时图片已加载完成。
2022-08-17 17:46:00
837
原创 H5导航栏被IOS系统状态栏覆盖问题解决
而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。index.html文件中添加以下代码。导航栏容器设置CSS属性。
2022-08-16 15:07:14
2122
原创 多行文字整体垂直居中
单行文字垂直居中设置文字line-height等于包裹文字的容器的height多行文字垂直居中div { //容器属性 display: table; text-align: center; margin: 20px auto;}span { //文字属性 display: table-cell; vertical-align: middle; width: 400px; height: 300px;}...
2022-03-31 10:34:41
109
原创 框架源码中的小技巧
1.在函数中传入window或this目的：减少作用域链的查询Vue传入this是为了兼容node，node中没有window而是global2.函数中传入undefinedundefined是一个变量，可以进行赋值；null是关键字不能赋值，也不需要查询作用域链3.defineProperty使属性不可更改将属性在原型链直接挂载vue.prototype.$router，属性可以随意修改；使用Object.defineProperty(vue.prototype, "$router", {
2021-11-05 08:56:46
98
原创 ES5类式继承
1. 默认模式function Parent () { this.name = 'p';}Parent.prototype.say = function () { console.log('hello');}function Child () {}Chid.prototype = new Parent();var p = new Parent();var c = new Child();p.hasOwnProperty('name');//truec.hasOwnProperty
2021-03-31 15:48:07
92
原创 js函数柯里化
柯里化处理函数function currying(fn) { var store_arg = Array.prototype.slice.call(arguments, 1);//取出参数 return function() { var new_arg = Array.prototype.slice.call(arguments, 0), args = store_arg.concat(new_arg); return fn.apply(null,args); } }柯里化的使用
2021-03-31 09:10:02
83
原创 ES5对象
ES5中的继承1. js有两种类型的对象原生的（Native）包括：内置对象（日期Date，数组Array等）、用户自定义对象（var o = {})主机的（Host）包括：windows和DOM对象2. ECMAScript5 特性增加了一些新的内置对象、方法和属性，增加了strict模式...
2021-03-30 14:18:59
169
原创 节点的nodeType属性
节点的nodeType属性：数值常量和字符常量节点类型数值常量字符常量Element（元素节点）1ELEMENT_NODEAttr（属性节点）2ATTRBUTE_NODEText（文本节点）3TEXT_NODEComment（注释节点）8COMMNET_NODEDocument（文档节点）9DOCUMENT_NODEDocumentType（文档类型节点）10DOCUMENT_TYPE_NODEDocumentFragmen
2021-03-28 17:38:02
896
转载 js检测不同设备的方法
参考：https://blog.51cto.com/antlove/1923385/* 是否是android */ function isAndroid(){ var userAgent = window.navigator.userAgent; if(/android/i.test(userAgent)) { return true; } return false;};/* 是否是IOS */function isIOS(){ var userAgent = window.nav
2021-03-25 23:08:54
242
原创 BFC
参考文章：https://segmentfault.com/a/1190000016721094什么是BFCBlock Formatting Context，中文直译为块级格式上下文。BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。BFC特性内部的Box
2021-03-25 23:05:32
76
原创 html文件中script标签defer属性和async属性的区别
script标签的使用分三种情况1.没有defer或async属性浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载。2.async属性如：<script async src="index.js"></script>表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行。3.defer属性如：<script defer src="index.js"
2021-03-25 21:02:51
290
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人