- 博客(24)
- 收藏
- 关注
RSS订阅原创 盒子居中的几种方式
将父元素的 display 属性设置为 table ，子元素的 display 属性设置为 table - cell ，然后使用 vertical - align: middle 实现垂直居中，配合 text - align: center 实现水平居中。父元素相对定位，子元素绝对定位，通过 left: 50%;将父盒子设置为相对定位，子盒子设置为绝对定位，然后将子盒子的 top 、 left 、 right 、 bottom 都设为0，并设置 margin: auto。
2025-04-08 11:08:01
158
原创 vue中计算属性和方法的区别
例如，一个计算属性依赖于多个响应式数据，只有当这些数据中至少有一个发生变化时，计算属性才会重新求值，否则会直接返回之前缓存的结果。在上述代码中，计算属性 reversedMessage 和方法 reverseMessage 实现了相同的功能，但计算属性具有缓存机制，而方法每次都会被重新调用。- 方法：常用于执行一些一次性的操作，或者需要根据不同的参数动态执行的逻辑，如点击事件的处理函数、表单提交的验证函数等。- 计算属性：在模板中以属性的形式被访问，就像访问普通的对象属性一样。
2025-03-31 22:48:29
214
原创 vue中路由的传参模式
传递参数：使用 this.$router.push({ path: '/user', query: { id: 123 }}) 传递参数，参数会显示在URL的查询字符串中。- 传递参数：通过 this.$router.push({ name: 'user', params: { id: 123 }}) 传递参数。- 声明路由：在路由配置中，使用冒号 : 定义参数，如 { path: '/user/:id', component: User }。
2025-03-29 16:27:09
193
原创 webpak优化策略
代码压缩：使用 UglifyJSPlugin （针对JavaScript）、 css-minimizer-webpack-plugin （针对CSS）等插件，压缩代码，去除冗余字符、注释等。- 图片优化：使用 image-webpack-loader 等插件，对图片进行压缩、转换格式等处理，如将 PNG 图片转换为 WebP 格式，以减小图片体积。- 按需加载：通过动态导入（ import() ）实现代码的按需加载，将大的代码块分割成多个小模块，在需要时再加载，提高页面加载速度和响应性能。
2025-03-26 22:56:30
186
原创 Promise 和 async/await 区别
async/await 是基于 Promise ，使用 async 函数来定义异步函数，在函数内部使用 await 暂停异步函数的执行，等待 Promise 被解决。async/await 是 Promise 的语法糖，在代码可读性和顺序执行方面表现更好，而 Promise 在处理复杂的异步操作组合和更底层的异步控制方面更具优势。- Promise 提供了更多的灵活性，如 Promise.all 、 Promise.race 等方法，可以方便地处理多个 Promise。
2025-03-24 23:36:06
318
原创 vue双向绑定原理
在 setter 方法中，Vue 会遍历该属性对应的依赖列表，调用每个依赖（即组件的渲染函数），从而触发组件的重新渲染，实现视图的更新。同时，视图层的交互（如用户在输入框中输入内容）通过事件绑定等机制也能更新数据层，从而实现双向绑定。Vue数据双向绑定是指视图层的变化能实时反映到数据层，数据层的变化也能实时更新到视图层。当一个组件渲染时，它会访问数据对象的属性，此时属性的 getter 方法会被调用，Vue 会在这个过程中收集当前组件的渲染函数作为依赖，并将其与属性关联起来，存储在一个依赖列表中。
2025-03-24 20:16:22
315
原创 webpack优化策略
4、优化加载速度： 使用Webpack的插件如MiniCssExtractPlugin来提取CSS代码，使用babel-loader的缓存机制等，以减少构建时间和加载时间。3、使用Tree Shaking： 通过配置Webpack的Tree Shaking功能，只保留项目中实际使用到的代码，剔除未使用的代码，减少打包后的文件大小。2、代码分割（Code Splitting）： 通过配置Webpack的代码分割功能，将项目代码分割成多个块（chunks），并且在需要的时候按需加载。
2024-04-11 15:23:29
463
1
原创 前端项目优化策略
合理使用keep-alive来缓存页面数据，跳过created,mounted钩子，他有自己特定的钩子activted等。解决方案：XSS 前端替换关键字，建议后端也替换，如的替换，避免脚本的执行。解决方案：XSRF增加验证流程，比如输入密码，指纹，短信验证码，人脸识别等。减少vendor.js的体积，通过按需引入第三方库，或者有些资源可以通过script标签引入。使用SouceMap，来还原线上代码，更方便的去定位线上问题。尽可能的使用事件委托来处理事件的绑定，针对老项目jq。
2024-04-11 15:17:52
1033
1
原创 输入URL的那一瞬间浏览器做了什么?
服务器收到这ACK包后，也会对序列号进行加一操作，表示服务器已经确认客户端的回应。DNS的作用类似于电话簿，它将域名与IP地址相对应，使得用户可以通过域名来访问网站，而不需要记住复杂的IP地址，在互联网上，每个网站都有一个唯一的域名，例如www.baidu.com。第四次挥手：客户端接收到服务器的FIN报文段后，会发送一个带有确认号的ACK报文段，确认号是服务器发出的FIN报文段的序列号加上1。⑥本地DNS客户端将IP地址返回给用户的计算机，用户的计算机可以使用这个IP地址来建立与服务器的连接，访问网站。
2024-01-25 17:59:59
378
原创 登录鉴权：cookie、session、sessionId和token
于是就有另一种解决方案：token。用户使用账号密码登录，服务端验证账号密码是否正确，若正确生成sessionId并以cookie的形式返回给前台，浏览器保存cookie，并在下次访问自动带上cookie，服务器在session中匹配前台传过来的cookie，有则不用再登录，否则提示未登录。cookie是一段存储在浏览器中的文本，它可以保存用户的信息，服务端通过设置返回头的set-cookie字段就能返回给浏览器并保存cookie，浏览器又自动设置请求头的cookie字段将cookie传递给服务器。
2024-01-22 16:36:10
1923
原创 JavaScript事件循环
所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。④.执行栈执行完毕，会去任务队列看是否有异步任务，有就送到执行栈执行，反复循环查看执行，这个过程是事件循环(eventloop)1.同步任务与异步任务。
2024-01-19 17:30:24
454
1
原创 前端知识汇总——01数据存储
是栈内存的简称，栈是自动分配相对固定大小的内存空间，并由系统自动释放，遵循FILO（first in last out）先进后出的原则，较为经典的就是乒乓球盒结构，先放进去的乒乓球只能最后取出来。是堆内存的简称，堆是动态分配内存，内存大小不固定，也不会自动释放，堆数据结构是一种无序的树状结构，同时它还满足key-value键值对的存储方式；我们只用知道key名，就能通过key查找到对应的value。比较经典的就是书架存书的例子，我们知道书名，就可以找到对应的书籍。
2023-11-29 16:16:54
131
1
原创 对象数组的排序
开发中经常遇到对数组排序的问题，一般有两种方式排序一种是for循环另外一种是利用数组内置的方法sort，其中sort不仅适用于简单的数组类型排序，也适用于复杂的数据类型排序。
2023-10-09 16:40:04
388
1
原创 vue2数据响应式原理
其中defineReactive这个方法主要是将Object.defineProperty封装到一个函数中，做这一步操作的原因是因为Object.defineProperty设置set属性时需要一个临时变量来存储变化前的值，通过封装利用闭包的思想引入val，这样就不需要在函数外面再设置临时变量了。Vue主要采用的是改装数组方法的方式（push、pop、shift、unshift、splice、sort、reverse），在保留其原有功能的前提下，将其新添加的项变为响应式的。什么是数据响应式原理？
2023-06-29 16:23:06
432
1
原创 在vue中ajax请求放在created还是mounted中
其中先执行同步任务，alert('created'),alert('mounted') 执行完同步任务后再执行异步任务。首先created和mounted里面的代码都是同步执行的，所以在哪个钩子里面执行ajax都不影响页面渲染。created=>mounted=>组件首次渲染=>api请求=>组件重新渲染。//如果放在created渲染，会多渲染一次，所以建议放在mounted。=>mounted=>组件首次渲染。created=>api请求=>组件重新渲染。mounted=>api请求。
2023-06-27 18:25:05
524
原创 css清除浮动的方式
如果我们在给页面元素设置样式的时候，未给父盒子设置高度，当我在父盒中添加元素的时候，父盒子就会被自动撑开，那是因为浏览器会自己计算父盒子里面元素的高度，那么这个高度也可以理解为父盒子的高度，但是如果给子元素设置float属性，子元素变成浮动元素就会脱离文档流。由于浏览器只计算文档流内的元素高度，因此子元素一旦脱离文档流，父盒子的高度就会变成为0，这就是所谓的。方式1 给父盒子添加一个高度，该方式要先确定子元素的高度，如果子元素的高度不确定则该方式不适用，而且写死高度，不够灵活，还容易出现样式的问题；
2023-06-27 17:01:12
94
原创 事件循环以及宏任务与微任务
javascript是一门单线程执行的编程语言。如果在代码中存在定时任务，单线程执行必然会造成阻塞。但是在真正的开发中并没有存在这种情况，那么是什么原因造成的呢？带着上面的疑问我们可以先了解三个概念：执行栈，宿主环境（浏览器/node），执行队列。js分为同步代码和异步代码。在执行的过程中js是先执行同步代码，具体就是把同步代码统一放到执行栈顺序依次执行。因此我们可以得出js中代码的执行顺序是：同步任务->微任务（js引擎发起）->宏任务。js把异步代码分为微任务与宏任务。
2023-06-27 15:21:01
126
原创 闭包详解以及使用场景
a.防抖 （高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。②.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。当我们想要访问闭包内部的变量时，就可以使用return，将内部函数作为返回值。d.用于公共方法或者包的封装，比如数据响应式原理，axios二次封装等。闭包一定会内存泄漏？b.节流（高频率触发的事件,在指定的单位时间内，只响应第一次。①避免变量被污染，②变量私有化，③保存变量，常驻内存。
2023-06-27 10:52:32
871
原创 js中数组自带的方法
8.push()方法 用于向数组中添加元素。push与unshift方法都能给当前数组添加元素，不同的是，push是在末尾添加，而unshift则是在开头添加。15.filter()方法 用于过滤数组中满足条件的元素，返回一个新的数组，不会改变原数组。10.splice(start,end,element)方法 用于数组元素的添加/删除/替换，会改变原数组。6.shift()方法 删除数组中第一个元素，且返回该元素，可以改变原数组。5.pop()方法 删除数组中最后一个元素，且返回该元素，可以改变原数组。
2023-06-26 18:22:16
165
1
原创 对象数组去重五种方式
1.双for循环去重。2.map方式。3.forEach与includes去重。4.indexof去重。5.对象访问属性的方法。
2023-06-26 16:16:27
5967
1
原创 vue2与vue3的区别
从Vue3发布以来，我就一直对其非常感兴趣，就一直想着将其投入公司的生产中，但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试；慢慢的发现组合式Api的形式非常适合开发（个人感觉），尤其是Vue3.2推出了setup语法糖后直呼真香。后面公司的新项目几乎全部采用了Vue3了。使用Vue3开发也将近大半年了，所以写了这篇文章对Vue2和Vue3做了一个对比总结，一是为了对这段时间使用Vue3开发做些记录，二是为了帮助更多的小伙伴更快的上手Vue3。本篇文章主要采用选项式Api，组合式Api，
2023-01-04 10:26:35
282
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人