- 博客(34)
- 收藏
- 关注
RSS订阅原创 TypeScript 与 JavaScript 的区别
TypeScript 作为 JavaScript 的超集，在保持 JavaScript 灵活性的基础上引入了强大的类型系统。本文将从 8 个关键维度深入剖析两者的差异，并通过实际案例揭示 TypeScript 的核心价值。
2025-03-30 14:19:48
645
原创 nodejs中的path模块
Node.js 的 path 模块是处理文件路径的核心工具，它提供了一系列方法用于操作和解析文件路径，同时兼容不同操作系统（Windows 和 POSIX）的路径格式。
2025-03-16 10:41:59
789
原创 虚拟DOM以及手写简单的Vue2虚拟DOM的核心代码!
虚拟 DOM（Virtual DOM）是一种编程概念，它是将真实的 DOM 树映射到一个 JavaScript 对象上，这个对象包含了真实 DOM 树中所有节点的相关信息，包括标签名、属性、文本内容等。你可以简单理解为 虚拟 DOM 是一个轻量级的 JavaScript 对象， 用于描述真实 DOM 的结构
2025-03-16 10:12:59
726
原创 Vue3——Fragment
Vue 3 的Fragment特性通过支持多根组件，解决了 Vue 2 的单根限制问题，使代码更简洁、结构更灵活。需要严格 HTML 语义的结构（如表格、列表）。减少冗余 DOM 层级以优化性能。动态布局和条件渲染多元素。使用时需注意属性继承、过渡动画等细节，结合 Vue 3 的其他特性（如 v-bind=“$attrs”、provide/inject）可充分发挥其优势。
2025-03-09 09:06:46
1036
原创 vue3中ref和reactive的区别
在 Vue3 的响应式系统中，ref 和 reactive 是最核心的两个 API，它们的区别是开发者必须掌握的底层原理。
2025-03-08 09:43:42
1305
原创 Vue3的Hook指南
Hook是包含响应式状态和逻辑组合的函数。使用创建响应式状态包含等响应式操作可以调用生命周期钩子返回可复用的状态和方法集合注意： Vue官方文档中并没有直接称为“hook”，而是使用“组合式函数”（Composable）这个术语。组合式函数的作用是封装和复用有状态的逻辑，类似于React Hooks，但实现方式不同。Hook模式将前端开发带入逻辑即服务原子化：每个Hook都是独立的功能单元可组合：通过函数组合实现复杂功能可测试：脱离 UI 实现纯逻辑验证类型化。
2025-03-07 19:41:47
854
原创 Vue3生命周期以及与Vue2的区别
Vue3 的生命周期设计在兼容 Vue2 的同时，通过组合式 API 和更精确的钩子命名，提供了更灵活的代码组织方式。无论是选项式还是组合式，合理利用生命周期钩子能显著提升组件性能和可维护性。升级到 Vue3 时，建议优先采用组合式 API 以发挥其最大优势.
2025-03-02 14:32:31
1371
1
原创 vue2 生命周期
Vue 2 的生命周期钩子函数为开发者提供了丰富的控制能力，通过在不同的生命周期阶段执行相应的代码逻辑，可以更好地管理组件的状态、操作 DOM 元素、处理异步请求和进行资源清理等工作。理解这些生命周期钩子的触发时机和用途，有助于编写更高效、稳定的 Vue 应用。
2025-02-14 14:52:46
2282
原创 vue2 中 computed 计算属性 和 watch 监听属性的区别
在 Vue 2 中，watch 监听属性和 computed 计算属性都用于处理数据的变化，但它们在使用场景、实现方式和性能等方面存在明显的区别。本文主要从定义与语法、使用场景、性能、响应式触发方式、数据流向、依赖追踪、代码复杂性和可维护性几个方面介绍两者的区别
2025-02-14 10:45:15
828
原创 vue2 中 watch 监听属性
watch 是 Vue 2 中的一个重要选项，用于定义观察者（watcher），监视指定的数据属性的变化。当被监视的属性发生变化时，相应的处理函数会被调用，从而允许你对变化做出反应。这在需要根据数据变化执行异步操作或开销较大的计算时非常有用。
2025-02-14 10:00:32
2655
原创 vue2中 computed 计算属性
在 Vue 2 中，computed 计算属性是组件中非常重要的一部分，它允许我们基于现有数据派生出新的数据，并且具有缓存机制，能够提高应用的性能和响应速度。本文将详细介绍 computed 计算属性的用法、特点以及实际应用案例。
2025-02-13 21:43:58
1584
原创 Vue2中常用指令
在前端开发领域，Vue.js 以其简洁、灵活和高效的特点备受开发者青睐。Vue 2 作为其重要版本，提供了一系列功能强大的指令，帮助开发者轻松实现各种页面交互和数据绑定功能。本文将详细介绍 Vue 2 中的常用指令，包括它们的用法、示例和适用场景，帮助你更好地掌握 Vue 2 的开发技巧。
2025-02-13 21:17:38
1163
原创 JavaScript中的防抖与节流：提升性能的关键技巧
防抖和节流是 JavaScript 开发中极为实用的性能优化技巧。合理运用这两种技术，能够显著减少不必要的计算和请求，从而有效提升页面的性能以及用户体验。在实际的开发过程中，我们需要依据具体的业务场景和需求，精准地选择合适的技术来优化代码，以实现更加高效、流畅的应用程序。如果你还想了解它们在特定框架（如 Vue、React）中的应用，或者想进一步优化代码示例，都可以随时告诉我，我会继续完善这篇博客。
2025-02-09 16:00:32
1187
原创 入门 Canvas：Web 绘图的强大工具
canvas>是 HTML5 引入的一个极为关键的标签，它犹如网页上一块洁净的空白画布，等待着开发者用 JavaScript 这把神奇的画笔，在上面挥洒创意，绘制出各式各样的图形、图像，并实现精彩纷呈的动画效果。与传统的基于矢量图形的<svg>相比，Canvas 基于位图工作，这意味着它是通过对像素的精确控制来处理图形的。这种特性使得 Canvas 在创建高度动态和交互性的图形内容方面表现出色，尤其适合需要频繁更新图形状态的场景，比如实时游戏画面、动态图表展示等。
2025-01-25 20:26:55
1353
原创 网络Web存储之LocalStorage
是HTML5提供的一种客户端存储机制，属于Web存储API的一部分。它允许网页在用户的浏览器中存储键值对数据，这些数据会以持久化的方式保存，除非用户手动清除浏览器缓存，或者通过JavaScript代码进行删除操作，否则数据将一直存储在用户的本地浏览器中。从技术角度来看，是window对象的一个属性，是一个存储对象，它提供了一些简单的方法来操作存储的数据，如setItemgetItemremoveItem和clear等，以实现数据的存储、读取、删除和清除所有数据的功能。
2025-01-19 21:18:51
1702
原创 同源策略（Same-Origin Policy）
同源策略是Web浏览器的一种安全机制，用于限制来自不同源的文档或脚本如何与另一个源的资源进行交互。这种策略有助于防止恶意网站读取另一个网站的敏感数据，例如用户的登录凭据或私人信息。通过确保只有来自相同源的脚本才能访问和操作DOM、发送AJAX请求或读取Cookie等，同源策略为Web应用程序提供了基本的安全保障。Web内容的源由用于访问它的URL的方案（协议）、主机名（域名）和端口定义。即源由协议、域名和端口组成。在页面中通过 about:blank 或 javascript:；
2024-12-14 19:50:29
2246
原创 网络请求与远程资源之XMLHttpRequest Level 1和2（一）
本文主要讲述了XMLHttpRequest Level 1的基本信息和XMLHttpRequest Level 2的详细信息XMLHttpRequest Level 2(XHR Level 2)是XHR Level 1的增强版，它引入了一系列新特性和功能，以改善Web开发中异步请求的处理。
2024-12-14 08:08:25
1087
原创 input与伪元素不兼容
由于元素的内容模型为空、不是容器元素、具有替换元素的特性，并且受到HTML和CSS规范的限制，因此它不能使用:after伪元素。如果需要在元素附近添加额外的内容或样式，通常需要使用其他HTML元素（如等）来包围它，并对这些元素应用CSS样式。同理，像::before等伪元素应该有与::after相同的问题。
2024-12-08 08:57:22
715
原创 ES6之解构
解构是JavaScript（ES6及以后版本）中一种非常强大的语法特性，它允许我们按照一定模式从数组或对象中提取值，并将这些值赋给声明的变量。它使得从数组和对象中提取数据变得更加简洁和方便。在实际开发中，合理利用解构可以提高代码的可读性和维护性。
2024-11-29 15:21:53
816
原创 module模块化
模块化是指将一个大的JavaScript文件拆分成多个小的文件，每个文件都是一个独立的模块，拥有自己的作用域，并通过export和import语句来导出和导入模块中的成员（如变量、函数、类等）。这种方式有助于减少全局命名空间的污染，提高代码的可维护性和可重用性。
2024-11-24 08:40:13
306
1
原创 js实现八码数问题
本实验使用JavaScript实现了广度优先搜索（BFS）算法来解决八码数问题。通过定义适当的数据结构和辅助函数，以及实现BFS算法和路径构造函数，成功找 到了从初始状态到目标状态的解路径。实验结果表明，BFS算法能够正确解决八码数问题，但存在效率较低的问题。未来可以考虑引入启发式搜索算法来优化搜索过程。
2024-11-22 11:30:31
769
原创 js网络请求与远程资源之ajax（二）
基本概念 AJAX（Asynchronous JavaScript and XML）是一种用于在客户端（通常是浏览器）与服务器之间进行异步通信的技术。工作原理 Ajax通过XmlHttpRequest对象（XHR）来向服务器发送异步请求，从服务器获得数据后，再用JavaScript来操作DOM（文档对象模型）从而更新页面内容。这种方式使得网页可以在不重新加载整个页面的情况下，实现部分内容的更新，提高了用户体验和网页的交互性。同步。
2024-11-16 11:35:15
799
原创 js动画和css动画的区别
CSS动画：适用于简单、易于实现的动画；JS动画：适用于更复杂的、需要精细控制和更丰富的交互体验的动画。两种动画各有其优势和使用场景。在选择使用哪种动画方式时，开发者应根据具体需求和场景来进行权衡和选择。
2024-11-11 17:56:03
373
原创 超详细的flex布局！！！
CSS Flexible Box Module Level 1(简称flexbox，弹性盒，https://www.w3.org/TR/css-flexbox-1/)，它把以往艰巨的布局任务变得极为简单，例如很多类型的页面、小组件、应用和图库。弹性盒是一种简单而强大的布局方式，我们通过弹性盒指明空间的分布方式、内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中。本文通过主要通过CSS权威指南的只是进行阐述flex布局的强大之处和各种属性及其属性值的运用。
2024-11-10 10:49:05
5662
原创 屏幕分辨率和浏览器页面显示宽度的关系
在写页面的过程中，明明我的笔记本的分辨率是2560*1600的，但是当我给一个页面的body设置一个1240px远小于2560px的宽度，为什么会出现水平滚动条？此外，如果你的显示器一般在24寸-30寸的，应该不会出现这样的问题，因为这样的显示器足够大，缩放和文本缩放默认设置一般都为100%，这样的问题大概率会出现在笔记本上。自己测试的页面body变成了设置的1240px，不在出现滚动条，如果不设置width的话，会发现虽然变宽了，但是仍没到达屏幕应该有的分辨率2560px；为什么会出现这样的问题呢？
2024-11-01 10:34:21
1242
原创 Grid布局
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
2024-10-26 08:30:35
8216
1
原创 一篇带你认识BFC！！
BFC的全称为Block formatting Context，意思是块级格式化上下文。是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。可以理解为是一个元素的属性，当开启这个属性后，这个元素就可以看作是被隔离的独立容器，容器里面的元素不会影响到外面的元素。
2024-10-19 15:20:50
1222
原创 var、let 和 const 的区别
var、let和const在作用域、变量提升、重复声明、修改变量值、初始值设置、全局对象属性以及执行速度和内存占用等方面存在显著差异。在实际编程中，应根据具体需求选择合适的关键字来声明变量。
2023-08-13 16:22:47
203
1
原创 js中数组的常用方法
在JavaScript中，数组是一种非常重要的数据结构，它提供了一系列丰富的方法来操作和处理数组元素。以下是一些常用的数组方法
2023-08-06 10:16:19
82
原创 js获取元素的方式与区别
作用：根据ID获取元素对象参数：id值，区分大小写的字符串返回值：元素对象或null(如果页面中没有这个唯一标识的id，则返回一个null)
2023-07-30 16:46:43
261
2
原创 第十七周总结
总的来说，id主要用于表示一个唯一元素，而class则用于表示一组具有相同样式的元素。当需要对一些特定的元素进行操作或样式化时，我们会使用id，而当需要对一整组元素进行操作或样式化时，则会使用class。
2023-06-11 15:26:44
81
1
原创 第十六周总结
接下来，需要在鼠标滑动时改变遮挡层的透明度。可以使用CSS的属性在两个不同的状态之间平滑地过渡。比如:最后，将你想显示的内容放置在容器的内部，并设置其所需的样式。2. 清除浮动的六种方法额外标签法1.1 末尾标签法 通过在浮动元素的末尾添加一个空的标签。这是W3C推荐的做法，虽然比较简单，但是添加了无意义的标签，结构化比较差，所以不推荐使用。下面三种写法都适用： 1.2 内部标签法 把div放进父盒子里，这样盒子会撑开
2023-06-04 10:31:59
78
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人