儒雅的烤地瓜-优快云博客

原创 CSS | 精灵图和 base64 该如何选择?

本文对比了前端开发中两种图像优化技术——精灵图和Base64编码。精灵图通过合并多个小图标减少HTTP请求，提高缓存效率，但CSS管理较复杂且不适用大图像。Base64编码直接将图像嵌入代码，适合小图标但会增大文件体积。选择依据包括：小图标优先Base64，大图像用精灵图；维护性需求倾向精灵图，响应式设计则Base64更灵活。最佳实践是根据项目需求混合使用两种技术，以平衡性能和可维护性。

2025-11-21 08:15:00 1366

原创面试官：什么是函数柯里化？能手写实现吗？

函数柯里化是将多参数函数转换为单参数函数链式调用的技术，具有参数复用、提前返回和延迟执行三大特点。通过封装通用柯里化工具函数，可以实现参数的部分应用，减少重复代码。典型案例包括正则校验复用和浏览器兼容性处理，其本质是利用闭包保存参数状态。柯里化的核心思想是“降低适用范围，提高适用性”，是函数式编程的重要技术。

2025-11-05 08:15:00 882

原创 JS | 一文搞懂Number()、parseInt()与parseFloat()函数

在实际开发中，我们经常遇到将其他类型的值转换为Number类型的情况。一般可以通过Number()函数、parseInt()函数以及parseFloat()函数进行转换，但是它们三者使用起来还是有一定区别和注意事项的。这篇文章我们就来聊聊这三个函数

2025-10-28 08:15:00 1591

原创 JS | 如何对一个数组进行排序？数组排序方法汇总

本文介绍了八种常见排序算法的原理和实现代码，包括冒泡排序（稳定）、选择排序（不稳定）、插入排序（稳定）、快速排序（不稳定）、堆排序（不稳定）、归并排序（稳定）、希尔排序（不稳定）和计数排序（稳定）。每种算法都通过JavaScript代码示例演示其实现过程，并对排序规则和稳定性进行了说明。这些排序算法涵盖了从简单到复杂的多种排序方法，适用于不同场景下的数组排序需求。

2025-10-23 08:52:31 899

原创 JS | Object.entries() 和 Object.formEntries()的用法详解

本文介绍了JavaScript中Object.entries()和Object.fromEntries()方法的原理与应用。Object.entries()将对象转换为键值对数组，支持遍历、过滤等操作；Object.fromEntries()是其逆操作，可将键值对数组转回对象。主要应用场景包括：对象遍历、Map转换、表单处理、URL参数解析等。两者配合使用能实现对象属性的灵活转换，但需注意重复键和Symbol键的处理差异。这些方法为对象操作提供了更便捷的数组化处理方式。

2025-10-18 08:30:00 840

原创 JS | 如何把一个伪数组转换成一个真正的数组？

JavaScript中将伪数组转换为真数组的常用方法：1.推荐使用Array.from()直接转换；2.扩展运算符适用于可迭代对象；3.Array.prototype.slice.call()传统方法；4.循环+push()适用于特定场景。其中Array.from()是最简单可靠的方式，能处理大多数类数组对象转换需求。转换后的数组可使用原生数组方法，便于后续操作。根据实际需求选择合适方法即可。

2025-10-05 08:45:00 573

原创 JS | JS中高阶函数的应用

既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。在JavaScript中，高阶函数（Higher-Order Function，HOF）是一种特殊的函数，它至少需要满足以下两个条件：❶接受一个或多个函数作为参数。❷返回一个函数。

2025-09-28 10:31:23 821

原创 JS | 跨域数据请求技术——JSONP详解

通过 jsonp，我们可以避开浏览器的同源策略，从而进行跨域请求。jsonp 是利用 HTML 标签的 src 属性引用资源不受同源策影响的特性来实现的，实现步骤如下：①通过动态创建 script 标签，其 scr 指向非同源的 url，并传递一个 callback 参数给服务端；②服务器返回一个以 callback 参数作为函数名的函数的调用和一系列参数；③页面接收到响应后执行回调并对数据进行处理。注意：服务器返回的内容，必须是一段可执行的 JavaScript 代码，不能是其它内容

2025-09-04 08:15:00 3978

原创浅谈WEB服务器和云服务器区别

随着全面云化时代的来临，企业级客户应用部署的范围从数据中心扩展至公有云、私有云和混合云模式，由此从无状态的 Web 应用，到交易类应用，再到数据化和智能化应用等等。那云服务器中的web服务器是什么?我们在接触云服务器的时候，经常听到web服务器的概念。

2025-08-28 08:15:00 817

原创目前主流的Web服务器有哪些？

目前最主流的四个Web服务器是Apache、 Nginx 、IIS、Tomcat。

2025-08-16 08:00:00 1245

原创 Vue | Vue 技术探索：深入理解 Vuex

Vuex 是一个专为 Vue.js 应用设计的状态管理模式(状态机)。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2025-08-04 08:00:00 890

