儒雅的烤地瓜-CSDN博客

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

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

2025-04-24 08:30:00 1082

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

2025-04-21 08:30:00 684

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

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

2025-04-01 08:15:00 1327

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

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

2025-03-21 08:15:00 1184

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

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

2025-03-17 08:15:00 973

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

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

2025-03-10 08:15:00 1934

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

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

2025-02-24 08:45:00 1433

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

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

2025-01-13 08:30:00 948

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

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

2024-12-09 08:51:00 1979

原创 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 1940 1

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

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

2024-10-23 08:30:00 4659

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

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

2024-10-18 08:30:00 1705

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

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

2024-10-07 08:30:00 2590

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

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

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

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

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

2024-09-30 08:45:00 1459

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

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

2024-09-02 08:45:00 2618

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

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

2024-08-28 08:45:00 5378

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

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

2024-08-27 08:45:00 3631

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

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

2024-08-24 16:36:09 889

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

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

2024-07-26 08:30:00 823

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

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

2024-04-18 09:12:02 2371

原创 Vue中$watch()方法和watch属性的区别

vue中$watch()和watch属性都是监听值的变化的，是同一个作用，但是有两个不同写法。

2024-01-22 12:31:03 1309

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

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

2023-12-21 10:50:55 2283

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

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

2023-08-16 08:58:28 47498 6

原创一文详解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 24549

原创 JSON百科全书：学习JSON看这一篇就够了

JSON 对象包含两个方法：用于解析 JavaScript Object Notation（JSON）的 parse() 方法，以及将对象/值转换为 JSON 字符串的 stringify() 方法。除了这两个方法，JSON 这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。

2023-06-30 09:03:37 29035

原创深入理解浏览器的缓存机制之协商缓存与强缓存

浏览器缓存指的就是浏览器对之前请求过的文件进行缓存，以便在下一次访问时重复使用，从而节省带宽、提升访问速度、降低服务器压力。本文所说的HTTP缓存机制就是利用HTTP响应头将所请求的资源在浏览器中进行缓存，缓存方式主要分为两种：强缓存、协商缓存。

2023-06-27 09:29:18 8043

原创面试官：一个 TCP 连接可以发多少个 HTTP 请求？

默认情况下建立 TCP 连接不会断开，只有在请求报头中声明 Connection: close 才会在请求完成后关闭连接。

2023-06-19 09:48:13 1206 1

原创面试高频—TCP/IP十大问题—程序员必备基础素养

TCP/IP讲绝了！本文整理了一些TCP/IP协议簇中需要必知必会的十大问题，既是面试高频问题，又是程序员必备基础素养。

2023-05-30 09:35:11 7185

原创 Git之GitFlow工作流 | Gitflow Workflow（万字整理，已是最详）

git 作为一个代码管理系统，不可避免的会涉及到多人合作。Git flow是基于git之上的一种软件开发迭代模型。Git flow是使用git进行源代码管理的一套行为规范。简单来说就是通过规范化的流程，使得产品、开发与测试等各个部门更高效的协同工作。Git Flow重点解决的是由于源代码在开发过程中的各种冲突导致开发活动混乱的问题，提高开发效率。

2023-05-17 09:08:59 50266 22

原创一文讲透TCP/IP协议 | 图解+秒懂+史上最全

TCP/IP协议包含了一系列的协议，也叫TCP/IP协议族（TCP/IP Protocol Suite，或TCP/IP Protocols），简称TCP/IP。TCP/IP协议族提供了点对点的连结机制，并且将传输数据帧的封装、寻址、传输、路由以及接收方式，都予以标准化。

2023-05-06 10:33:46 108644 78

原创如何发起一次完整的HTTP的请求流程

HTTP 是一种允许浏览器向服务器获取资源的协议，是 Web 的基础，通常由浏览器发起请求，用来获取不同类型的文件，例如 HTML 文件、CSS 文件、JavaScript 文件、图片、视频等。此外，HTTP 也是浏览器使用最广的协议。

2023-04-24 10:06:40 3643

原创 HTTP协议 | 一文详解HTTP报文结构

详解HTTP协议报文结构——请求和响应消息、请求头、响应头、请求方法

2023-04-17 09:49:27 15350 1

转载深度剖析cookie、session、token

session 和 token 本质上是没有区别的，都是对用户身份的认证机制，只是他们实现的校验机制不一样而已（一个保存在 server，通过在 redis 等中间件获取来校验，一个保存在 client，通过签名校验的方式来校验），多数场景上使用 session 会更合理，但如果在单点登录，一次性命令认证上使用 token 会更合适，最好在不同的业务场景中合理选型，才能达到事半功倍的效果。

2022-12-29 10:07:29 531

原创实现响应式布局有几种方法

响应式布局有的方法有：1、媒体查询；2、百分比【%】；3、vw或vh，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度；4、rem单位是相对于字体大小的html元素；5、flex弹性布局。

2022-11-29 11:27:42 5480

转载万字长文：分享前端性能优化知识体系

前端性能优化分为两个方向，一是工程化方向，另一个是细节方向。性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用。前端性能优化方法：1、减少http请求数；2、图片优化；3、使用CDN；4、开启GZIP；5、样式表和JS文件的优化；6、使用无cookie域名；7、前端代码结构的优化。

2022-11-25 11:04:03 235

原创一文了解，前端网页布局常用的几种方式

建议看完本文，你会受益很多！本文将带你深入了解前端网页布局的几种方式，诸如关于静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念以及区别。

2022-11-18 15:43:20 6197

原创 Web开发常用布局方式总结

无论是前端还是客户端开发都离不开页面的展示，而页面是由布局和各种组件构成的。布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。研究布局的目的是让我们的页面尽可能的还原UI设计给我们的设计图，适配各种尺寸的屏幕，使其在各种尺寸屏幕上能很好地显示出我们的视图。

2022-11-08 15:44:25 6976 2

转载什么是token？token是用来干嘛的？

token其实说的更通俗点可以叫暗号，在一些数据传输之前，要先进行暗号的核对，不同的暗号被授权不同的数据操作。说白了token是一个身份卡，有权限的作用

2022-09-25 10:43:54 233340 16

原创 JS | JavaScript函数防抖和节流全解析

防抖和节流本质上是优化高频率执行代码的一种手段，如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用防抖（debounce）和节流（throttle）的方式来减少调用频率。节流——n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。防抖——n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时.........

2022-09-10 12:15:25 3016 1