- 博客(50)
- 收藏
- 关注
RSS订阅原创 前端面试小知识（JS）
定义闭包是JavaScript中的一个核心概念，它允许一个函数访问并操作函数外部的变量。更具体地说，当一个内部函数被其外部函数返回并在其他地方被调用时，它仍然可以访问外部函数的变量，即使外部函数已经执行完毕。这些变量不会被垃圾回收机制回收，因为内部函数仍然持有对它们的引用。用途1.数据封装和隐私：闭包可以创建私有变量，因为它们只能通过闭包内部的函数访问。2.模块化代码：闭包可以帮助组织代码，将相关的功能封装在一起。3.维持状态。
2024-08-17 00:09:08
656
原创 TypeScript与面向对象编程
TypeScript是JavaScript的一个超集，由微软开发，它在JavaScript的基础上添加了类型系统和对ES6+的新特性的支持。TypeScript最终会被编译成纯JavaScript代码，以便在任何支持JavaScript的环境中运行。在TypeScript中，类是创建对象的蓝图。类定义了对象的属性和方法。TypeScript类的定义使用class关键字，可以包含属性、构造函数、方法等。// 类属性// 构造函数// 类方法greet() {
2024-07-21 20:23:42
1095
原创 TypeScript导学：从零开始
TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集，添加了可选的静态类型和基于类的面向对象编程。自2012年首次发布以来，TypeScript因其能够提高代码的可读性、可维护性和可扩展性而迅速获得了广泛的认可。随着现代Web应用的复杂性日益增加，TypeScript提供了一种有效的方式来管理大型代码库，减少运行时错误，并提高开发效率。TypeScript的类型系统非常强大，它不仅支持基本的类型注解，还提供了许多高级类型特性，以支持更复杂的编程场景。
2024-07-18 21:18:05
1083
原创 深入异步JavaScript：掌握Promises与async/await
异步编程在JavaScript中是处理耗时操作（如网络请求、定时任务）而不阻塞用户界面的关键。
2024-07-16 22:34:07
1401
原创 Vue 3 组件通信与状态管理：从基础到Pinia的全面解析
自定义事件在Vue中用于父子组件间的通信。父组件通过监听子组件发出的自定义事件来接收数据或执行某些操作。使用自定义事件：在中，使用来声明可以触发的事件，并在模板中使用v-on（或简写为）来监听这些事件。-- 父组件 --><template>// 输出: Custom event data</script>-- 子组件 --></script>
2024-07-15 23:21:45
788
原创 Element Plus 与 Vue 3：构建现代化 Web 应用的完美搭档
Element Plus 是一个专为 Vue 3 设计的组件库，它继承了 Element UI 的优秀基因，提供了丰富的 UI 组件，帮助开发者快速构建高质量的用户界面。
2024-07-14 23:07:44
1041
1
原创 Vue 3 组合式 API 指南：响应式状态管理与跨组件通信
Vue 3 的组合式 API 通过setup函数提供响应式状态管理，支持使用ref和reactive创建响应式数据，computed和watch处理计算属性和侦听器。同时，provide和inject允许跨组件进行依赖注入，实现数据和方法的共享。这些特性提升了代码的组织性、可重用性以及组件间的解耦。希望这篇文章能帮助到你。
2024-07-13 23:34:36
768
原创 Vue Router 4：构建高效单页面应用的路由管理
在文件中，使用函数创建路由实例，并定义路由规则。路由规则定义了应用中的页面路径和对应的组件。path: '/',},},// 其他路由规则...routes,});在Vue Router中，路由是通过一个数组来定义的，每个路由对象可以包含多个属性来描述路由的行为和结构。path: '/home', // 路径name: 'Home', // 命名路由component: Home, // 要渲染的组件props: true, // 是否将路由参数作为props传递给组件。
2024-07-12 23:20:33
1305
原创 掌握axios与Vue 3：构建高效HTTP请求的终极指南
axios是一个基于Promise的HTTP客户端，用于浏览器和node.js环境中。它允许开发者以一种简洁的方式发送异步HTTP请求到REST endpoints，并处理响应。axios支持请求和响应拦截器、自动转换JSON数据、客户端支持防御XSRF等特性。axios是一个功能强大的HTTP客户端库，它使用Promise来处理异步请求，非常适合在Vue 3项目中使用。
2024-07-11 22:35:38
1097
原创 Vue 3 组件通信全解：从基础到高级技巧
在前端开发中，组件可以被看作是构建用户界面的独立单元。它封装了特定的功能和样式，可以被重复使用，并且可以独立于其他部分进行开发和测试。组件的主要作用是提高代码的复用性、可维护性和可扩展性。通过将界面拆分成多个组件，开发者可以更容易地管理复杂的应用程序，并且可以针对每个组件进行优化，从而提高整体的开发效率和应用性能。Vue 3 引入了 Composition API，为组件通信带来了新的灵活性和强大的功能。
2024-07-10 22:50:50
1391
原创 Vue 3与Pinia：下一代状态管理的探索
Pinia 是一个为 Vue.js 设计的状态管理库，它在 Vue 3 中得到了官方的支持。Pinia 的设计目标是提供一个简单、轻量级且可扩展的状态管理解决方案，它旨在替代 Vuex 4，后者是 Vue 2 的官方状态管理库。Pinia 的设计哲学是尽可能地简化状态管理，同时保持足够的灵活性以适应各种规模的应用。Pinia 提供了一个强大的插件系统，允许开发者扩展其功能。创建自定义插件可以让你添加全局状态、拦截actions、添加全局getters等。1.创建插件。
2024-07-09 23:33:57
1144
原创 掌握Vue 3生命周期：从组合式API到高效代码实践
Vue 3 引入了新的生命周期钩子和改进了现有的生命周期管理方式，以适应组合式 API 的引入。生命周期钩子是 Vue 组件中用于控制组件在不同阶段执行特定逻辑的函数。了解这些钩子对于构建高效和可维护的 Vue 应用程序至关重要。Vue 3 的生命周期钩子是构建高效和可维护 Vue 应用程序的关键。它们允许开发者在组件的不同生命周期阶段执行特定的逻辑，从而控制组件的行为和性能。正确理解和使用这些生命周期钩子，对于编写高质量的 Vue 代码至关重要。
2024-07-08 23:05:57
896
1
原创 掌握Vue插槽：创建灵活且可复用的组件
Vue插槽主要分为两种类型：具名插槽（Named Slots）和作用域插槽（Scoped Slots）。1.具名插槽具名插槽允许开发者为组件内的插槽指定一个名称，父组件可以通过这个名称向子组件传递内容。在子组件中，使用标签并指定一个name属性来定义具名插槽。父组件在使用子组件时，通过标签的slot属性指定要插入的内容应该放在哪个具名插槽中。2.作用域插槽作用域插槽允许子组件向父组件传递数据，使得父组件可以根据子组件提供的数据来决定如何渲染插槽内容。
2024-07-07 22:58:19
713
原创 揭秘 Vue 组件通信：构建响应式数据流
Vuex 是一个第三方库，需要通过 npm 或 yarn 安装到你的项目中。bash复制# 或者父子组件通信通过 props 传递数据，实现单向数据流。使用 $emit 方法传递事件和数据。使用 v-model 实现双向绑定。非父子组件通信使用 Event Bus 作为中央事件总线。创建和实例化 Event Bus。使用 𝑒𝑚𝑖𝑡和emit和on 进行事件传递和监听。Vuex 状态管理介绍 Vuex 及其核心概念。使用 Vuex 进行组件通信的示例。
2024-07-06 21:40:06
1323
原创 探索Vue Router：构建高效单页面应用的指南
动态路径参数以冒号开头，它们类似于正则表达式的占位符，用于捕获 URL 的一部分。routes: [// 动态路径参数以冒号开始});在这个例子中，任何形式的/user/x都会映射到同一个路由，其中x可以是任何值。当匹配到路由时，x的值会被存储在中。Vue Router 是 Vue.js 的官方路由管理器，为构建单页面应用（SPA）提供支持。它通过定义路由规则，将 URL 映射到不同的组件，实现页面内容的动态渲染和切换，而无需重新加载页面安装 | Vue Router。
2024-07-05 22:33:40
1411
1
原创 开发者工具攻略：前端测试的极简指南
许多人存在一个常见的误区，认为测试只是测试工程师的工作。实际上，测试是整个开发团队的责任，每个人都应该参与到测试过程中。在这篇博客我尽量通俗一点地讲讲我们前端开发过程中，该如何去测试开发者工具是前端开发中一个强大的工具集，它可以帮助开发者调试、分析、测试和监控网页。Console：用于输入JavaScript代码，执行调试语句，查看控制台输出等。Elements：用于查看和编辑页面上的HTML元素，包括元素属性、样式和事件监听器。Network：用于跟踪和分析网络请求，查看响应内容，检查加载时间等。
2024-07-04 23:15:20
1004
原创 Vuex 核心揭秘：打造高效前端状态库
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
2024-07-03 23:56:01
1226
原创 Vue技巧大揭秘：自定义指令的力量与应用
Vue自定义指令允许开发者封装DOM操作逻辑，全局和局部注册提供了灵活性。指令钩子在不同生命周期操作DOM，参数和修饰符增强了指令的定制能力。这些特性有助于创建高效、可维护的自定义指令。
2024-07-02 22:35:00
1138
原创 Vue Router的深度解析
Vue Router是一个专为Vue.js应用程序设计的路由管理器。它允许开发者在单页应用中构建复杂的页面路由逻辑，通过定义URL和组件的映射关系，实现页面的动态加载和导航。Vue Router的核心。
2024-07-01 23:45:35
1045
原创 前端面试必备：深入解析Vue.js中v-if与v-show的原理与应用
在Vue.js中，条件渲染是一个核心的概念，它允许我们根据数据的状态来动态地显示或隐藏元素。v-if和v-show是Vue.js提供的两个最常用的条件渲染指令，它们在表面上看起来很相似，但实际上在背后的工作原理和适用场景上有着显著的差异。作为前端开发者，理解v-if和v-show的区别不仅能够帮助我们更好地使用Vue.js构建高效的应用，也是面试中常见的问题，能够考察我们对框架深层次工作机制的理解。接下来，我们将一起探索这两个指令的奥秘，为你的前端面试之旅增添一份自信。v-if和v-show的基本概念。
2024-06-30 22:46:54
776
原创 掌握 Vue 组件通信：打造高效、灵活的前端应用
通过本文我们学习了如何通过Props、$emit、$refs、Event Bus、Provide/Inject以及Vuex等手段，在Vue组件间有效传递数据和事件。这些方法各有千秋，适用于不同的应用场景和需求。通过实际的待办事项应用案例，我们展示了父子组件间的数据流和事件处理，从而帮助开发者在实践中灵活运用这些通信策略，构建出既高效又易于维护的前端应用。
2024-06-29 23:23:11
818
原创 JavaScript事件坐标终极指南：一切尽在掌握
在网页上，事件坐标是指鼠标或触摸事件发生时，鼠标指针或触摸点在屏幕上的位置。这些坐标对于网页上的交互非常重要，比如点击、拖拽、滑动等。视图坐标（clientX/clientY）：这是鼠标指针在浏览器窗口内的位置。页面坐标（pageX/pageY）：这是鼠标指针在整个网页上的位置，包括滚动带来的偏移。屏幕坐标（screenX/screenY）：这是鼠标指针在整个电脑屏幕上的位置，与浏览器窗口和页面滚动无关。在实际应用中，这些坐标可以帮助我们实现各种功能，比如拖拽、绘图和游戏。
2024-06-27 22:37:30
928
原创 个人对JavaScript面向对象的见解
面向对象编程是一种编程范式，它将数据和操作数据的方法组合在一起，形成所谓的“对象”。对象是面向对象编程的基本构建块，它们可以表示现实世界中的实体，如人、汽车、银行账户等。OOP的核心概念包括封装、继承和多态，这些概念共同促进了代码的模块化和重用。类（Class）是一个抽象模板，用于创建具体对象。它定义了一组属性和方法，这些属性和方法将被所有从这个类创建的对象共享。类描述了对象的结构和行为，但它本身不是对象。它更像是一个创建对象的蓝图。对象（Object）是一个具体实例，它是根据类创建的。
2024-06-26 23:27:50
1169
原创 个人对于Axios的见解
定义和背景： Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它由前 GitHub 和 SoundCloud 工程师 Mike Rourke 创建，并在 2014 年首次发布。Axios 的设计目标是提供一种简洁、灵活的方式来处理 HTTP 请求，同时提供一些高级功能，如拦截请求和响应、自动转换 JSON 数据、客户端支持防御 CSRF 等。
2024-06-25 23:26:01
1444
原创 深入理解 JavaScript Promise
Promise 是一个表示异步操作最终完成或失败的对象。它代表了某个未来才会知道结果的事件（通常是一个异步操作）。Promise 是一个包含三种状态的对象：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 作为现代 JavaScript 异步编程的核心，为开发者提供了一种清晰、可控的方式来管理复杂的异步流程。通过理解 Promise 的基本概念、状态、链式调用以及错误处理，我们可以编写出更加模块化、易于维护的代码。
2024-06-24 20:41:48
1185
原创 深入理解 Vue CLI：Vue.js 项目的快速搭建与配置
-- src/public目录：包含静态资源，如图片、样式表、脚本等，这些资源会被复制到构建输出目录，不会被 Webpack 处理。src目录：包含项目的源代码，这是 Vue CLI 项目的核心目录。assets目录：用于存放静态资源。components目录：用于存放 Vue 组件。App.vue：根组件，是所有组件的入口。main.js：入口文件，用于启动 Vue 应用。：Babel 配置文件，用于配置 Babel 转译 ES6+ 代码。
2024-06-23 23:30:32
945
原创 聊聊JSON
JSON（JavaScript Object Notation）是一种用于数据交换的文本格式，它使用JavaScript的语法规则来表示数据对象。尽管JSON基于JavaScript，但它是语言无关的，这意味着任何能够解析文本的编程语言都可以使用JSON。JSON与JavaScript的交互是通过内置的JSON对象实现的。和，使得JavaScript能够轻松地与JSON数据格式进行转换。
2024-06-21 22:47:22
1567
2
原创 ES6及更新版本的新特性
在撰写博客时，您可以提供更多实际的代码示例，展示模板字符串在不同场景下的应用，并讨论它们与传统字符串字面量相比的优势。此外，还可以探讨模板字符串的高级用法，如标签函数的使用，以及在现代。：虽然模板字符串提供了语法上的便利，但在某些情况下，如果字符串构建非常频繁或非常复杂，可能会对性能产生一定影响。：虽然解构赋值使代码更简洁，但在某些情况下，过度使用可能会降低代码的可读性，特别是对于不熟悉这种特性的开发者。：模板字符串在构建复杂的字符串时非常有用，尤其是在需要动态插入多个变量或表达式的情况下。
2024-06-20 23:09:03
1364
原创 Vue CLI，Vue Router，Vuex
Vue CLI是 Vue.js 的官方命令行工具，用于快速搭建 Vue.js 项目。它提供了一个图形界面（通过vue ui命令访问），以及一个命令行界面，允许开发者通过简单的命令来生成和管理 Vue 项目。Vue CLI 支持各种项目配置，包括单文件组件（SFCs）、路由、状态管理、构建工具配置等。
2024-06-19 22:07:59
1519
1
原创 个人关于Vue2组成的见解
自定义指令允许开发者扩展 Vue 的指令系统，创建自己的指令。自定义指令主要用于对 DOM 元素进行底层操作，例如自动聚焦输入框或自定义滚动行为。Vue.js 是一个功能丰富且灵活的前端框架，特别适合构建复杂的单页应用程序。它的组件化模式不仅提高了开发效率，也增强了代码的可维护性和可测试性。
2024-06-18 21:17:57
802
原创 个人关于vent组件的见解
什么是vent组件？vent组件是一个轻量级的事件管理器，它允许开发者在Web应用程序中以一种声明式的方式处理事件。事件（Event）：应用程序中的一个信号，表示某个操作或行为已经发生。发布者（Publisher）：触发事件的一方，它发出事件通知。订阅者（Subscriber）：对事件感兴趣的一方，它注册自己以响应事件。监听器（Listener）：实际执行响应事件操作的函数或方法。它在Web开发中的作用vent组件的主要作用是简化事件处理，提高代码的模块性和可维护性。解耦组件。
2024-06-18 00:39:05
1185
原创 算法解析：有序数组的平方（以JS为例）
这个算法的目标是计算一个数组中每个元素的平方，并将结果存储在一个新的数组中，同时保持结果数组的排序顺序。ij和k，分别指向当前考虑的较小元素、较大元素和结果数组的最后一个位置。
2024-06-17 14:36:52
513
原创 滑动窗口（LeeCode209题，以JS为例）
滑动窗口是一种强大的算法工具，能够以线性时间解决多种子数组相关问题，是算法竞赛和工业界中常用的技术之一。
2024-06-17 14:35:24
862
原创 数组移除元素算法（以JS为例）
需要注意的是，这种实现并不是最优的双指针技术，因为它没有使用两个指针来同时处理元素的移动和比较。在更复杂的场景中，双指针技术可能会涉及到两个或更多的指针来同时进行不同的操作，以实现更高效的数据处理。这种实现方式的优势在于它不需要额外的空间来存储新数组，而是在原数组上进行操作，节省了空间。但是，这种方法会改变原数组的内容，如果需要保留原数组不变，就需要在函数开始时创建一个原数组的副本。作为辅助指针，用来记录新数组（或原数组中未被覆盖部分）的当前位置。的值，即新数组中有效元素的数量。：如果当前元素不等于。
2024-06-16 15:19:36
331
原创 关于二分法的理解（以JS为例）
二分查找算法就像是在有序的书架上快速找到一本书的技巧。它简单、高效，但需要一个有序的环境。下次当你需要在大量有序的数据中快速找到某个元素时，不妨想想这个算法，它可能会帮你节省很多时间。
2024-06-15 22:43:34
980
原创 个人关于Leecode 49题见解（保姆级）
这道算法题要求将一个字符串数组中的同位素（即字母可以重新排列形成的单词）分组。空数组检查： 如果输入的字符串数组strs是空的，直接返回空数组。创建 Map 对象： 使用 JavaScript 的Map对象来存储同位素的分组。Map的键将是每个字符串的字符计数的字符串表示，值将是具有相同字符计数的字符串数组。遍历字符串数组： 使用for...of循环遍历输入数组中的每个字符串。创建字符计数数组： 对于每个字符串，创建一个长度为 26 的数组characters。
2024-06-14 23:01:13
923
原创 CSS3动画：动态网页设计的魔法
CSS3动画是网页设计中的一个革命性特性，它允许开发者使用CSS代码直接在浏览器中创建平滑的动态效果。简而言之，CSS3动画为网页设计师提供了一种简单、高效且富有表现力的方式来增强网页的动态性和吸引力。
2024-06-13 23:11:00
855
原创 个人关于vuex的见解
Vuex 是 Vue.js 的官方状态管理库，专为 Vue.js 应用程序设计，用于在复杂的前端应用中集中管理状态。集中式状态管理： Vuex 允许你将所有组件的状态集中存储在一个单一的 store 对象中，这使得状态的维护和管理变得更加集中和有序。组件间通信： 在没有 Vuex 的情况下，组件间通信可能会变得复杂，特别是那些没有直接父子关系的组件。Vuex 提供了一个中央存储，使得任何组件都可以访问和修改状态，简化了通信流程。响应式状态更新： Vuex 与 Vue 的响应式系统紧密集成，当状态发生变
2024-06-12 22:25:59
1097
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人