原创 Vue | vue中 $refs 的三种用法解读

这篇文章主要介绍了vue中$refs的三种用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教。

2025-07-20 09:00:00 1771 1

原创 JS | 使用JS清除 cookie 的方法有哪些？

在现代Web开发中，清除Cookie是维护网站用户隐私和安全性的一个重要步骤。JavaScript提供了几种方法来清除Cookie，包括直接删除特定的Cookie、设置Cookie的过期时间为过去的时间点、以及使用第三方库来辅助清除。在这些方法中，最为直接且常用的技术就是通过设置Cookie的过期时间为过去的时间点来“删除”它。

2025-04-24 08:30:00 3133

原创 CSS | 请解释一下何为BFC以及它是如何工作的？

格式化上下文指的是初始化元素定义的环境。包含两个要点，一个是元素定义的环境，一个是初始化。在 CSS 中，元素定义的环境有两种，一种是块格式化上下文( Block formatting context )，另一种是行内格式化上下文( Inline formatting context )。这两种上下文定义了在 CSS 中元素所处的环境，格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。以上解释专业点的说法是：在常规流中的框，都属于一个格式化的上下文中。

2025-04-21 08:30:00 812

原创 Vue | Vue中 ref 的用法小结

在项目中使用 ref 时有时候直接取值，有时候返回的却是一个数组，不知其中缘由，后查了一下 ref 用法，所以总结一下。

2025-04-01 08:15:00 1524

原创 Vue | Vuex详解，一文彻底搞懂Vuex

Vuex官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2025-03-21 08:15:00 4955

原创 Vue | Vue中的自定义指令详解

首先一定要明白，自定义指令其实就是一个对象！只是该对象中包含了类似组件生命周期钩子的函数而已，如created，mounted，该钩子函数会收到当前DOM元素作为参数，从而可以使用该DOM元素进行操作。

2025-03-17 08:15:00 1152

原创 Vue | Vue3中为什么要用 Proxy 代替 Object.defineProperty

Object.defineProperty只能遍历对象属性进行劫持，Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的。在 Vue 中，Object.defineProperty 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。Object.defineProperty 只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。

2025-03-10 08:15:00 2183

原创 Vue | 10 分钟了解 nextTick方法，并实现简易版的 nextTick

𝑛𝑒𝑥𝑡𝑇𝑖𝑐𝑘是𝑉𝑢𝑒.𝑗𝑠框架中的一个重要方法，它用于在下次𝐷𝑂𝑀更新循环结束之后执行延迟回调。

2025-02-24 08:45:00 1882

原创 Vue | Vue 开发中的性能优化小技巧，你用过几个

性能优化，是每一个开发者都会遇到的问题，特别是现在越来越重视体验，以及竞争越来越激烈的环境下，对于我们开发者来说，只完成迭代，把功能做好是远远不够的，最重要的是把产品做好，让更多人愿意使用，让用户用得更爽，这不也是我们开发者价值与能力的体现吗？重视性能问题，优化产品的体验，比起改几个无关痛痒的 bug 要有价值得多。

2025-01-13 08:30:00 1127

原创 Vue | Vue中如何做移动端适配？

在实现Vue移动端适配方面，主要依赖于视口单位（Viewport units）、Flexible.js、PostCSS插件、以及媒体查询（Media Queries）这几个关键技术和策略。其中，Flexible.js是一种广泛采用的解决方案，因为它能够动态改变根元素的字体大小，进而影响整个应用的布局。

2024-12-09 08:51:00 2662

原创 JS | CommonJS、AMD、CMD、ES6-Module、UMD五种JS模块化规范

在JavaScript中，常用的模块化规范有以下几种：CommonJS规范：主要用于服务器端编程，是Node.js采用的模块化规范。通过require方法加载模块，通过module.exports和export对象输出模块。AMD规范：主要用于浏览器端编程，是RequireJS采用的模块化规范。通过定义方。ES6模块规范：是ECMAScript 6采用的模块化规范，是JavaScript官方标准。通过export关键字输出模块，通过import。

2024-10-29 08:30:00 2130 1

原创 JS | 详解图片懒加载的6种实现方案

要实现图片的懒加载，核心的方法包括：利用JavaScript监听滚动事件、通过getBoundingClientRect()判断图片是否进入可视区域、使用Intersection Observer API、结合data属性暂存图片地址。在现代浏览器中，推荐使用Intersection Observer API来实现图片的懒加载，因为它相比传统的事件监听方式更为高效且易于维护。

2024-10-23 08:30:00 5660

原创 JS | 图片懒加载之交叉观察器IntersectionObserver API 手把手教学

IntersectionObserver是一种浏览器提供的API，用于监测元素与其祖先元素或视窗的交叉状态。‌ 它通过异步观察目标元素是否可见，来判断目标元素与视窗或其祖先元素的交叉比例，因此也被称为“交叉观察器”。IntersectionObserver的核心功能是判断元素是否进入、离开或部分可见于视窗，这通常用于实现如懒加载、无限滚动等功能‌

