- 博客(50)
- 收藏
- 关注
原创 封装动画函数
至于具体需要利用这两个时机完成什么,或者做点什么,就看各自的业务需求了,还可以根据你自己的需求作出更多扩展,比如传递多个起始值可以执行多组动画。首先就是计时器的id:timer;然后运动的总次数:count;当前的运动次数:curCount;当前值:curValue。其实到现在,我们的这个插件已经实现的差不多了,只是缺少一些值的计算和停止条件。当然经过 gif 的转换和录屏本身的原因,会存在不小的抖动。我们还需要那些属性呢?
2024-01-10 17:04:48 886
原创 Vue-根据角色获取菜单动态添加路由
如果大家写过后台管理系统的项目,那么动态路由一定是绕不开的,如果想偷懒的话,就把所有路由一开始都配置好,然后只根据后端返回的菜单列表渲染就好菜单就好了,但是这样的隐患就是我在地址栏输入的地址的时候,也会进入这个页面,不偷懒的方法就是本文要介绍的,真动态路由了,当然不会仅仅只是介绍使用数据怎么换成动态路由添加就好了,会从登录获取token后请求菜单列表...最后注册完成,这一系列流程完整的实现一次,相信对于第一次接触这个案例的朋友会有帮助
2024-01-10 10:35:58 1195
原创 vueRouter 配合 keep-alive 不生效的问题
其实这个不生效的问题根本也不算一个问题,犯的错和写错单词差不多,但是也是一时上头没发现,所以记录一下,如果遇到同样的问题,也希望可以帮助你早点看到这个哭笑不得的错误,哈哈哈。现在我打需求是在切换页面的时候,可以让留言页面输入的内容进行缓存。我们在 app.vue 下是使用 keep-alive,看看效果。其余两个页面和本次问题关系不大,而且都很简单就不展示了。解决还是非常简单的,谨以此文记录我这次马虎的错误。首先看一下我写的简单 demo。这些我就不做赘述了,都非常简单。
2024-01-07 23:13:34 1138 1
原创 自定义事件总线
自定义事件总线属于一种观察着模式,其中包括三个角色发布者(Publisher):发出事件(Event)订阅者(Subscriber):订阅事件(Event),并且会进行响应(Handler)事件总线(EvnetBus):无论是发布者还是订阅者都是通过事件总线作为中台的根据上面的分析,我们可以选用 class 的形式来实现,on(){}emit(){}off(){}
2024-01-06 12:17:26 849
原创 保持宽高比
在开发中,多少都会碰到一个需求,保持一个合适的宽高比,比如展示一些图片或者视频的时候,会需要保持合适的宽高比,比如 4:3 16:9 等等,本文介绍两种方式。使用这个 703 * 26% 是不是就和这个 182.77 的值相差无几啊,所以这个经过验证也是没有错的。当然一般情况下这个 box 和 container 的宽度应该是一致的,这里我是为了进行测试而书写的。这是一个比较新的属性,可以非常方便的设置宽高比,使用的方式也非常简单。利用 padding 实现这个需求的话,优点兼容性好,但是会复杂一点。
2024-01-04 11:34:29 1052
原创 实现vue加载指令 v-loading
{ loading:true, color: 'blue', text: '拼命加载中...' ... }通过这些配置来增强指令的效果,有兴趣的可以自己试试i < 12;i ++) {if(!if(!if (!},inset: 0;top: 0;width: 6px;inset: 0;
2024-01-03 17:38:23 1454
原创 CSS 命名规范-BEM
基于组件方式的web开发方法,基本思想是将用户界面分成独立的模块BEM 是一套针对 css 类样式的命名方法BlockElementModifier一个完整的 BEM 类名:block__element–modifier 例如轮播图的下方的点,用于切换展示的图片,其中被选中的点可以命名为 banner__dot–selected__通常用于连接元素,--通常链接不同的形态BEM 具体代表什么呢?block【块】!
2024-01-03 11:33:53 1291 1
原创 requestAnimationFrame 解析
requestAnimationFrame 是浏览器提供的一个方法,我们可以通过 requestAnimationFrame 来告诉浏览器我们需要执行一个动画,并且这个动画触发的时机是浏览器在下次重绘之前调用指定的回调函数更新动画该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行当然也有一些需要注意的地方:若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用。因为是一次性的。
2023-12-31 23:45:40 863
原创 使用递归实现深拷贝
我在测试中都是单独每一项数据进行测试的,是为了更好的观测,实际一个对象都包含这些数据的话也都是 ok的,需要的话可以自己测试,而且写下来就会发现,其实逻辑都是差不多的,可以根据你实际的情况进行增加或者减免,在日常的开发中使用 JSON 序列化一般也可满足我们的需求,不过知道不用和不知道还是存在本质的区别的,可能现在有些你学习的技术没有实际的意义,但是只有积累的足够多的时候你才能完成一些本质上的突破很多事情不是因为看到了希望才去坚持,而是因为坚持了才能看到希望})})if (![] : {}
2023-12-31 21:20:14 1083
原创 JSON 详解
stringify 和 parse 搭配使用的时候,可以完成深拷贝,不敢存在一些限制,比如函数,循环引用,symbol 等等一些清空都是无法使用这种方式完成深拷贝的。可以看到,obj 并没有因为修改了 obj2 的值而受到影响,在一些简单的 JSON 形式的数据的对象时,使用此方法是一种非常不错的选择。此时输出的结果,就不是单纯的一行字符串,而是经过美化的格式,在一些调试查看数据的时候,还是非常好用的。此时就可以发现,只转换了我们需要的部分,当我们存在这样的需求的时候,使用这个参数,是非常方便的。
2023-12-30 14:37:15 962
原创 搜索关键字高亮
我个人觉得,在空闲的时候时不时写一个小功能,日积月累,当你以后遇到需要使用的时候,就可以直接拿来使用,当然了。在筛选数据的时候,就可以感觉到如果需要往下执行,我们还缺少一个条件,关键词匹配的条件,关键词匹配,我们可以想到什么?是不是正则表达式呢?然后我们就应该来思考一下,前置条件,在这里,我们明显只有一个条件,那就是有没有关键词,有的话如何,没有的话又如何,首先我们第一步是不是要通过这个有没有关键词进行筛选数据呢?这个数据的筛选,是不是需要,可以自己根据自己的需求来设计,这个案例整体是不是还是比较简单呢。
2023-12-30 10:27:35 974
原创 基于element-ui table组件的二次封装
使用插槽之后,就已经可以满足日常的基本使用了,如果你还需要其他的需求,可以在此基础上进行扩展比如序列号,勾选状态等等,亦或者和其他组件配合,再次封装为一个组件,通过这种分层的思想,可以解决很多业务的问题。
2023-12-29 12:15:12 1749
原创 参数归一化-实现时间格式化
所以应该怎么处理呢?不知道大家有没有尝试封装过一个时间格式化的函数啊,在之前我封装的时候,开始是觉得手到擒来,但是实践之后发现写非常的shi啊,大量的分支判断,哪怕是映射起到的作用也只是稍微好一点,不过比较好的是,当天晚上我就看见了袁教头的参数归一化讲解啊,立马就让我眼界大开,如果你也不知道,就一起来看一下。时间格式化,一个基础的知识,也没有什么难度,但是如果要变得通用一点,那么就不是那么容易处理了。那诸如这些情况,怎么写呢,最简单粗暴的就莫过于 if 判断了,但是这种判断写起来的话可想而知。
2023-12-29 10:45:21 1036
原创 大量数据的渲染优化-分页渲染方案
从点击渲染开始,经过了一段较长的时间才渲染出来了dom,这还只是一些简单的dom结构,如果是一些复杂的dom的结构,那相信时间会更加的漫长,而实际上我们通常是不需要一次性直接看到全部的数据的,只需要满足最开始展示在容器范围内的数据即可,或者适当多出一些,所以我们不难想到,只要我分开渲染,每次渲染一部分,虽然总时间变长,但是从体验上来说,会好上很多。]例如这样,就比较适合我们进行数据的操作了。此时就可以看到,渲染就不会出现一开始那样的长时间的卡顿或白屏,而且滚动条还在自动往上滑动,就可以表示还在不停的渲染。
2023-12-28 12:33:33 862
原创 JavaScript实现并发请求
比如在前端一些大文件的分片上传,如果分片后上传完成一个之后再上传,那么效率就会比较低,但是如果不限制,一次性都发送,那么又会太大,所以我们需要控制一下发送的数量,也就是在一次发送的队列中,最多允许多少个任务一起执行。那肯定不行,当最后一个任务完成的时候,此时索引已经满足数组长度-1了,但是你无法保证和他一个在一个队列的任务已经完成了,所以我们还要定义一个变量,来确定是否完成。可以看到,因为随机的原因,导致执行完成的顺序虽然不一致,但是还是保证了结果与数据源的顺序一致。现在增加一些输出语句,查看结果。
2023-12-27 13:02:35 985
原创 flex布局中滚动条展示内容时部分内容无法显示
这段时间看了一下之前的demo,发现了当时记录了一句 justify-content: center;会影响滚动条内容展示,觉得还是记录一下。
2023-12-27 10:15:03 802
原创 原生 JS 手写日历组件
并不是忘记了解析后面的代码,后面的代码只是简单的获取dom,根据条件生成元素,通过方法来修改年月值,再次调用 getCalendar方法生成新的 dom 在渲染即可,所以就不用解析了。
2023-09-10 23:42:33 281
原创 BOM - window 对象
提示输入弹窗,可以记录一些用户输入的值,点击确认返回用户输入的值,没有输入返回空字符串,点击取消返回 null。也是弹出一个弹窗,但是具备返回值,点击确认返回 true 点击取消返回 false。表示历史记录,只能获取当前网站访问了那些网页,但是权限也很低。当然还有更多配置,可以自行查看 mdn 文档,弹出一个提示弹窗,样式和浏览器有关。herf 属性:目前的地址。记录浏览器的一些信息。
2023-07-27 17:15:17 69
原创 DOM - 补充
获取某个元素的第一个定位的祖先元素,如果没有,则得到 body,body 的 offsetParent 为 null。该方法得到一个对象,该对象记录了该元素相对于视口的距离。// 点击按钮1 ,就模拟触发 div 的鼠标移入事件。// 点击按钮2 ,就模拟触发 div 的鼠标移出事件。相对于该元素的 offsetParent 的坐标。// - 移入背景色变成红色,移除变成蓝色。// - 参数二传入配置,这里禁止冒泡。// 给 div 注册鼠标移出移入事件。// - 参数一传入事件类型。
2023-07-27 11:06:43 77
原创 DOM - 其他事件
通过这个图解,我们可以得知,offsetHeight 和 offsetWidth 是包含边框的,而 clientHeight 和 clienWidth 只是容器的可视区域,只有内容区域和内边距,而 scrollHeight 和 scrollWidth 是实际内容的宽高。当我们调整浏览器窗口大小时就会发生变化,监听的是视口尺寸。此事件可以给元素使用也可给 window 使用。窗口尺寸发生变化运行的事件,window 使用。这个事件触发的频率也和设备以及浏览器版本有关。scroll 窗口发生滚动时运行的事件。
2023-07-26 17:54:15 63
原创 DOM - 表单事件
提交表单事件,仅在 form 元素身上有效,点击按钮时会触发整个表单的提交事件,可以冒泡。文本改变事件(实时触发),这点就与 change 有些区别了,input 的触发是实时的。在点击按钮的时候就触发 form 表单的提交事件,页面也出现了刷新。元素聚焦时触发(能与用户发生交互的元素都可以聚焦)元素失去焦点时触发,也不会冒泡。'inp1 聚焦了'
2023-07-25 12:35:11 20
原创 DOM - 鼠标事件
这次的触发就可以很清晰的看见了,虽然进入 btn 区域时,也触发了离开的时候,但是没有像禁止冒泡前面的时候不仅触发离开还触发进入的事件,只是因为从 box 移入到了 btn ,且 btn 属于上层元素,所以是真的离开了 box 的区域,是一种正常的事件触发。所有的鼠标事件,事件处理程序中的事件对象,都为 MouseEvent,MouseEvent 是一个构造函数。这两个属性是相对于鼠标上一次移动位置,一个移动事件的触发时持续的,所以这两个属性的值,是。这两个属性等效于 clientX 和 clientY。
2023-07-25 09:58:47 182
原创 DOM - 事件对象
文章目录获取事件对象事件对象的通用成员target && srcElement事件委托演练currentTargettypepreventDefault && returnValuestopPropagationeventPhase事件对象也是一个对象,指的是这件事情发生后的一些相关信息,如鼠标点击了一下,这此点击的位置在哪里,是哪个元素触发的等等获取事件对象通过事件处理函数的参数获取,如下:<body> <div class="box
2023-07-20 12:39:00 58
原创 DOM - 事件注册
当然还有一个配置项,passive,当 passive 设置为 true 时,表示事件处理程序不会调用 preventDefault() 来阻止默认行为,这样可以提高滚动性能。比如我们这里将 box 设置为 true,那么按照事件流的方式,输出顺序应该是 box --> btn --> html --> document,其中 box 到 btn 属于事件捕获,而 btn 到 document 属于事件冒泡,至于为什么会是这样的顺序,可以查看我的另外一篇文章。
2023-07-19 14:12:20 73
原创 DOM - 事件之基础概念
因此事件触发的顺序不以注册的顺序为基准,而是以事件流的顺序事件冒泡是 ie 所提出的,事件捕获则是由网景公司提出,并没有统一的规定后续规范退出之后,两种事件流都支持,但是默认情况下,事件是以冒泡的方式触发这个事件流如何修改我们在后续文章中会提到事件源即事件目标,总体如图:事件捕获和事件冒泡会涉及多个元素,但是事件源只会存在一个。
2023-07-19 10:10:29 44
原创 DOM - dom 元素样式
toggle 还可以加入第二个参数,为 true 表示强制添加,不会移除,而为 false 表示轻质移除而不会添加。注意,在 css 中使用短横线链接的属性,在 js 中需要使用小驼峰,且这个只能获取行内样式。而 getComputedStyle 还可以设置第二个参数,第二个参数可以得到元素的。但是在开发中我们一般获取的是最终计算出来的高度或者宽度,所以这种方式就不合适了。所以如果我们通过这个获取宽度,是无法获得的,除非在行内样式里面定义了宽度。dom4 新属性 是一个用于控制元素类名的对象。
2023-07-12 12:01:55 48
原创 DOM - dom 元素操作
为什么需要自定义属性呢?因为有的时候本身定义的 HTML 属性可能并不能够满足我们的使用,这时候就可以自定义属性来实现我们的需求,按照规范来说,自定义属性我们一般以 data- 做为前缀,但是这不是必须的,只是一种规范获取元素的自定义属性:getAttribute,代码如下:
2023-07-11 11:53:28 44
原创 DOM - 获取 dom 节点
parentNode:获取父节点,即父元素节点,现在获取 .box1-top 元素,然后通过 parentNode 获取 .box1-top 元素的父节点 .box。在上面的获取中,我们删除元素之后并没有重新使用方法获取,只是打印了一下保存结果的变量,可以发现结果时实时更新的。其实关系和上述的节点关系获取节点一样,只是获取的节点只包含元素节点。childNodes 获取所有的子节点(包含文本节点和元素节点)lastChild 获取最后一个子节点(包含文本节点和元素节点)
2023-07-08 15:30:25 115
原创 WebApi概述
我们把浏览器宿主环境也叫做 Web Apiapi 即应用程序编程接口,提供一个接口,根据接口的规则进行使用web 就是互联网因此我们把浏览器宿主环境里面提供的对象和函数统称为 Web ApiWebApi 的标准由 w3c(万维网) 制定BOM: Brower Object Model(浏览器对象模型)控制浏览器本身,比如前进回退网页、浏览器窗口的尺寸位置、alert等浏览器弹窗DOM:Document Object Model(文档对象模型)控制整个 html 文档。
2023-07-08 15:02:29 96
原创 nodejs-异常与全局异常处理
前面我们已经谈到过了返回错误类型的格式:HTTP status code、message、errorCode、requestUrl,这些我们可以包裹到一个对象里面msg : 错误信息 , errorCdoe : xxxxx , requestUrl : 'POST /api/data' } // 在 koa 指定本次返回请求结果的 HTTP status code 可以通过 ctx.status 实现 ctx . status = 状态码。
2023-05-24 00:02:11 1165
原创 Promise使用详解及手写
俗话说的好,没有对比就没有伤害,所以我们通过一个案例来认识一下没有 Promise 怎么解决这个异步请求,如下:上述代码实现的功能就是调用 requests 方法,参数一接收一个 id, 参数二接收一个回调函数,模拟根据 id 获取学生信息,获取到数据后调用回调函数执行需要的逻辑,目前可能看着觉得还好是吧,一个回调也能接受那如果我们的业务需要根据上一次的请求结果来决定下一次的请求结果呢,而这种嵌套又不止一层呢,我们在来看一下下面这个案例,如下:这个案例只是演示随意编写的,在实际开发中,可能层级不
2023-05-20 15:41:28 118
原创 JavaScript的显式类型转换和隐式类型转换
如果还不确定我们可以自己换算一下以 123 的十六进制换算为十进制,根据基数乘以指数的n次方来换算,基数就是 123,16 进制指数就是 16,这个次方就是基数的位置从 0 开始,类似索引,我们就可以得出一个式子,1 * 16^2 + 2 * 16^1 + 3 * 16^0,除 0 以外任何数的 0 次方都等于 1,计算结果为 291。先把值转为数值,经过这一层转换在计算 111 自增为 112,null 转为 0,自增为 1,undefined 转为 NaN,自增运算还是 NaN。
2023-05-10 12:22:20 128
原创 深入理解你不知道的 typeof 和 Object.prototype.toString.call()
如果你对 typeof 是只知其用,不知其源的话,这篇文章将非常适合你的阅读,只有了解真相才能获得真正的自由
2023-03-27 03:34:33 325
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人