- 博客(22)
- 收藏
- 关注
RSS订阅原创 Cookie、localStorage 和 sessionStorage 的区别
localStorage 存储的数据没有过期时间，而 sessionStorage 存储的数据在页面会话结束时（页面关闭）会被清除。主要用于在客户端保存较大量的结构化数据，如用户操作记录、购物车数据等，不会随每次 HTTP 请求发送到服务器端。受同源策略限制，不同页面或标签页间不能互相访问对方的 localStorage 和 sessionStorage 数据。数据仅在当前会话有效，页面重新加载或恢复时数据仍然存在，但在关闭浏览器标签页或窗口后将被清除。持久保存在浏览器中，除非主动删除数据。
2024-07-09 04:12:45
615
原创 关于webpack
模块打包工具的核心功能在于将各种模块（例如 JavaScript 文件、CSS 文件、图片等）及其依赖关系打包成静态资源文件，以便在浏览器中加载和运行。Webpack 实现这一功能的过程是通过构建一个依赖图，从入口模块开始，递归地解析模块间的依赖关系，然后将它们打包成一个或多个输出文件。
2024-04-18 20:42:32
717
转载 前端性能优化
强缓存过期的时候，会使用last-modified或etag这类协商缓存向服务器发起请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源，如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200。使用CommonChunkPlugin插件，将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存区中供后续使用，这回带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中抽取出来，而不是每次访问一个页面的时候，都需要去加载一个很大的文件。
2024-04-18 15:45:11
193
2
原创 浅拷贝和深拷贝
在 JavaScript 中，浅拷贝（Shallow Copy）和深拷贝（Deep Copy）是两种常见的对象复制方式，它们在复制对象时的复制深度和复制方法上有所不同。
2024-04-18 09:24:54
435
1
原创 ES6新增内容
ES6（ECMAScript 2015）是 JavaScript 的一个重要版本，引入了许多新的语言特性和功能，以提高开发效率和代码质量。这些是 ES6 中的一些主要新增内容，它们使得 JavaScript 的语言特性更加强大和灵活，提高了开发者的编码效率和代码质量。
2024-04-18 09:16:52
290
1
原创 防抖和节流
防抖（Debouncing）和节流（Throttling）是两种常见的用于优化前端性能和提升用户体验的技术。它们都涉及到限制某个函数的执行频率，但在具体实现和应用场景上有所不同。
2024-04-16 19:41:20
292
原创 数组去重的方法
利用对象的键是唯一的特性，遍历数组，将数组元素作为对象的键存储，然后提取对象的键即可得到去重后的数组。使用 reduce() 方法迭代数组，将每个元素添加到一个新数组中，但是跳过已经存在的元素。使用 filter() 方法结合 indexOf() 方法来筛选出数组中的唯一值。使用 ES6 中的 Set 对象，它允许你存储任何类型的唯一值。
2024-04-16 18:50:32
231
原创 关于数组的基础知识
JavaScript中，数组实际上是特殊的对象，数组元素存储在对象的属性中，属性的键是数字索引。方法返回数组中满足提供的测试函数的第一个元素的索引，否则返回。方法返回数组中满足提供的测试函数的第一个元素的值，否则返回。用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。类，并且有一些特有的方法和属性，方便进行数组的操作和管理。将类数组对象或可迭代对象转换为真正的数组。方法来检查数组是否包含某个元素。创建一个具有可变数量参数的新数组。的后面，生成了一个新的数组。方法来反转数组元素的顺序。
2024-04-16 16:19:08
853
原创 CSS的基础知识、高级特性
例如，内联样式的优先级为1000，一个ID选择器的优先级为100，一个类选择器的优先级为10，一个元素选择器的优先级为1。例如，一个元素的总宽度等于内容宽度加上左右内边距和边框的宽度，再加上左右外边距的宽度。这种模型被称为W3C盒模型。例如，如果两个样式规则都包含一个类选择器和一个元素选择器，那么它们的特殊性是相同的，此时会根据后来出现的规则来确定应用哪一个。CSS盒模型是指在网页设计中，每个元素被视为一个矩形的盒子，这个盒子由内容、内边距、边框和外边距组成，这些部分一起决定了元素在页面中的布局和样式。
2024-04-13 17:08:57
947
原创 HTML的基础知识、高级特性
相比于传统的HTTP请求，WebSocket能够减少通信的开销，并且提供了更低的延迟和更高的实时性。在开发过程中，及时在真实的移动设备上测试网站，以确保页面在不同的移动设备和浏览器上都能够正常显示和操作。总的来说，Web Workers是HTML5中的一项重要特性，可以提高Web应用程序的性能和用户体验，特别是对于需要处理大量数据或复杂计算的应用程序。各种设备和浏览器对 HTML 标签的解析和渲染可能有所不同，但语义化标签的意义更加明确，可以提高页面在不同环境下的一致性和兼容性。
2024-04-13 16:13:13
761
转载 vue3父子组件传参以及父组件调用子组件的属性或方法
3 下面这种方式也是通过defineProps接收,但是这种写法是有默认值的，是ts中特有的写法。7 父组件使用子组件的方法或属性，要在子组件中通过defineExpose向外暴露出去。接收,defineProps是无须引入的直接使用即可，下面这种写法是没有默认值。4 刚才子组件中使用的是type声明Props，也可以使用下面这种方式去声明。5 如果在js中，子组件中defineProps是下面这种写法。8 父组件中使用子组件的方法，要通过ref获取子组件实例。
2024-02-27 01:03:00
409
原创 vue2和vue3的区别是什么
区别：1、vue2的双向数据绑定利用了es5的api object.definepropert()，而vue3中使用了es6的api proxy；3）、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将。使用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据。在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。
2024-02-23 02:04:23
527
1
原创 vue生命周期 父子组件篇
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted。父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed。父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated。
2024-01-18 20:52:15
368
1
原创 Vue生命周期
o created:初始化之后，data和methods的数据已经初始化，第一个操作data和methods数据的生命周期接口请求数据初始化。o updated:页面中的数据和data里面的数据是最新的。o beforeUpdate:更新之前，页面中的数据是旧的, data里面的数据是最新的。o beforeCreate:初始化之前,data和methods的数据还没有初始化︰页面重定向。o mounted:真实的DOM挂载，第一个可以操作DOM元素的生命周期。o destroyed:销毁之后。
2024-01-17 21:11:38
417
1
转载 Vue组件介绍
原文链接：https://blog.youkuaiyun.com/qq_51712954/article/details/130677057。🔰组建的作用：根据不同的业务功能把页面分为不同的组件，根据组件来完成布局。🔰定义全局的组件: Vue.component(组件的名称, 组件的配置)🔰组件的配置 template：“用于书写我们的html代码”1. 在 script 内声明局部组件。🔰 需要根据组件名称来使用全局组件。在 script 内声明局部组件。在 script 外声明局部组件。
2024-01-16 22:05:02
53
1
转载 Vue基础
版权声明：本文为优快云博主「码字小萌新♡」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。🔰可以使用其他的选择器，但是建议使用ID选择器 ( el:"#apps"/ el:".apps"/ el:"div")使用{{}}获取到 data 内的数据，{{}}可以书写数字，表达式，运算符号。🔰默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容。🔰解析文本使用v-text，需要解析html结构使用v-html。--开发环境版本，包含了有帮助的命令行警告-->
2024-01-15 22:26:08
70
转载 sass的使用
CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护，Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。以上简单的描述了sass的概念、sass的特点、使用方法、变量声明、嵌套、@import 、@mixin 、 继承等，重点掌握前面八个板块，后面了解即可。SASS是一个css的预处理器，是CSS 的扩展语言，可以帮助我们减少重复的代码，生成更好的CSS格式化代码，并且兼容所有版本的CSS。框架：有无数的框架使用Sass构建。
2024-01-11 20:20:31
111
原创 less的运用
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。3、@规则：@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。引入方法和引入css方法一样，less文件的后缀名称可以省略，使用时注意后边的分号;新建一个less文件夹，其内有style.less文件（注意是以后缀名.less命名的文件）
2024-01-10 20:40:46
567
1
原创 数组遍历的方法
方式三：for...in循环更常用于对象的循环，每次循环中得到的i是字符串类型，而不是预料中的数字类型，要想对它进行运算，那得先要进行类型转换。方式四：for...of ，元素和索引可以分开遍历,可以中断循环 ，索引是数字类型 ，代码简洁；方式二：利用forEach循环代码量少了很多，写法更加简洁，缺点就是：无法中断停止整个循环。可以用break来终止整个循环，或者continute来跳出当前循环，继续后面的循环。方式一：利用for循环来遍历数组的缺点就是：代码不够简洁。对象不能通过for of进行遍历。
2023-12-28 21:26:53
404
1
原创 关于ES6对象与函数的使用
（1）遍历数组（2）当作数组的元素（3）数组的深拷贝（4）作为函数的参数（5）与解构赋值结合（6）转换成真正的数组（7）遍历数组（8）合并对象。9、Object.values() 会返回一个由一个给定对象的自身可枚举属性值组成的数组。8、Object.keys() 会返回一个由一个给定对象的自身可枚举属性组成的数组;5、Object.assign() 将源对象的属性赋值到目标对象上；1、如果属性值是变量，当对象的属性和属性值一致时，可以省略掉属性值；3、对象的属性可以是表达式；
2023-12-26 20:23:20
505
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人