2024-10-18 08:30:00 1856

原创 JS | JS中判断数组的6种方法，你知道几个？

JS中判断数组的6种方法，你知道几个？

2024-10-07 08:30:00 3287

原创 CSS | 面试题：你知道几种移动端适配方案？

移动端适配是指为了提高应用在各种不同分辨率、尺寸和操作系统上的表现，而对其界面和功能进行相应的调整和优化。随着移动设备的普及，移动端适配问题日益凸显，处理移动端适配对于提高用户体验和降低开发成本至关重要。

2024-10-01 09:38:23 1930 1

原创 CSS | CSS实现两栏布局和三栏布局方法详解

CSS实现两栏布局和三栏布局方法详解

2024-09-30 08:45:00 1787

原创 JS | ES中的异步方法 async /await 详解

async/await 是 ES8(ECMAScript 2017) 引入的新语法，用来简化Promise异步操作。在 async/await 出现之前，开发者只能通过链式 .then() 的方式处理Promise异步操作

2024-09-02 08:45:00 3088

原创 Vue | Vue子组件和父组件如何互相调用对方的方法

Vue子组件和父组件如何互相调用对方的方法

2024-08-28 08:45:00 6678

原创 Vue | Vuex中五大属性及其辅助函数的使用说明

Vuex 官网： Vuex 是一个专为 Vue.js 应用程序设计的状态管理库，它提供了一种集中式管理应用中的状态；状态管理模式：它让组件的状态(数据)，管理变得集中、有序，便于在整个应用中，共享和维护数据；集中式存储：它将应用的所有组件状态(数据)，集中到一个单一的存储对象中，使得统一管理；

2024-08-27 08:45:00 4160

原创 Vue | 简单说说 Vuex 实现响应式的原理

Vuex 通过结合 Vue.js 的响应式系统实现了状态的响应式。Vuex 的状态存储于 Vue 的 data 对象中，这确保了对状态的任何 mutation 都是响应式的。

2024-08-24 16:36:09 1019

原创 Token、Cookie、Session的作用及具体区别

Token、Cookie和Session在Web开发中各有其独特的作用和适用场景。Token适用于需要无状态认证和授权的场景，Cookie适用于需要用户身份识别和会话管理的场景，而Session则更适合于服务端需要存储和管理用户会话信息的场景。在实际应用中，可以根据具体需求选择合适的机制来实现用户认证和会话管理。

2024-07-26 08:30:00 963

原创 JS数组怎么去重？| JavaScript中数组去重的14种方法

JS数组怎么去重？JavaScript中数组去重的13种方法，甚是详细，遇到数组去重问题时，可翻阅查看对应的去重方法

2024-06-01 07:27:22 11220 3

原创 JS | ES6新增对象 - Promise使用方法详解

Promise是异步编程的一种解决方案，可以替代传统的解决方案--回调函数和事件。ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点： * （1）对象的状态不受外界影响。 * （2）一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。

2024-04-18 09:12:02 2641

原创 JS数组函数 reduce() 的用法—包含基础、进阶、高阶用法

reduce 方法在数组的每个元素上执行用户提供的回调函数，即“reducer”。它传入对前一个元素进行计算的返回值。结果是单个值。它是在数组的所有元素上运行 reducer 的结果。它是如何工作的？reducer 函数逐个遍历数组元素。在每一步中，reducer 函数将当前数组值添加到上一步的结果中，直到没有更多元素要添加。

2024-01-14 09:34:52 19514 1

原创 Vuex模块化以及命名空间namespaced的使用

命名空间的作用是为了减少模块之间定义的方法命名冲突的问题。默认state是局部命名空间，mutation、action、getter 是全局命名空间。比如说在a模块getter 中定义一个getter1，在b模块getter 中也定义一个getter1 ,在同一空间内，拥有两个相同的名称，程序会报错。

2023-12-21 10:50:55 2525

原创 Axios使用方法详解，从入门到进阶

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说）简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。

2023-08-16 08:58:28 53753 7

原创一文详解Vue中实现路由跳转传参的4种方式（十分详尽）

在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击 a标签链接。vue项目中点击router-link标签链接都属于声明式导航。在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如：普通网页中调用location.href跳转到新页面的方式，属于编程式导航。vue项目中编程式导航有this.$router.push(),this.$router.replace(),this.$router.go()。

2023-08-01 09:33:15 25134

原创探秘 | 原生ajax、jquery-ajax、axios与fetch的区别与优缺点

前端的技术发展速度非常的快，异步请求也是其重要的体现之一，从最早的原生XHR，再到JqueryAjax的统治时代，再到近来，fetch、axios等技术也开始出现并大量投入使用。其实有这么多种的请求方法和解决方案，总结一下：原生XHR几乎很少开发会用，JqueryAjax属于老当益壮的那种，虽然很老，但是很好用，Fetch是属于初生牛犊，还需要慢慢成长，axios就目前来说，算是非常好的了，无脑使用即可。

2023-07-26 09:54:10 2046