- 博客(44)
- 收藏
- 关注
RSS订阅原创 git回退版本
如果想将代码恢复到之前某个提交的版本，且那个版本之后提交的版本都不要了，就可以使用 git rest原理： git reset的作用是修改HEAD的位置，即将HEAD指向的位置改变为之前存在的某个版本操作：查看版本号：git log，也可以上代码托管网页上查看history，找到需要回滚的目标版本号使用“git reset --hard 目标版本号”命令将版本回退。
2024-12-12 16:35:30
2226
原创 JavaScript中有点骚操作的小技巧
这个技巧可以快速判断值的 truthiness，无论是数字、字符串、对象等，都可以简洁地转换为布尔类型。标签模板可以处理复杂的模板场景，如格式化字符串、国际化等，非常灵活。用了 + 号的隐式转换，把 Date 对象转换为数字，也就是时间戳。这个操作符会把数字转换为 32 位整数，类似于 Math.floor() 的效果，但更简洁。avaScript 的 || 和 && 不仅可以用来做逻辑判断，还能帮你写出更简洁的代码。但骚气一点的玩法是标签模板字符串，它允许你自定义模板字符串的处理逻辑。
2024-11-01 14:03:28
892
原创 利用ExcelJS封装一个excel表格的导出
PS：上文的selectedRowArr变量是我项目里的，自己去塞数据，数组对象形式。ExcelJS 操作和写入Excel 文件。
2024-10-31 14:22:37
530
原创 vue 跳转页面-$router.resolve和$router.push区别
用函数式编程this.$router.push跳转，用query传递一个对象时要把这个对象先转化为字符串，然后在接收的时候要转化为对象，要不然会接收不到参数。要不就把参数分开传递，不要放到对象里。this.$ router.push用query传参对象时需注意的地方。第二种方法：不要套在对象里直接传递。
2024-08-23 09:31:29
731
1
原创 $nextTick、$forceUpdate和$set
而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，由于在mounted时期没有进行渲染，所以规则也没有绑定上，因此初始化时不符合显示条件的不会生成规则，导致后面切换条件，显示的输入框的校验不会生效。结果： 第一次点击输出 old Message -----------------------，第二次点击输出 new Message -----------------------结果：不管第几次点击，都输出 new Message -----------------------
2024-07-24 17:16:29
1039
原创 前端发布项目后，解决缓存的老版本文件问题
4、发起ajax请求，请求version.json文件获取version时间戳，和本地保存的上一次的时间戳做比较，如果不一样，则进行对应的操作。3、在每次执行webpack构建命令，都会在dist目录下生成一个version.json文件，里面有一个字段叫version，值是构建时的时间戳，每次构建都会生成一个新的时间戳。每次打包发版时都使用webpack构建一个version.json文件，文件里的内容是一个随机的字符串（我用的是时间戳），每次打包都会自动更新这个文件。
2024-07-09 10:19:24
1446
原创 Axios 源码中拦截器的实现
在 Axios 的源码中，拦截器是通过一个 AxiosInterceptorManager 实例来管理的，它维护了一个拦截器数组。Axios 的拦截器实现基于 Axios 的核心原理，即 Axios 实例是一个包含请求和响应拦截器堆栈的对象。当发出请求或接收响应时，Axios 会遍历这些拦截器，并按照添加的顺序执行请求拦截器，以及按照相反的顺序执行响应拦截器。在 Axios 的完整实现中，这个拦截器机制被集成到了 Axios 的请求发送和响应处理流程中。
2024-06-04 11:19:36
458
原创 nginx优化
一般来说，都需要将动态资源和静态资源分开，将静态资源部署在Nginx上，当一个请求来的时候，如果是静态资源的请求，就直接到nginx配置的静态资源目录下面获取资源，如果是动态资源的请求，nginx利用反向代理的原理，把请求转发给后台应用去处理，从而实现动静分离。例如我们通过axios去访问/police/getList这个后台接口时，nginx会将这个请求转发到ip端口为http://192.168.1.182:8852的后台中，后台将结果返回给nginx，nginx再把结果给到浏览器，实现反向代理。
2024-05-28 14:00:38
828
原创 Nginx配置及优化
针对自己上线项目的前端，nginx是必须要了解和熟悉的，nginx.conf这个文件是我们的核心文件。root html;root html;MD5;# }#}除掉了注释之后的nginx代码events {
2024-05-28 13:32:51
1582
原创 前端命令行部署
最近接了一个项目，发版本需要把dist包给后端部署服务，再加上产品那边需求不稳定，改了又改，一天要发好几个，不仅跟我配合的后端不胜其烦，本人也是很烦。最近在网上看到一个npm自主部署的包–deploy cli工具，配置了一下，还是很好用的。记录下学习以及配置的过程。
2024-05-27 14:34:58
591
原创 H5 小游戏开发（红包雨、打地鼠、拼图、老虎机）
一段时间没更新，是因为公司下面的子公司移动端开发需要人员去支援，好了，鄙人被派去了，主要完成四个小游戏的H5开发。接着挨个介绍这四个小游戏我是怎么完成的，以下只贴上核心代码文件，想要直接cv运行的话，可能不行嗷，看懂逻辑，自己去改也是一种学习过程！有问题私信我。
2024-04-01 10:14:34
1439
原创 vue3中国省市区三级联动options简洁写法（无依赖）
其中 provinceArr、cityArr、areaArr 绑定options选项，province、city、area 绑定input 输入框。同样，这里的市默认选中第一个，city 也是双向绑定到 输入框， 为了能够在页面随时响应式改变，添加了一个watch 监听。这样就拿到了一个省份数组，这里随机默认选中第一个，北京市，这里 province 变量用来绑定输入框的值。2、能够拿到 省份、市、区 的 options 数组来绑定就可以了。这里同样默认选中第一个，当市变化时，区也会切换到对应的市区数据。
2024-03-04 14:09:24
1081
原创 JS数组：new Array() Array.of() Array.from()
最近在整理数据的时候想要创建单个元素的数组的，但是发现实例不出来，很奇怪，网上查了下，发现使用new Array无法达到效果，假如创建单个元素 [1] ,因为new Array(1)返回的也只是[empty × 1]基于上述情况，个人觉得有必要巩固下基础知识，前端就是知识杂而多，本人最近一直在追求技术知识的广度，没照顾到根基，今天来总结下数组的知识。
2024-02-05 09:34:31
1039
原创 Vue3 中的各种ref
ref(): 接收一个值并返回一个响应式的对象，可以使用.value 属性来访问和修改这个值。toRef(obj, key):根据一个响应式对象中的一个属性，创建一个响应式的 ref，并且该 ref 和原对象中的属性保持同步。toRefs(obj): 将一个响应式对象转换成一个普通对象，其中普通对象的每个属性都是响应式的 ref。isRef(value): 判断某个值是否是 ref 对象。unref(value): 用于解除响应式引用。
2024-02-04 11:00:10
1808
原创 常用的前端地图框架
ArcGIS API for JS 是较为学院派的前端地图库，它是ArcGIS开发套件中的一部分，和桌面端和服务器端ArcGIS软件有较好的协作。百度地图 JS API 是传统的二维地图，百度地图 API GL 是三维地图，它们依赖百度地图提供的后台服务。Mapbox GL JS 是目前最新潮的前端地图库，它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的，但一般依赖于Mapbox公司提供的底图服务。Leaflet 是最著名的前端地图可视化库，它开源、体积小、结构清晰、简单易用。
2024-01-25 16:10:21
798
原创 Vue 设置导航吸顶
在浏览器上下滚动的时候，如何距离的顶部的距离大于78px,吸顶显示，小于78px则隐藏。工具类安装：npm i @vueuse/core。
2024-01-25 14:07:40
664
原创 Js一些冷门的高级方法（持续更新）
这个方法常在框架源码中体现。setInterval与setTimeout它可以让我们在指定的时间间隔内重复执行一个操作，不会考虑浏览器的重绘，而是按照指定的时间间隔执行回调函数，可能会被延迟执行，从而影响动画的流畅度。createNodeIterator() 方法是 DOM API 中的一个方法，用于创建一个 NodeIterator 对象，可以用于遍历文档树中的一组 DOM 节点。特殊场景会用上，比如你登录了淘宝的网页，当你下拉滑块的时候，下面的图片不会立即加载出来，有一个懒加载的效果。
2024-01-24 10:54:12
2183
原创 await-to-js代替try..catch..捕获异常
在开发中我们经常使用async和await关键词解决异步任务，但是不能捕获错误信息,解决 async await 发请求，处理异常时候多出 try catch 代码块问题。
2024-01-23 16:47:39
751
1
原创 对象类型常用的js原生方法
js中对象的方法虽然有众多，但是业务项目中几乎很少能够用到，如果是比较，感觉还是对比运算符会比Object.is更方便一些。如果是对对象进行冻结、密封、禁止扩展的场景更是少之又少，访问原型链在业务需求里也是比较少的。访问对象中是否存在这个属性使用in 操作符更方便些，但也不乏会有极少数场景可以使用到Object.hasOwn等方法感觉使用Object.groupBy对数据进行分组是比较好的方法，但是兼容性可谓是一言难尽。目前使用最多的就是Object.keys来对对象进行判断或者遍历。
2024-01-23 16:23:24
1101
原创 Vue中的$attrs
今天产品经理要求做保留某组件全部功能，还要在它的基础上增加东西。如果不嫌麻烦的话就笨办法，但是想一下怎么只用少量代码高效的二次封装组件呢。
2024-01-23 10:35:25
3105
原创 迈向中高级前端工程师要必备14种性能优化方案
web缓存主要指的是两部分：浏览器缓存和http缓存。浏览器缓存比如,localStorage,sessionStorage,cookie等等。这些功能主要用于缓存一些必要的数据，比如用户信息。比如需要携带到后端的参数。亦或者是一些列表数据等等。像localStorage，sessionStorage这种用户缓存数据的功能，他只能保存5M左右的数据，多了不行。cookie则更少，大概只能有4kb的数据http缓存官方介绍:Web 缓存是可以自动保存常见文档副本的 HTTP 设备。
2024-01-22 11:48:44
1253
原创 lodash中那些高频使用的好用方法
由于是深度合并，userOptions 中的 settings 对象将合并到 defaultOptions 的 settings 中，而不是替换掉它。详细解释：在这个例子中，pick 用于从 user 对象中选择性地包含 name 和 email 属性。详细解释：此代码示例中使用 chunk 函数将一个大数组分割成多个小数组，每个数组包含 pageSize 个元素。详细解释：在此示例中，get 用于安全地访问嵌套的 name 对象，即使 info 或 name 属性不存在也不会导致错误。
2024-01-19 11:21:49
1848
1
原创 总结JS数组的几十种方法
与indexOf一致，只不过是返回最后的索引位置，也可以理解为他是从数组的右边开始往左找元素，并返回第一个找到的元素的索引，没找到则返回-1//所有的结果恰恰与indexOf反过来了//返回索引值//5//查找6，从索引为3的位置开始找//2。
2024-01-19 10:39:58
831
1
原创 es6高级技巧（持续更新）
由于每一个 Symbol 值都是不相等的，这意味着 Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性。Promise.allSettled()方法返回一个在所有给定的promise已被解析或被拒绝后决议的promise，并带有一个对象数组，每个对象表示对应的promise结果。注意，Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的。Array.from()方法从类似数组或可迭代对象创建一个新的数组实例。
2024-01-12 11:29:24
418
1
原创 v3操作dom方法
适用于，单一 dom 元素或者个数较少的场景通过对 div 元素添加 ref 属性，为了获取到这个元素，声明了一个与 ref 属性名称相同的变量，然后通过 [变量名].value 的形式即可获取该 div 元素。例子${
2024-01-03 14:21:20
441
1
原创 es6之数组的flat()，flatMap()
flatMap()方法对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。上面代码中，原数组的成员里面有一个数组，flat()方法将子数组的成员取出来，添加在原来的位置。上面代码中，flat()的参数为2，表示要拉平两层的嵌套数组。如果原数组有空位，flat()方法会跳过空位。
2023-12-28 11:32:11
383
1
原创 前端终止请求---axios终止请求
如果我们想要在终止请求之后，不影响后续请求的正常发出，且后续请求也是可以被终止的，那么需要在每次发出请求之前，都通过构造函数创建一个新的的 AbortController，每次请求绑定的都是新的AbortController，这样才能做到多次请求之间不干扰。 同理，如果我们想要在终止请求之后，不影响后续请求的正常发出，且后续请求也是可以被终止的，那么需要在每次发出请求之前，都创建一个新的的 CancelToken，每次请求绑定的都是新的CancelToken，这样才能做到多次请求之间不干扰。
2023-12-12 17:31:25
3230
1
原创 VueUse--常用的功能
useLocalStorage、useStorage——响应式本地化存储，用作本地数据持久化。链接: http://t.csdnimg.cn/VkonZ。useCounter——具有实用功能的基本计数器。useDebounceFn——防抖。useMouse——获取鼠标位置。useTitle——设置网页标题。
2023-12-12 14:53:56
533
1
原创 elementui设置点击点击事件，会触发两次
事件是加在label上的，第一次触发是点击label，第二次点击了label标签，label标签与input标签关联 ->相当于点击input->input通过冒泡触发了方法。在使用饿了么组件radio时，@click.native，调用原生方法会触发两次效果。
2023-11-22 15:36:53
947
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人