- 博客(14)
- 收藏
- 关注
RSS订阅原创 CSS 样式书写顺序
大部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。
2024-01-31 13:23:30
850
原创 Tree-Shaking 实现原理
Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未曾其它模块使用，并将其删除，以此实现打包产物的优化。所以，ESM 下模块之间的依赖关系是高度确定的，与运行状态无关，编译工具只需要对 ESM 模块做静态分析，就可以从代码字面量中推断出哪些模块值未曾被其它模块使用，这是实现 Tree Shaking 技术的必要条件。
2024-01-30 19:28:11
1095
原创 【前端】图片格式及使用场景
格式优点缺点适用场景gif文件小，支持动画、透明，无兼容性问题只支持256种颜色色彩简单的logo、icon、动图jpg色彩丰富，文件小有损压缩，反复保存图片质量下降明显色彩丰富的图片/渐变图像png无损压缩，支持透明，简单图片尺寸小不支持动画，色彩丰富的图片尺寸大logo/icon/透明图webp文件小，支持有损和无损压缩，支持动画、透明浏览器兼容性不好支持webp格式的app和webview。
2024-01-30 12:50:56
1046
原创 Webpack打包压缩
浏览器从服务器访问网页时获取的 JavaScript、CSS 资源都是文本形式的，文件越大网页加载时间越长。为了提升网页加速速度和减少网络传输流量，可以对这些资源进行压缩。压缩的方法除了可以通过 GZIP 算法对文件压缩外，还可以对文本本身进行压缩。对文本本身进行压缩的作用除了有提升网页加载速度的优势外，还具有混淆源码的作用。由于压缩后的代码可读性非常差，就算别人下载到了网页的代码，也大大增加了代码分析和改造的难度。下面来一一介绍如何在 Webpack 中压缩代码。
2024-01-30 11:31:32
1140
原创 Vue 路由守卫
点击其他组件时，判断是否确认离开。确认执行next()；取消执行next(false)，留在当前页面。1. beforeRouteEnter:(to,from,next)=>{}——到达。2. beforeRouteLeave:(to,from,next)=>{}——离开。to，from参数与上面使用方法一致。next回调函数略有不同。与全局路由守卫用法一致，但是只能针对一个页面使用。组件路由守卫分为到达这个组件时，离开这个组件时。
2024-01-20 13:39:57
351
原创 终止ajax和axios请求
在 Axios 中，取消请求的基本思路是创建一个用于取消的标记（cancel token），并将其与特定请求关联。当需要取消请求时，我们可以使用这个标记通知 Axios 取消发送该请求。提供的取消标记，我们可以在发送请求后随时取消请求，以避免不必要的网络流量和资源浪费。这为我们在前端开发中处理用户操作的中断提供了便利。Axios 提供了 CancelToken 类来创建取消标记。取消标记实际上是一个包含。
2024-01-19 16:28:49
355
原创 javaScript监听浏览器窗口关闭
但在新版本的浏览器中，为了安全性，已经不支持自定义弹窗。在以前（旧版本的浏览器中），可以自定义提示文案。能做的，只是调用浏览器自带的提示确认窗格。
2024-01-19 15:14:52
619
原创 手写实现call函数,apply函数,bind函数
1.this可以传null或者undefined，此时this指向window；2.this参数可以传基本数据类型，原生call会自动用Object()转换；3.函数是可以有返回值的；4.将函数添加到指定对象中，用delete删除（消除副作用）1.获取第一个参数，构建对象2.将对应函数传入该对象3.获取参数并执行相应函数4.删除该对象中的函数，消除副作用5返回结果1、将函数设置为对象的属性；2、处理传入的参数；3、返回函数的定义/引用；4、外层执行接收的函数；
2023-12-27 17:19:14
356
原创 Vue 必看面试题，内含详细讲解
为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？// datadata() { return { message: "子组件", childName:this.name } }// new Vue。
2023-12-14 11:34:18
846
原创 Lodash 如何使用
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。遍历 array、object 和 string对值进行操作和检测创建符合功能的函数。
2023-12-12 11:17:13
347
原创 Vue之Mixins(混入)的使用方法
mixin给我们提供了方便的同时也给我们带来了灾难，所以有很多时候不建议滥用它，但是在有些场景下使用它又是非常合适的，这就得根据自己来取舍了。所以在很多时候我们需要考虑用公共组件还是使用mixin。
2023-12-11 15:57:20
388
原创 Vue特性之$nextTick
在下次DOM更新循环结束之后执行延迟回调，nextTick主要使用了宏任务与微任务，根据执行环境分别尝试采用Promise，Mutation,Observe,setlmmediate 如果以上都不行则采用setTimeout定义一个会将方法存入队列中，通过这个异步方法清空当前队列。vue通过异步队列控制DOM更新和nextTick回调函数先后执行的方式。
2023-12-11 15:43:02
320
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人