- 博客(121)
- 资源 (10)
- 收藏
- 关注
RSS订阅
原创 Vue的生命周期的详解
这里讲的el是真实的el。在真实的el之前存在前，在beforeMount中的其实是页面中的#app，是挂载的目标。在这里跟vue图示有出入，vue图示中说明在beforeUpdate阶段，只有data中的数据改变，而试图的还未更新，视图中还是旧的数据，但在示例中，beforeUpdate钩子函数打印el可看出试图中的数据已更新。这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动。
2022-10-19 09:16:18
779
2
原创 ES6 Promise用法小结
（也就是说then方法中接受两个回调，一个成功的回调函数，一个失败的回调函数，并且能在回调函数中拿到成功的数据和失败的原因），所以我们能够分别拿到成功和失败传过来的数据就有以上的运行结果。以上是对promise的resolve用法进行了解释，相当于resolve是对promise成功时候的回调，它把promise的状态修改为fullfiled，那么，reject就是失败的时候的回调，他把promise的状态修改为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。
2022-10-10 17:46:04
383
1
原创 什么是Mixin？带你了解Vue中的Mixin混入
Vue框架现在基本上已经占据了前端的半壁江山，Vue的数据驱动和组件化的思想深入人心。Vue全家桶可能很多小伙伴都比较熟悉，在工作上也用得比较得心应手。但是今天讲的Vue中这个Mixin的用法我相信还有很多小伙伴不知道或者没有用过，或者有些小伙伴接手别人的Vue项目时看到里面有个Mixin文件夹，也会用，但是一直都是云里雾里的状态，今天我们就好好聊聊Mixin，争取以后不在犯迷糊。【相关推荐：vuejs视频教程】官方解释：民间解释：将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入
2022-06-22 15:50:17
7722
4
原创 Vuex：弄懂mapState、mapGetter、mapMutation、mapAction
vuex进阶一、state1.1 引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { //存放状态 nickname:'Simba', age:20, gender:'男' }, mutations: {},
2021-09-17 14:13:08
10769
5
原创 Promise、 Async/await 、setTimeOut执行顺序及区别
最终结果：setTimeout属性宏任务，Promise里面的then方法属于微任务，/Await中await语法后面紧跟的表达式是同步的，但接下来的代码是异步的，属于微任务。1、 js是单线程所有主线程的先执行，然后执行的程序，最后执行队列，秉承的原则。包括同步任务、异步任务，又包括宏观任务和微观任务2、执行顺序：同步任务——>微观任务——>宏观任务。
2021-08-30 16:47:46
1730
4
原创 前端实时更新数据的几种方式
先说一下这个动态事件列表的需求：我们的服务器每隔 5 秒会产生一个新的事件，每个事件都有一个 id 字段以及 timestamp 字段，id 和 timestamp 字段都是该事件生成的时间戳，前端会以列表的形式展示目前服务端已产生的所有事件信息，后面当服务器产生新的事件时，前端会获取到最新的事件并添加到页面列表的末尾。一、轮询在本篇文章中我通过图解和实际代码给大家介绍了四种不同的和服务端保持数据同步的方案，看完本篇文章后，相信你后面再遇到类似的需求时，除了短轮询你会有更多的方案可以选择。
2024-05-29 17:58:52
1054
原创 迄今为止最全- 前端性能优化
当我们说前端性能优化的时候，指的可能是不同场景的性能优化。前端涉及性能优化的场景DOMContentLoaded和load事件，分别代表DOM构造完成和首屏资源加载完成。对于之前的页面和现代的服务端渲染的页面，这两个指标都可以很好地衡量首屏内容展示时间。但对于现代复杂的单页应用，都是通过JS操作DOM向页面添加主要内容，对于这种场景，DOMContentLoaded和load事件就不能很好地衡量首屏显示时间了。
2024-05-13 22:03:11
787
原创 迄今为止最全的前端监控体系搭建篇(长文预警)
PV(page view) 是页面浏览量，UV(Unique visitor)用户访问量。PV 只要访问一次页面就算一次，UV 同一天内多次访问只算一次。对于前端来说，只要每次进入页面上报一次 PV 就行，UV 的统计放在服务端来做，主要是分析上报的数据来统计得出 UV。关键时间节点通过window.performance.timing获取。使用webpack devServer模拟请求。
2024-05-13 17:57:57
829
原创 Vue3、 Vue2 Diff算法比较
oldCh和newCh；有下面几个变量：oldStartIdx 初始值=0oldStartVnode 初始值=oldCh[0]oldEndIdx 初始值=oldCh.length - 1oldEndVnode 初始值=oldCh[oldEndIdx]newStartIdx 初始值=0newStartVnode 初始值=newCh[0]newEndIdx 初始值=newCh.length - 1newEndVnode. 初始值=newCh[newEndIdx]对比流程。
2024-04-22 13:50:39
933
1
转载 网站性能优化实战——从12.67s到1.06s的故事
作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动端快速发展的时代，我们的网页不仅只是呈现在用户的PC浏览器里，更多的时候，用户是通过移动产品浏览我们的网页。加之有越来越多的开发者投入到Web APP和Hybrid APP的开发队伍中，性能这一问题又再一次被提上了程序员们重点关注的要素。我曾经看到过这样一句话：一个网站的体验，决定了用户是否愿意去了解网站的功能；而网站的功能，决定了用户是否会一票否决网站的体验。
2024-03-25 20:37:29
57
原创 浏览器缓存知识梳理
当我们第一次访问网站的时候，比如 juejin.cn，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来，这就是缓存。
2024-03-25 17:30:54
1125
原创 递归与回溯
先来看问题，其实问题不难理解：n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上，并且使皇后彼此之间不能相互攻击。上图为 8 皇后问题的一种解法。给定一个整数 n，返回所有不同的 n 皇后问题的解决方案。每一种解法包含一个明确的 n 皇后问题的棋子放置方案，该方案中 'Q' 和 '.' 分别代表了皇后和空位。
2024-03-21 17:20:38
707
原创 动态规划-算法
你是一个专业的小偷，计划偷窃沿街的房屋。每间房内都藏有一定的现金，影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。给定一个代表每个房屋存放金额的非负整数数组，计算你在不触动警报装置的情况下，能够偷窃到的最高金额。打家劫舍 - 198。
2024-03-21 17:18:24
364
原创 贪心算法问题
假设你是一位很棒的家长，想要给你的孩子们一些小饼干。但是，每个孩子最多只能给一块饼干。对每个孩子 i ，都有一个胃口值 gi ，这是能让孩子们满足胃口的饼干的最小尺寸；如果 sj >= gi ，我们可以将这个饼干 j 分配给孩子 i ，这个孩子会得到满足。你的目标是尽可能满足越多数量的孩子，并输出这个最大数值。把饼干和孩子的需求都排序好，然后从最小的饼干分配给需求最小的孩子开始，不断的尝试新的饼干和新的孩子，这样能保证每个分给孩子的饼干都恰到好处的不浪费，又满足需求。一个小朋友最多只能拥有一块饼干。
2024-03-21 17:17:05
875
原创 全排列算法
如果我们选用递归回溯法来解决这个问题，那么最重要的问题就是设计我们的递归函数。，并且此时我们发现处理的属性数组下标已经到达了末尾，那么就放入全局的结果变量。这一项为起点的递归树图，当然这个问题是一个多个根节点的树，请自行脑补。由于这些属性数组是不定项的，所以不能简单的用三重的暴力循环来求解了。位置对应的值，再不断的再以其他剩余的下标作为起点去做下一次拼接。作为递归的起点，那么显然是不可能得到结果的，因为。，那此时我们有一个未完成的结果状态，假设我们叫它。，可以看出排列组合的递归解法还是有一定的难度的。
2024-03-21 16:23:42
450
原创 TS中符号的用法：?、??、 !、 !!
当使用某一个对象中的属性时，若无法确定该对象是否会为空就需要在后面加上一个问号来进行判空处理，表示若不为空时再去访问属性。可将变量转为boolean类型： null、undefined、空字符串 取反之后都为true；只有当左侧为null或者undefined时，才会返回右侧的数；变量后使用表示类型推断排除 null、 undefined，告诉TS此处一定有值。用于类型判断，在!表示该参数是一个可选参数；变量前使用表示取反；
2024-02-27 13:26:32
883
原创 从如何使用到如何实现一个Promise
OK，上面跟大家一起过了一遍Promise的用法以及自己动手实现了一遍Promise，想必看完这篇文章，大家对Promise会有一个更加清晰的认识。
2023-12-19 09:07:01
942
转载 配置Jenkins实现测试环境的自动构建和部署，减少手动操作，提高效率
选择源码管理->Git，输入项目gitee地址，初次使用时会报如下错误添加凭证，点击上图添加，输入gitee的账号密码后点击添加即可，然后选择刚刚添加的凭据，就不会报错了Additional Behaviours（可选），填写目录名，选择后任务会生成一个子目录，便于管理在Build处新增maven命令clean install，然后点击保存->立即构建，执行任务可以点击此处查看构建日志可以看到输出success，表明任务执行成功可以发现服务器中生成了jar包。再次重复1到8的步骤！手动打包常规步骤：。
2023-10-20 09:46:23
548
原创 uniapp\ taro 如何使用 UnoCSS 原子化css
如需更改默认的转换规则，可通过进行修改})presets: [}),],// options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify}),// options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass。
2023-10-20 09:22:29
1877
1
原创 Nacos启动报错
方式1: bin目录进入终端执行： .\startup.cmd -m standalone。2.2、修改startup.cmd： 鼠标右键-显示更多选型-编辑。改成set MODE="standalone"把 set MODE="cluster"
2023-07-07 17:33:30
1743
原创 算法-排序与双指针
具体实现时，需要先确定待排序数组中最大元素的值max，然后创建一个长度为max+1的计数数组count，遍历待排序数组，统计每个元素出现的次数，最后根据计数数组将元素放入相应的位置。具体实现时，需要先确定桶的数量和每个桶的范围，然后遍历待排序数组，将每个元素放入相应的桶中，最后对每个桶内部使用其他排序算法进行排序，最后将所有桶中的元素按照顺序依次放入待排序数组中。归并排序是一种基于分治思想的排序算法，其基本思想是将数组分成两个子数组，递归地对子数组进行排序，然后将两个有序的子数组合并成一个有序的数组。
2023-06-12 17:35:46
956
原创 数据结构和算法
实现一个LRU缓存实现一个LRU缓存求环状链表树的前序、中序、后序遍历树的层序遍历获取树的层级实现 类数组转数组实现 DOM转JSON实现 JSON转DOM实现 树转数组实现 数组转树实现 对象打平实现一个LRU缓存LRU缓存是一种常见的缓存算法，它的全称是Least Recently Used，即最近最少使用。LRU缓存的基本思想是，当缓存空间不足时，将最近最少使用的缓存数据删除，以腾出空间存储新的数据。在这个实现中，LRUCache类有两个方法：get和put。
2023-06-12 16:51:00
1197
原创 6、JS-AJAX
Cookie 是一些数据，存储于你电脑上的文本文件中，当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息，Cookie 的作用就是用于解决 “如何记录客户端的用户信息”：当用户访问 web 页面时，它的名字可以记录在 cookie 中。在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中，服务端通过这种方式来获取用户的信息。
2023-06-09 14:01:04
765
2
原创 3.JavaScript常用对象数组对象
在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象String()：可以将基本数据类型字符串转换为String对象Number()：可以将基本数据类型的数字转换为Number对象Boolean()：可以将基本数据类型的布尔值转换为Boolean对象但是注意：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果，在这一章节中，我们重点介绍String()对象的属性和方法。
2023-06-09 13:19:26
948
原创 对象进阶-继承、原型-原型链
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象，即显式原型，原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。访问一个对象的属性时，先在自身属性中查找，找到返回， 如果没有，再沿着__proto__这条链向上查找，找到返回，如果最终没找到，返回undefined，这就是原型链，又称隐式原型链，它的作用就是查找对象的属性(方法)。
2023-06-08 14:47:36
684
原创 CSS3+HTML5
标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值第三值默认false，表示事件冒泡方式。即使你的标签是空的，这个标签的高度还是会达到默认的行高。备注： 因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。这是一个ie6都存在的bug。
2023-06-02 16:03:15
496
原创 vue-cli4打包优化
map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。page2.js中同时都引用了a.js, b.js， 这时候想把a.js, b.js抽离出来合并成一个公共的js，然后在page1,page2中自动引入这个公共的js，怎么配置呢？组件中频繁引用其他组件或插件。项目中分别有a.js, b.js, page1.js, page2.js这四个JS文件， page1.js 和。
2023-06-02 14:06:14
1492
原创 零基础认识java-后端 项目结构搭建、目录概况
当前端要访问数据的时候后端就提供相应接口，接口的编写是通过 Controller 层监听请求， 数据的处理交给 Service 层，而 Service 层再通过 Mapper 层操作数据库，操作完成后数据再一层层往上走，最后返回给前端。下的测试文件中写测试代码，如下，然后点如下所示运行，没有提示错误，且数据库中成功存入数据，说明项目构建成功，接下来就可以开始写接口了。（1）访问的接口由 Controller 层来处理，所以这里这样定义，要返回所有用户信息，把它当一个命令，交给 Service 层去做。
2023-06-01 10:41:26
2147
1
原创 ts中的implements、extends
extends是继承父类，只要那个类不是声明为final或者那个类定义为abstract的就能继承，JAVA中不支持多重继承，但是可以用接口来实现，extends只能继承一个类，implements可以实现多个接口。这两种实现的具体使用，是要看项目的实际情况，需要实现，不可以修改implements，只定义接口需要具体实现，或者可以被修改扩展性好，用extends。JAVA中不支持多重继承，但是可以用接口 来实现，这样就要用到implements，继承只能继承一个类，b.接口中的方法都是抽象的。
2023-06-01 09:50:27
2459
原创 人生苦短，我用Python。欢迎大家一起分享，你是如何入门Python的~
在线课程：有很多在线课程可以帮助您学习Python，例如Coursera、Udemy、edX等。这些课程通常包括视频教程、练习和项目，可以帮助您系统地学习Python。书籍：有很多Python的书籍可以帮助您学习Python，例如《Python编程从入门到实践》、《Python基础教程》等。这些书籍通常包括理论知识和实践项目，可以帮助您深入了解Python。社区：Python有一个非常活跃的社区，您可以在社区中寻求帮助、分享经验和学习资源。例如Python官方论坛、Stack Overflow等。
2023-05-25 14:58:31
859
2
原创 redis
Redis，英文全称是（远程字典服务），是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。与MySQL数据库不同的是，Redis的数据是存在内存中的。它的读写速度非常快，每秒可以处理超过10万次读写操作。因此redis被广泛应用于缓存，另外，Redis也经常用来做分布式锁。除此之外，Redis支持事务、持久化、LUA 脚本、LRU 驱动事件、多种集群方案。
2023-05-25 13:55:16
1255
原创 js中!和!!的区别及用法
是逻辑与运算，并且可以与任何变量进行逻辑与将其转化为布尔值，“!”则是逻辑与的取反运算，尤其后者在判断类型时代码简洁高效，省去了多次判断null、undefined和空字符串的冗余代码。value ， 先将value转成取反的布尔值，将得到的布尔值再次取反，保证value的值为null，undefined和空字符串的情况下，if体中的代码不会执行。a是有实际含义的变量才执行方法，否则变量null，undefined和'' "空串都不会执行以下代码。的用法是比较灵活的，它除了做逻辑运算常常会用！
2023-05-18 11:05:39
153
高阶函数-函数柯里化- 手写
2024-05-14
echarts实现中国地图、鼠标悬浮、点击跳转对应省市、给省市图标、缩放、拖拽、自适应
2024-04-22
<!- 建议将 npm 的注册表源设置为国内的镜像，可以大幅提升安装速度 -> npm install -g cn
2023-04-18
同步任务顺序： <li>1.console.log("script- 111");</li>
2023-04-18
flex-basis 属性用于设置或检索弹性盒伸缩基准值 注意：如果元素不是弹性盒对象的元素，则
2023-04-18
一、浏览器渲染原理（进程、线程）http请求全过程-浏览器输入url整个过程
2023-04-03
前端取经之路:主要包含前端技术提升、进阶
2023-04-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人