- 博客(31)
- 收藏
- 关注
RSS订阅原创 H5 小游戏开发（红包雨、打地鼠、拼图、老虎机）
一段时间没更新，是因为公司下面的子公司移动端开发需要人员去支援，好了，鄙人被派去了，主要完成四个小游戏的H5开发。接着挨个介绍这四个小游戏我是怎么完成的，以下只贴上核心代码文件，想要直接cv运行的话，可能不行嗷，看懂逻辑，自己去改也是一种学习过程！有问题私信我。
2024-04-01 10:14:34
520
原创 vue3中国省市区三级联动options简洁写法（无依赖）
其中 provinceArr、cityArr、areaArr 绑定options选项，province、city、area 绑定input 输入框。同样，这里的市默认选中第一个，city 也是双向绑定到 输入框， 为了能够在页面随时响应式改变，添加了一个watch 监听。这样就拿到了一个省份数组，这里随机默认选中第一个，北京市，这里 province 变量用来绑定输入框的值。2、能够拿到 省份、市、区 的 options 数组来绑定就可以了。这里同样默认选中第一个，当市变化时，区也会切换到对应的市区数据。
2024-03-04 14:09:24
560
原创 JS数组：new Array() Array.of() Array.from()
最近在整理数据的时候想要创建单个元素的数组的，但是发现实例不出来，很奇怪，网上查了下，发现使用new Array无法达到效果，假如创建单个元素 [1] ,因为new Array(1)返回的也只是[empty × 1]基于上述情况，个人觉得有必要巩固下基础知识，前端就是知识杂而多，本人最近一直在追求技术知识的广度，没照顾到根基，今天来总结下数组的知识。
2024-02-05 09:34:31
390
原创 Vue3 中的各种ref
ref(): 接收一个值并返回一个响应式的对象，可以使用.value 属性来访问和修改这个值。toRef(obj, key):根据一个响应式对象中的一个属性，创建一个响应式的 ref，并且该 ref 和原对象中的属性保持同步。toRefs(obj): 将一个响应式对象转换成一个普通对象，其中普通对象的每个属性都是响应式的 ref。isRef(value): 判断某个值是否是 ref 对象。unref(value): 用于解除响应式引用。
2024-02-04 11:00:10
1061
原创 常用的前端地图框架
ArcGIS API for JS 是较为学院派的前端地图库，它是ArcGIS开发套件中的一部分，和桌面端和服务器端ArcGIS软件有较好的协作。百度地图 JS API 是传统的二维地图，百度地图 API GL 是三维地图，它们依赖百度地图提供的后台服务。Mapbox GL JS 是目前最新潮的前端地图库，它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的，但一般依赖于Mapbox公司提供的底图服务。Leaflet 是最著名的前端地图可视化库，它开源、体积小、结构清晰、简单易用。
2024-01-25 16:10:21
542
原创 Vue 设置导航吸顶
在浏览器上下滚动的时候，如何距离的顶部的距离大于78px,吸顶显示，小于78px则隐藏。工具类安装：npm i @vueuse/core。
2024-01-25 14:07:40
515
原创 Js一些冷门的高级方法（持续更新）
这个方法常在框架源码中体现。setInterval与setTimeout它可以让我们在指定的时间间隔内重复执行一个操作，不会考虑浏览器的重绘，而是按照指定的时间间隔执行回调函数，可能会被延迟执行，从而影响动画的流畅度。createNodeIterator() 方法是 DOM API 中的一个方法，用于创建一个 NodeIterator 对象，可以用于遍历文档树中的一组 DOM 节点。特殊场景会用上，比如你登录了淘宝的网页，当你下拉滑块的时候，下面的图片不会立即加载出来，有一个懒加载的效果。
2024-01-24 10:54:12
1184
原创 await-to-js代替try..catch..捕获异常
在开发中我们经常使用async和await关键词解决异步任务，但是不能捕获错误信息,解决 async await 发请求，处理异常时候多出 try catch 代码块问题。
2024-01-23 16:47:39
472
原创 对象类型常用的js原生方法
js中对象的方法虽然有众多，但是业务项目中几乎很少能够用到，如果是比较，感觉还是对比运算符会比Object.is更方便一些。如果是对对象进行冻结、密封、禁止扩展的场景更是少之又少，访问原型链在业务需求里也是比较少的。访问对象中是否存在这个属性使用in 操作符更方便些，但也不乏会有极少数场景可以使用到Object.hasOwn等方法感觉使用Object.groupBy对数据进行分组是比较好的方法，但是兼容性可谓是一言难尽。目前使用最多的就是Object.keys来对对象进行判断或者遍历。
2024-01-23 16:23:24
951
原创 Vue中的$attrs
今天产品经理要求做保留某组件全部功能，还要在它的基础上增加东西。如果不嫌麻烦的话就笨办法，但是想一下怎么只用少量代码高效的二次封装组件呢。
2024-01-23 10:35:25
687
原创 迈向中高级前端工程师要必备14种性能优化方案
web缓存主要指的是两部分：浏览器缓存和http缓存。浏览器缓存比如,localStorage,sessionStorage,cookie等等。这些功能主要用于缓存一些必要的数据，比如用户信息。比如需要携带到后端的参数。亦或者是一些列表数据等等。像localStorage，sessionStorage这种用户缓存数据的功能，他只能保存5M左右的数据，多了不行。cookie则更少，大概只能有4kb的数据http缓存官方介绍:Web 缓存是可以自动保存常见文档副本的 HTTP 设备。
2024-01-22 11:48:44
1059
原创 lodash中那些高频使用的好用方法
由于是深度合并，userOptions 中的 settings 对象将合并到 defaultOptions 的 settings 中，而不是替换掉它。详细解释：在这个例子中，pick 用于从 user 对象中选择性地包含 name 和 email 属性。详细解释：此代码示例中使用 chunk 函数将一个大数组分割成多个小数组，每个数组包含 pageSize 个元素。详细解释：在此示例中，get 用于安全地访问嵌套的 name 对象，即使 info 或 name 属性不存在也不会导致错误。
2024-01-19 11:21:49
824
1
原创 总结JS数组的几十种方法
与indexOf一致，只不过是返回最后的索引位置，也可以理解为他是从数组的右边开始往左找元素，并返回第一个找到的元素的索引，没找到则返回-1//所有的结果恰恰与indexOf反过来了//返回索引值//5//查找6，从索引为3的位置开始找//2。
2024-01-19 10:39:58
776
1
原创 es6高级技巧（持续更新）
由于每一个 Symbol 值都是不相等的，这意味着 Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性。Promise.allSettled()方法返回一个在所有给定的promise已被解析或被拒绝后决议的promise，并带有一个对象数组，每个对象表示对应的promise结果。注意，Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的。Array.from()方法从类似数组或可迭代对象创建一个新的数组实例。
2024-01-12 11:29:24
320
1
原创 v3操作dom方法
适用于，单一 dom 元素或者个数较少的场景通过对 div 元素添加 ref 属性，为了获取到这个元素，声明了一个与 ref 属性名称相同的变量，然后通过 [变量名].value 的形式即可获取该 div 元素。例子${
2024-01-03 14:21:20
354
1
原创 es6之数组的flat()，flatMap()
flatMap()方法对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。上面代码中，原数组的成员里面有一个数组，flat()方法将子数组的成员取出来，添加在原来的位置。上面代码中，flat()的参数为2，表示要拉平两层的嵌套数组。如果原数组有空位，flat()方法会跳过空位。
2023-12-28 11:32:11
339
1
原创 前端终止请求---axios终止请求
如果我们想要在终止请求之后，不影响后续请求的正常发出，且后续请求也是可以被终止的，那么需要在每次发出请求之前，都通过构造函数创建一个新的的 AbortController，每次请求绑定的都是新的AbortController，这样才能做到多次请求之间不干扰。 同理，如果我们想要在终止请求之后，不影响后续请求的正常发出，且后续请求也是可以被终止的，那么需要在每次发出请求之前，都创建一个新的的 CancelToken，每次请求绑定的都是新的CancelToken，这样才能做到多次请求之间不干扰。
2023-12-12 17:31:25
1515
1
原创 VueUse--常用的功能
useLocalStorage、useStorage——响应式本地化存储，用作本地数据持久化。链接: http://t.csdnimg.cn/VkonZ。useCounter——具有实用功能的基本计数器。useDebounceFn——防抖。useMouse——获取鼠标位置。useTitle——设置网页标题。
2023-12-12 14:53:56
113
1
原创 elementui设置点击点击事件，会触发两次
事件是加在label上的，第一次触发是点击label，第二次点击了label标签，label标签与input标签关联 ->相当于点击input->input通过冒泡触发了方法。在使用饿了么组件radio时，@click.native，调用原生方法会触发两次效果。
2023-11-22 15:36:53
517
原创 【前端】分块加载大数据（遇到较大的数据请求，如何加快响应速度）
上面示例会出现的问题：如果用户的网络不是很好，会出现等很久很久都无法拿到服务器的响应结果，如果需要在页面上做显示，会导致看不到东西，一直在请求，客户端白屏，用户体验不好。一块一块的读数据，可能会出现，第一块数据的最后一个字节是第二块数据的第一个字节。此行代码代表，响应体传输完毕，但是数据过大的话，导致传输过程十分漫长，导致了白屏。使用分片处理替代，使用一些API。此行代码代表，响应头传输完毕。
2023-11-19 15:10:31
101
原创 vue自定义指令-directives
先看一下官网定义：除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。以上最基础的例子。
2023-06-14 14:16:41
42
原创 Object.keys(), Object.values(),Object.entries()
/ Object.entries()方法 以Array 作为参数的时候，遍历得到的是一个二维数组，数组里面的每一项[index, value] 形式。Object.values()方法 以Array 作为参数的时候，遍历得到的是数组的每一项的值。// Object.keys()方法 以Array 作为参数的时候，遍历得到的是数组的下标。原文章：http://t.csdn.cn/vvUWc。
2023-06-08 17:13:25
39
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人