- 博客(44)
- 收藏
- 关注
RSS订阅原创 一文搞懂强缓存与协商缓存
缓存是一种用于存储之前请求过的数据或资源的技术，目的是减少重复的网络请求，提高页面加载速度，降低服务器压力，并优化用户体验。可以理解为，你之前已经请求过这些数据了，这些数据存在缓存中，用时取即可，而不是每次都要重新请求这些数据。
2025-06-01 14:43:16
948
原创 前端垫片chimp
Chimp 垫片是一种前端开发工具，主要用于解决浏览器兼容性和样式调整的问题。它通过在页面中插入一些特殊的代码，帮助我们更好地控制页面的布局和样式，让页面在不同的浏览器和设备上都能呈现出一致的效果。Chimp 垫片的核心功能是“兼容性增强”。它能够自动检测浏览器的版本和特性，然后根据这些信息，调整页面的样式和行为。比如，在一些老旧的浏览器中，某些 CSS 属性可能无法正常工作，Chimp 垫片就可以通过一些兼容性代码来解决这个问题，让页面在这些浏览器中也能正常显示。
2025-05-25 14:36:27
885
原创 常见的实时通信技术（轮询、sse、websocket、webhooks）
实时通信技术在现代应用中扮演着至关重要的角色，从即时通讯到在线游戏，其应用广泛。本文探讨了几种常见的实时通信方案：HTTP轮询、长轮询、SSE（Server-Sent Events）、WebSocket和Webhooks。HTTP轮询包括短轮询和长轮询，前者简单但效率低，后者减少了请求次数但服务器压力大。SSE允许服务器主动向客户端推送数据，适合实时通知场景。WebSocket提供真正的双向通信，适合高频交互应用。Webhooks则是服务器主动调用客户端接口，适用于事件驱动的通知。每种技术都有其优缺点和适用
2025-05-17 16:29:54
842
原创 Web 实时通信技术：WebSocket 与 Server-Sent Events (SSE) 深入解析
WebSocket 是一种网络通信协议，它提供了一种在单个 TCP 连接上进行全双工通信的方式。与传统的 HTTP 请求 - 响应模型不同，WebSocket 允许服务器和客户端在连接建立后随时互相发送数据，而无需重新建立连接。这种特性使得它在实时交互场景中具有得天独厚的优势。
2025-05-11 10:25:19
1260
原创 vue3学习之防抖和节流
就像我们按电梯按钮，不管你按多少次，电梯只会在你松手一段时间后才会启动。当事件触发时，不立即执行处理函数，而是等待一段时间（比如300ms）。如果在这段时间内事件再次触发，则重新计时。只有在指定时间内事件不再触发，才会真正执行处理函数。当我们滚动页面时，可能需要执行某些操作，比如懒加载图片、检测滚动位置等。如果不加限制，滚动事件会非常频繁地触发，导致性能问题。在固定的时间间隔内（比如300ms），无论事件触发多少次，处理函数只会执行一次。1、用户停止输入后再搜索（搜索框）
2025-04-26 15:16:40
869
原创 ts与面向对象
通过这些例子可以看出，面向对象编程能把复杂的代码拆分成一个个独立的对象，每个对象负责自己的事情，就像分工明确的团队。它的好处有：代码复用：一个对象的方法和属性可以在其他地方重复使用，不用重复写代码。结构清晰：对象之间职责分明，改代码或者加功能时，很容易找到对应的地方。可维护性强：出了问题可以快速定位到某个对象，修改也不会影响其他部分。类型安全（TypeScript 特有的优势）：提前发现很多类型错误，让代码更健壮。。
2025-04-20 10:40:03
314
原创 TypeScript变量类型
JavaScript (JS) 和 ：从 ES6 开始引入。 声明的变量具有块级作用域（），并且不会被提升。 声明的变量也是块级作用域，但必须初始化且不能重新赋值。TypeScript (TS)2. 类型推断JavaScriptTypeScript3. 变量提升（Hoisting）JavaScriptTypeScript4. 总的来说JavaScript 的变量声明方式较为灵活，但缺乏类型检查，容易导致运行时错误。TypeSc
2025-04-13 09:16:30
766
原创 深入理解请求头---基础入门
简单来说，请求头是客户端向服务器发送HTTP请求时附带的额外信息。这些信息以键值对的形式呈现，就像是一份详细的清单，告诉服务器关于请求的各种细节。例如，它可以表明客户端的类型（是浏览器、移动应用还是其他程序）、支持的数据格式、使用的语言偏好等。请求头就像是一封邮件的信封，除了收件人地址（URL）外，还包含了发件人信息、邮件优先级等其他重要内容。
2025-03-30 09:18:49
936
原创 Git入门到精通
Git 分支管理是 Git 强大功能之一，能够让多个开发人员并行工作，开发新功能、修复 bug 或进行实验，而不会影响主代码库。分支在实际中有什么用呢？假设你准备开发一个新功能，但是需要两周才能完成，第一周你写了50%的代码，如果立刻提交，由于代码还没写完，不完整的代码库会导致别人不能干活了。如果等代码全部写完再一次提交，又存在丢失每天进度的巨大风险。现在有了分支，就不用怕了。各分支之间相互隔离，不影响。
2025-03-22 09:04:10
976
1
原创 前端组件、组件库使用指南
<button @click="changeMessage">改变消息</button></div>const message = ref('初始消息');message.value = '新的消息';</script>/* 样式 */</style><template><div>
2025-03-16 10:07:22
1622
原创 Vue 3 新手必看：轻松上手 Pinia 状态管理
在 Vue 3 的世界里，状态管理是一个绕不开的话题。如果你正在寻找一个简单、高效且易于上手的状态管理库，那么 Pinia 绝对是你的不二之选。今天，我们就来一起探索 Pinia 的魅力，让你在 Vue 3 开发中如鱼得水。
2025-03-09 08:53:00
827
原创 Vue2 组件通信全解析：8种场景与实战指南
在 Vue 开发中，组件化是核心思想之一，而组件之间的通信则是构建复杂应用的关键方式适用场景优点注意事项props$emit父子组件简单通信官方推荐，直观易用多层传递会导致冗余事件总线兄弟/跨级组件通信灵活，无需依赖层级关系需手动销毁监听，避免内存泄漏Vuex大型应用全局状态管理集中管理，适合复杂交互小型项目可能过于重型provideinject跨层级注入数据避免逐层传递非响应式，需配合其他技术$refs父调子方法快速直接破坏封装性，慎用。
2025-03-02 09:22:39
857
原创 Git入门
Git 是一个开源的分布式版本控制系统，最初由 Linus Torvalds 在 2005 年开发，用于管理 Linux 内核的开发。与传统的集中式版本控制系统（如 SVN）不同，Git 的每个开发者都拥有完整的代码仓库副本，这意味着即使在离线状态下也能进行完整的版本控制操作，极大地提高了开发的灵活性和效率。
2025-02-23 09:25:46
994
原创 Vue 2 路由指南：从基础到高级
Vue Router 是 Vue.js 官方的路由管理器，它允许你在单页面应用中通过不同的 URL 显示不同的组件。Vue Router 与 Vue.js 核心深度集成，提供了声明式的路由定义、嵌套路由、动态路由、导航守卫等功能，帮助开发者构建复杂的单页面应用。
2025-02-14 16:54:32
689
原创 Vue2常用指令
在 Vue2 里，指令是带有v-前缀的特殊属性。它的主要作用是当表达式的值发生变化时，会相应地将某些特殊的行为应用到 DOM 上。简单来说，指令就是 Vue 提供的一种便捷语法，让我们可以更轻松地操作 DOM 和实现业务逻辑。
2025-02-09 18:05:50
482
原创 js小游戏---2048（附源代码）
开始游戏：游戏结束：通过监听键盘的操作，进行移动变化键盘上下左右键控制页面中所有模块同时向键入的方向移动，如果有两块一样的方块，就进行合并，并且在键盘每操作一次的同时，会随机位置出现新的方块。当所有的格子都有方块，并且没有可以合并的方块时，游戏结束游戏开始，启动计时器，创建棋盘数组，用于存放棋子，监听键盘操作，合并棋子的同时，随机生成新的棋子，将棋子的状态事实更新在数组中，当棋盘占满并且无棋子可以合并，游戏结束，将本局得分和游戏时间显示在排行榜中，点击按钮可以再来一局。我们主要研究js部分，所以html和c
2025-01-24 14:17:10
574
原创 es6基础知识点（持续更新中）
var可以重复声明变量，var声明的变量的作用域是函数域，也就是不管在哪定义他，都能访问到，有预解析，变量提升（调用在前，定义在后时，不会报错undefined）如果想要设置不能重复声明的变量：用let或constlet和const都不能重复声明let的值可以修改，cons的值不能修改但是const定义的引用类型值内容可以修改对于const，如果存储的是一个数值，那么存的就是一个值，如果存储的是一个对象，那么存的就是一个内存地址，不能修改就是针对他实际上存储的东西来说的。
2025-01-18 21:56:59
902
原创 DOM（文档对象模型）中常见的API方法
若要将新 h1 元素插入到现有 p 元素之前，可以通过获取<body>节点作为父节点，然后使用。依据元素的名称获取一组元素节点。给元素添加一个新的 CSS 类名，使该类名所定义的样式规则应用到元素上，例如。设置元素的内部文本内容，它只会处理纯文本，不会解析 HTML 代码。会创建一个新的 div 元素节点，可后续用于添加到文档的合适位置。把新节点插入到父节点中，位于参考节点之前的位置。删除元素现有的一个 CSS 类名，去除该类名所对应的样式效果，如。会将 div 元素内部的内容替换为一个新的段落元素。
2024-11-21 13:22:51
664
原创 如果js和css都能实现某一种效果，用js写更好还是用css写更好
例如，如果一个网页应用的登录功能是通过 JS 实现的，包括验证用户输入、发送请求到服务器等一系列操作，那么当登录流程需要调整（如增加新的验证条件）时，就需要对相关的 JS 代码进行仔细的分析和修改，这比单纯修改 CSS 样式要复杂得多。例如，要实现一个图片的滑动展示效果，通过 JS 可以根据用户的点击操作或者定时设置来控制图片的滑动方向和速度等参数，这需要编写一系列的函数和逻辑代码来实现，而 CSS 本身很难直接实现这样复杂的动态效果。例如，要实现一个元素的隐藏效果，若使用 JS 通过修改元素的。
2024-11-17 15:47:49
731
原创 javascript基础
我们在js0基础部分了解到了什么是js，但是我们还不知道js是怎么在浏览器中执行的，接下来我们来展开说一下。浏览器分为两个部分：渲染引擎和js引擎渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，老版本的webkitjs引擎：也称为js解释器。用来读取网页中的js代码，对其处理后运行，比如 chrome浏览器的v8。
2024-11-16 21:42:59
291
原创 HTML中js代码应该写在哪里
async属性表示脚本可以在加载时立即执行，不会阻塞页面的渲染，defer属性表示脚本可以在文档解析完后执行，不会阻塞页面的渲染。这是一种常见的优化方式，它常用于加速页面加载，将脚本放在body底部可以使页面内容先加载，然后再加载js代码，从而加快页面的渲染速度，还可以避免阻塞页面的渲染。这是最常见的用法之一，在head标签中添加script标签会在页面加载的时候立即执行，如果脚本比较大或者需要执行的时间比较长，会阻塞页面的渲染。
2024-11-11 21:01:09
1252
原创 前端开发常用快捷键
多掌握一些快捷键可以帮我们提高编程的效率，快捷键要经常使用才会熟练掌握，最牛的状态是用键盘代替鼠标，希望大家都能早日掌握。同时要注意多回顾一下，可能会有一些以前不知道干嘛用的快捷键，但是现在工作或者学习中能用到的。
2024-11-02 20:49:54
416
原创 margin：auto不生效的几种情况
当一个元素使用绝对定位时，margin：auto同样无法起作用。绝对定位的元素会脱离正常的文档流，其宽度会根据内容自动调整，而经受不起margin属性的限制，绝对定位会忽略margin属性。当一个元素没有指定宽度时，margin：auto无法生效。因为在没有指定宽度的情况下，元素的宽度将默认100%，此时无法进行居中对齐。当一个元素使用浮动时，margin：auto无法生效。浮动元素会脱离文档流，并且会根据自身尺寸进行对齐，而不受margin的控制。我们此时给元素添加一个固定的宽度就可以解决这个问题了。
2024-10-25 21:30:02
592
原创 ＜em＞标签和＜i＞标签的使用与区别
它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。他们的效果是一样的，但是语义不同，<em>标签表示其内容的着重强调，<i>标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义。<em>标签将文本标记为强调格式，会使文字产生倾斜效果。<em>元素可以嵌套，嵌套层次越深，强调程度越深。两者都不是纯粹为了装饰的目的，那是 CSS 样式所做的。我们看到这里会觉得他们两个的效果都一样，我们会疑惑什么时候用，用哪个？it already!
2024-10-23 08:50:44
440
原创 flex布局对行内、块级子盒子的影响
原来的思路是，因为span是行内元素，大小随着内容的大小变化，如果想要设置宽高，可以将他设置为块元素或者是行内块元素。后面在练习新知识的时候，不小心把display： inline-block；注释掉了，发现最终呈现的效果没有变化。这种特性有时候还是很有用的，比如轮播图自定义前一页和后一页的按钮，直接给这2个行业元素设置图片背景就可以了。今天学习flex的时候做了一个这样的案例。发现其他行内元素也会出现这种情况。于是又尝试了其他的行内元素。
2024-10-21 21:00:41
252
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人