- 博客(185)
- 收藏
- 关注
RSS订阅原创 通过CSS动画实现圆形进度条
这段代码通过使用@keyframes定义了两个旋转动画，分别给右半圆和左半圆应用不同的颜色变化，模拟进度条的加载效果。通过position和flexbox布局，整体进度条是一个嵌套的结构，外部有一个容器，内部是由多个部分组成的圆形进度条。最终的效果是一个不断旋转的进度条，右半部分和左半部分交替显示红色和灰色，模拟加载进度。关注微信公众号温暖前端，不定期分享前端知识点和前端资料↓↓↓。
2024-11-28 19:31:48
1346
原创 Map、WeakMap、Set、WeakSet最全攻略
特性/集合类型MapWeakMapSetWeakSet存储数据键值对（key-value）键值对（key-value），但键是弱引用唯一值集合（无重复元素）唯一值集合（无重复元素），且值是对象键类型可以是任意数据类型（原始值、对象、函数等）键必须是对象（弱引用）可以是任意数据类型（原始值、对象、函数等）只能是对象（弱引用）值类型可以是任意数据类型（原始值、对象、函数等）值可以是任意数据类型（原始值、对象、函数等）可以是任意数据类型（原始值、对象、函数等）
2024-11-27 22:20:48
1194
原创 js基本数据新增的Symbol到底是啥呢？
唯一性：每个Symbol都是唯一的，即使描述相同。不可变性Symbol一旦创建，无法修改。作为对象属性名：用于确保属性名的唯一性，避免冲突。内置常量Symbol提供了一些内置的常量，帮助实现特殊功能，例如等。全局共享和允许跨多个脚本共享Symbol。适用场景**Symbol适用于模拟私有属性、避免命名冲突、实现自定义迭代器等场景。关注微信公众号温暖前端，不定期分享前端知识点和前端资料↓↓↓。
2024-11-27 21:43:12
762
原创 字符串转换的方式
Number()：适合需要将任意类型的值（包括布尔值、对象、字符串等）明确地转换为数字时。parseInt()：适合将字符串转换为整数，且字符串中可能包含小数点时，需要忽略小数部分。：适合将字符串转换为浮动小数，尤其是字符串包含小数部分时。操作符：适合简洁快速的类型转换，尤其是在处理简单字符串和布尔值时。转换方式适用情况特点需要快速转换为数值隐式转换，返回 NaNNumber()明确要求数值转换支持多种类型，NaN 处理明确parseInt()需要获取整数，不关心小数部分。
2024-11-26 21:00:33
787
原创 +、Number()、parseInt()和parseFloat()四种数值转换规则
Number()：适合需要将任意类型的值（包括布尔值、对象、字符串等）明确地转换为数字时。parseInt()：适合将字符串转换为整数，且字符串中可能包含小数点时，需要忽略小数部分。：适合将字符串转换为浮动小数，尤其是字符串包含小数部分时。操作符：适合简洁快速的类型转换，尤其是在处理简单字符串和布尔值时。转换方式适用情况特点需要快速转换为数值隐式转换，返回 NaNNumber()明确要求数值转换支持多种类型，NaN 处理明确parseInt()需要获取整数，不关心小数部分。
2024-11-26 20:43:43
856
原创 npm install的执行原理
是 Node.js 的包管理工具npm提供的一个命令，主要用于安装文件中列出的依赖包。可以用于安装单个包、多个包，或者是根据项目中的自动安装所有依赖。通过，开发者可以下载并安装项目所依赖的各种库和工具，构建出一个完整的开发环境。在执行时，npm 会从（默认是https://registry.npmjs.org）下载依赖包，并根据和文件的内容来管理依赖关系。
2024-11-25 19:32:20
1403
原创 一文搞懂pnpm、npm、yarn、npx
npm是 Node.js 的官方包管理器，也是全球使用最广泛的 JavaScript 包管理工具。它用于管理 JavaScript 项目的依赖包，可以通过命令行来安装、更新、卸载依赖包。默认情况下，npm通过文件管理项目的依赖，目录存放实际的依赖包。npm支持语义化版本控制（semver），确保项目依赖版本的兼容性。npm是 Node.js 的默认包管理工具，几乎每个 Node.js 项目都可以用npm来管理依赖。yarn是由 Facebook 发起的包管理工具，目的是解决npm。
2024-11-25 18:54:37
897
原创 Sass 和 Less 以及 Mixins如何使用
Sass：Sass是一种CSS预处理器，扩展了CSS的功能，允许使用变量、嵌套规则、混合宏（mixins）、继承和其他功能。它可以以两种格式书写：Sass和SCSS，SCSS是Sass的CSS语法扩展，用大括号和分号，加上更接近CSS的语法。Less：LESS 是一种动态样式表语言，它在 CSS 的基础上增加了一些特性，如变量、嵌套、混合、函数等。LESS 代码以.less为文件扩展名，并在运行时动态编译成 CSS。它的语法相对简单，易于学习。
2024-11-08 22:08:59
963
原创 try...catch 和then...catch的异同点分析
属性try…catchthen…catch类型同步错误处理异步错误处理用法捕获同步错误捕获异步操作的错误语法使用try和catch关键字使用 Promise 的then和catch功能直接捕获抛出的异常处理链式调用中的错误场景适用于同步代码和 async/await 代码适用于 Promise 和 async 函数控制流简单，线性的错误捕捉可以继续链接其他的 then 处理清晰性对简单的错误处理清晰易读更适合异步编程- 支持链式调用，容易管理多重异步操作优点简单易用，适合同步执行。
2024-11-08 21:43:50
926
原创 Vuex详解
Vuex 是一个专为 Vue.js 应用程序开发的状态管理库。它是一个集中式存储管理模式，旨在解决多个组件之间共享状态的问题。Vuex 遵循 Flux 架构的理念，提供了一种集中管理所有组件状态的机制，使得状态的管理变得更为可预测、可维护和可调试。
2024-09-19 23:34:23
968
原创 Keep-Alive实现原理
这是通过维护一个 keys 数组来实现的，最近使用的组件的 key 会被移到数组末尾。Keep-Alive 组件内部维护了一个 cache 对象，用于存储它的子组件实例。Keep-Alive 是 Vue 的一个抽象组件，它不会渲染出实际的 DOM 元素，而是将其包裹的动态组件进行缓存。当组件在 Keep-Alive 内被切换时，它的状态会被保留，避免重新渲染。Vue 中的 Keep-Alive 是一个非常有用的内置组件，用于缓存组件实例，以提高性能和用户体验。
2024-08-21 09:15:00
1498
1
原创 实现一个Dialog组件的设计思路
g) 焦点管理：自动管理焦点，确保焦点在对话框打开时转移到对话框内，关闭时返回到之前的元素。a) 大小：允许用户设置对话框的宽度和高度，或者提供预设的尺寸选项（如小、中、大）。f) 关闭方式：支持配置各种关闭方式，如点击关闭按钮、点击遮罩层、按 ESC 键等。e) 遮罩层：允许自定义遮罩层的颜色和透明度，以及是否允许点击遮罩层关闭对话框。d) 主题：支持自定义对话框的颜色、字体、边框等样式，或提供预设的主题选项。b) 位置：支持自定义对话框在屏幕中的位置，如居中、靠上、靠下等。
2024-08-21 08:30:00
895
原创 前端组件化
组件化是指将UI界面拆分成独立的、可复用的组件,由这些组件组合、嵌套,最终构成完整的用户界面。(6) 避免副作用:组件应该是纯函数,相同的输入产生相同的输出。(3) 回调函数:父组件将函数作为prop传给子组件调用。(1) 单一职责原则:一个组件只负责一个特定的功能。(3) 可复用原则:组件在不同的场景下都可以复用。(3) 通用组件:跨业务、跨项目的公共组件。(1) Props:父组件向子组件传递数据。(2) 业务组件:针对特定业务场景的组件。(2) 事件:子组件触发事件,父组件监听。
2024-08-20 23:20:28
1507
原创 前端图片格式有哪些？
网页制作中常用的图片格式包括JPEG、PNG、GIF、SVG、WebP等。WebP是Google开发的一种新型图像格式，旨在提供更好的压缩效果。在响应式网页设计中，需要考虑不同屏幕尺寸和分辨率。JPEG是最常用的网页图片格式之一，主要用于照片和复杂图像的压缩。GIF是一种支持动画的图像格式，但只支持256种颜色。PNG是一种无损压缩的图像格式，支持透明度。SVG是一种基于XML的矢量图形格式。c. 图像格式的选择策略。
2024-08-20 23:09:01
1065
原创 实现一个简易版的Promise
实现一个简易版的Promise。这个实现涵盖了Promise的基本功能,包括状态管理、then方法、以及异步解析。
2024-08-15 21:22:27
258
原创 interface和type的区别
在大多数情况下,interface 和 type 的性能差异可以忽略不计。但是,在某些特定场景下,interface 可能会有轻微的性能优势,特别是在处理大型类型系统时。这是因为 interface 是"开放的",可以被后续的声明扩展,而 type 是"封闭的"。无论你选择使用 interface 还是 type,重要的是要保持一致性。在一个项目中,尽量统一使用一种方式来定义类似的类型,这样可以提高代码的可读性和可维护性。在实际使用中，可以根据具体需求选择使用。都可以用来定义类型，但它们有一些区别。
2024-07-24 21:29:33
683
原创 启发式缓存和本地存储缓存
当服务器响应中没有包含 Expires、Cache-Control: max-age 或 Cache-Control:s-maxage 时,浏览器会采用一个启发式的算法来确定缓存的时间。
2024-07-24 21:04:43
822
原创 浏览器缓存小知识
浏览器缓存是指浏览器在本地磁盘对用户已访问过的网页资源进行存储,以便在用户再次访问同一网页时可以直接从本地加载,而不需要再次从服务器请求数据,从而提高页面加载速度,降低服务器压力和带宽消耗。浏览器缓存是提高网站性能的重要手段之一。合理利用缓存可以显著减少网络传输,加快页面加载速度,改善用户体验。同时也可以减轻服务器压力,降低网站带宽成本。
2024-07-23 08:30:00
1019
原创 js函数eval()
eval() 是 JavaScript 中的一个全局函数，它可以将传入的字符串当作 JavaScript 代码来执行。其中，string 是要执行的 JavaScript 代码字符串。eval() 函数会返回最后一个表达式的结果。
2024-07-23 08:00:00
3738
原创 css hack原理以及常用hack
CSS hack 是一种在网页开发中常用的技术，用于解决不同浏览器之间的兼容性问题。由于不同浏览器对 CSS 的解析和渲染可能存在差异，开发者需要使用一些特殊的技巧来确保网页在各种浏览器中都能正常显示。
2024-07-22 19:28:00
8939
原创 el-select实现本地搜索数据
el-select 组件可以通过设置 filterable 属性来实现本地搜索数据。方法来筛选那些标签包含查询字符串的选项（不区分大小写）。方法中，我们根据输入的查询字符串。，这样就可以只显示过滤后的选项。来绑定一个自定义的过滤方法。数组来存储所有选项，以及。数组来存储过滤后的选项。为空，我们显示所有选项。属性来启用过滤功能。
2024-07-19 21:58:26
482
原创 css hack原理以及常用hack
CSS hack 是一种在网页开发中常用的技术，用于解决不同浏览器之间的兼容性问题。由于不同浏览器对 CSS 的解析和渲染可能存在差异，开发者需要使用一些特殊的技巧来确保网页在各种浏览器中都能正常显示。
2024-07-19 21:38:22
1246
原创 vue3+ts实现一个表单组件
首先，创建一个表单组件，包括姓名、手机号、年龄、学校、性别等基本信息的输入框，并添加省市区和街道地点的选择功能。2. 实现数据加载和交互逻辑在上述代码中，使用了Vue 3的Composition API结合TypeScript来管理表单数据、验证规则、组件交互等。确保通过axios调用后端接口来获取省市区和街道数据，并在选择省市区时加载相应的街道数据。在提交表单时，将表单数据以JSON格式发送到后端处理。
2024-07-07 23:10:16
1361
原创 表单代码示例
<template> <el-form ref="form" :model="formData" :rules="formRules" label-width="100px"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form
2024-07-07 22:36:20
1112
原创 优雅降级和渐进增强
在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。设计和开发人员首先关注基本的HTML和CSS，确保网站在所有浏览器和设备上都能正确显示和访问。然后，他们会逐步添加JavaScript和其他高级技术，以增强网站的功能和设计。优点：网站在所有浏览器和设备上都能够提供基本的功能和可访问性。
2024-06-17 08:30:00
910
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人