妍思码匠的博客

点击取消按钮：会触发close()关闭函数 → 然后触发对话框的handleClose()函数（内置的@close事件）需要确保点击取消按钮时仅触发一次有效关闭事件，并传递正确的布尔值参数。1. 第一次参数为PointerEvent（事件对象）2. 第二次参数为undefined。

通过onStart在拖拽开始时给body添加一个class类，然后通过这个类设置全局的指针事件，并在onEnd拖拽结束时清除这个class类。通过物理屏蔽+定时清理，确保拖拽过程中无法选中文本，也不影响拖拽元素操作，可以根据实际效果调整清理间隔时间（50ms）。但是这个方式可能会影响页面其他容器的效果。

1.自定义标题插槽：允许自定义抽屉标题内容。...解释：通过template #header插槽，将props.title包裹在div中方便定制样式。2.自定义内容插槽：在抽屉内容区域添加自定义逻辑。<img v-else-if="props.contentType === 'image'" :src="props.content" alt="自定义图片">...});解释：定义contentType和content属性，根据contentType显示文本或图片，方便传入不同类型内容数据。

虽然 UnoCSS 自带的预设规则已经涵盖了许多常见的样式需求，但在实际项目中，我们往往会遇到一些特殊的样式设定。比如，项目可能有特定的颜色主题、独特的布局方式或者特殊的交互效果，这些仅靠预设规则难以满足。通过自定义规则，我们可以将项目中反复出现的样式模式抽象成可复用的类名，不仅减少了重复代码，还能让代码结构更加清晰，维护起来更加方便。在 UnoCSS 中，我们通过在uno.config.js或uno.config.ts文件中配置rules选项来自定义规则。规则可以分为静态规则和动态规则两种类型。

项目中经常会用到的一个场景，表格第一列显示序号（1、2、3...），但是在翻页后要递增显示序号，例如10、11、12（假设一页显示10条数据），针对这种情况，封装了一个vue的组件。

在package.json里，版本号前的^是常见版本范围表示。如^x.y.z，主版本号（x）固定，次版本号（y）和修订版本号（z）会安装为该范围内最新版本。这会使npm按仓库版本发布和依赖解析算法选最新版本。不同开发者执行install时小版本可能不同。若包遵循语义化版本规范且小版本升级兼容，理论上不影响核心功能；若小版本升级包含未测代码或隐藏变更，项目在不同环境表现可能不一致。在构建和部署上，不同小版本的文件结构或依赖关系的细微差异，可能导致构建失败、构建产物不同或部署时行为异常。

2，通过border给圆的边框设置宽度和颜色，并通过border-top-color设置和当前背景色一致，实现有缺口的视觉效果。3，将圆的background-color设置为transparent透明，形成一个空心的圆环。1，使用一个div，设置宽高相等、再设置border-radius为50%，形成一个圆；4，定义spin动画，使圆环旋转，实现加载的视觉效果。

使用自定义主题颜色的 div

类型断言是TypeScript中一个强大的工具，它为我们在处理类型时提供了更多的灵活性。它可以帮助我们处理联合类型、与类型定义不完善的第三方库交互等情况。然而，我们也要谨慎使用，因为错误的类型断言可能会导致运行时错误。只要我们在使用类型断言时遵循合理的规则并且对我们处理的数据有清晰的理解，就能充分发挥它的优势，写出更加健壮、类型安全的TypeScript代码。

javascript根据名字生成头像图片

本文对比了原子化CSS（以Unocss为例）和CSS预编译器（以Sass为例）的不同特点。原子化CSS通过组合小的类名来构建样式，具有全局复用性和按需加载的优势，但在处理复杂样式时可能显得不够灵活。CSS预编译器则通过变量、嵌套和混合等功能提供了更高的灵活性，但需要编译过程且可能导致文件体积较大。两者各有优劣，结合使用可能是一种有效的策略。

设想你是一名掌控时光的科学家，每次按下按钮，你的时光机就带领你穿越至不同年代，见证科技演变的奇迹。同样地，在Web开发领域，React Hooks 就像是时光机的操控台，让功能组件具备了管理状态和副作用的能力，打破了传统Class Component的界限，实现了更简洁、更灵活的编程模式。

自ES6（ECMAScript 2015）发布以来，JavaScript每年都有重大更新，引入了一系列革命性的新特性和API，极大地提升了开发效率和代码可读性。以下是在ES6之后版本中的一些核心新特性总结。

想象一下，你是位大厨，正准备为即将举行的宴会精心筹备一份精美的菜单。然而，面临的问题是如何让每一道菜既美味又不会使宾客感到过重负担？这就像我们在前端开发中遇到的情景，我们需要设计的应用既要丰富，又要确保加载速度快，体验佳。让我们一起走进前端的“厨房”，学习如何运用Tree Shaking与Code Splitting这两把锋利的刀具，让我们的“菜品”更加精致且高效。

xterm.js实现网页版终端的细节处理，包括转译序列、转译符、核心属性等

因为最近项目需要写一个网页版终端，然而网上资料很多，但发现相关配置和API都很少，而且官网文档也很难看懂，因此小编翻阅了核心的源码，实现了一版，在此分享给各位码农。当终端中的文本选择发生改变（例如，用户通过鼠标或键盘操作选择了不同的文本区域）时触发该回调函数。这可以用于跟踪用户在终端中的光标操作，例如实现一些与光标位置相关的交互逻辑或者记录用户的操作轨迹。当终端的大小（例如，列数、行数或者整个窗口的大小）发生改变时触发该回调函数。当终端接收到任何数据（文本数据或其他可解释为数据的输入）时触发该回调函数。

Flexbox，作为CSS中的一种革新性布局模式，专为解决复杂页面布局难题而生。通过设定元素为Flex Container，其直接子元素即成Flex Items，遵循主轴和交叉轴规则排布。利用flex-direction控制Items的横向或纵向展示，flex-wrap实现自动换行，配合align-self和order调整单个项的对齐与排序。还有诸多如justify-content和align-items等高级技巧

本篇深度剖析了CSS中的position属性，这一常令面试者头疼的概念。文章首先介绍了文档流的基础知识，随后详细探讨了position属性的四种核心定位方式：static、relative、absolute及fixed。通过生动的实例，诸如联系客服的浮动按钮、侧边导航菜单及居中布局，清晰展示了每种定位的实际应用场景。

本文深入剖析了Vue中样式穿透的关键概念：:deep（或::v-deep）、/deep/及>>>。通过生动的比喻，阐述了这些命令如何帮助样式突破组件界限，直接影响子组件。:deep为首选方案，适应现代Vue开发，而/deep/与>>>虽功能类似，现被视为过时，但在理解旧项目时仍需知晓。本文旨在提升开发者对样式穿透的理解，促进更高效、灵活的前端开发实践。

本文将以“智能购物助手”案例为比喻，深入剖析React的三大关键技术点：虚拟DOM的高效性、状态与属性的灵活运用，以及函数式与类组件的设计哲学，带你领略React背后的精妙机制。

通过结合电影制作过程来理解的 React 的生命周期

本文深入剖析了WebGL中的动画与交互机制，通过JavaScript定时器实现连续动画效果，展现了3D模型动态响应的魅力。进一步介绍了粒子系统与物理模拟两大核心技术——粒子系统通过模拟众多独立移动单元，创造出逼真的自然现象；物理模拟则依据刚体、软体及流体动力学原理，提升场景的真实感。综合运用这些技术，开发者能够构建出生动、互动且高度沉浸式的WebGL体验，释放无限创意潜能。全文辅以实用代码示例，旨在启发读者探索WebGL创作的无尽边界。

本文深入介绍了WebGL中的高级光照技术，包括直觉式讲解光照模拟的重要性及其实施方法，展示了如何通过顶点与片段着色器调整光照效果。特别聚焦于环境光遮蔽（AO）与法线贴图两项关键技术，前者增强了场景深度，后者提升了表面质感，无需过多增加几何复杂度即可展现细腻凹凸细节。通过代码示例与直观的生活类比，文章详述了AO计算与法线贴图的集成流程，引导读者轻松掌握这些核心技巧，进而打造出兼具真实感与美学价值的3D视觉效果。

本文深入浅出地介绍了WebGL中的纹理映射技术，通过类比日常生活中的贴纸装饰，使读者直观理解其作用。文中详述了纹理映射的工作原理，包括纹理的加载、着色器的编写与纹理坐标的应用，并提供了关键的GLSL代码示例，旨在引导开发者掌握这一增强3D模型真实感的重要技能。

WebGL是HTML5技术之一，用于在浏览器中创建3D图形，无需插件。它通过GPU加速，利用坐标系定位、顶点与片段着色器上色，以及缓冲区存储数据。示例代码展示了设置视角、编写着色器和加载顶点数据的过程，是构建复杂3D场景的基础。掌握这些核心概念，可开启网页3D图形开发之旅。

探索TypeScript的高级特性，包括索引签名与索引类型、类型别名与递归类型，以及装饰器（函数装饰器、类装饰器、属性装饰器）。通过生动的生活例子和代码示例，本文深入浅出地讲解了这些复杂概念，帮助读者掌握TypeScript的进阶技巧，提升代码质量和项目维护性。无论是初学者还是有经验的开发者，都能从中受益，学习如何利用TypeScript的强大功能，构建更加健壮和可维护的软件系统。

本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。

在互联网时代，网站加载速度直接影响用户体验与网站排名。本文深入探讨了前端资源优化的策略，包括gzip压缩的原理与应用、图片的无损与有损压缩、字体格式的优化、以及代码拆分的高效加载技术。通过使用如compression-webpack-plugin、imagemin、ttf2woff2等工具，以及Vue项目中的动态导入，我们可以显著提升页面加载速度，为用户创造更流畅的浏览体验。前端资源优化，就像为网站瘦身，不仅提升了速度，也优化了搜索引擎的抓取效率，是现代网站设计不可或缺的一部分。

本篇教程深入介绍了 Web Components 的核心概念，包括 HTML Custom Elements、Shadow DOM 和 HTML Templates 的使用，以及如何利用这些技术构建模块化和可维护的 Web 应用。通过生动的类比和实用的代码示例，我们探讨了自定义组件的定义、样式封装和模板复用，展示了如何在实际项目中应用这些概念，以提升 Web 开发的效率和代码质量。希望本教程能够成为你掌握 Web Components 和构建现代 Web 应用的宝贵资源。

本篇教程旨在引导前端开发者从零开始掌握TypeScript的核心类型概念。通过生动的生活例子和实用的代码示例，我们深入探讨了类型声明、类型推断、接口、泛型、枚举类型、联合类型以及类型别名等关键概念。掌握这些概念将帮助开发者编写更健壮、可读性和可维护性更高的代码，同时利用TypeScript的静态类型系统避免常见的运行时错误，为构建复杂和大规模的前端应用打下坚实基础。希望本教程能成为你TypeScript学习之旅的坚实起点，鼓励你在实际项目中应用和探索更多高级特性。

探索前端开发的世界，本文提供了关于如何选择合适的前端框架和库的指导，包括React、Vue、Angular、Svelte以及Bootstrap和Tailwind CSS等流行工具。深入了解如何利用这些强大的资源提升开发效率，构建高效的响应式布局，并解决常见的浏览器兼容性问题。文章还讨论了前端性能优化的重要性，帮助你为项目选择最佳的技术组合。无论你是初学者还是经验丰富的开发者，这篇全面指南都将帮助你根据项目需求和技术栈偏好，做出明智的选择，充分利用前端生态系统的丰富资源。

本文深入探讨了Vue.js中处理组件更新的多种技巧，包括使用v-if和v-bind:key来动态控制组件渲染，利用计算属性和观察者来智能响应数据变化，以及在必要时通过重置数据或使用$forceUpdate来强制刷新组件。文章提供了丰富的代码示例，旨在帮助开发者更好地理解和应用这些技巧，从而提升应用的用户体验和性能。无论是Vue新手还是有经验的开发者，都能从中获得宝贵的知识和实战经验。

踏入Vue 3的精彩领域，本文详解了其革新特性，如defineProps、defineEmits等，它们犹如匠人的利器，助你雕琢出更为精致的组件之花。通过形象的比喻——园丁的剪刀、智能食谱、忠诚宠物等，我们揭开了reactive、ref等特性的神秘面纱，它们不仅强化了Vue的响应式系统，更优化了数据流的织造，让代码如诗般流畅。无论是编程新手或是资深开发者，皆能在此找到启迪。本文不仅是指南，更是思想的火花，激发你在Vue 3的世界中畅游无阻。加入我们，一同挖掘Vue 3的深邃力量，铸就前端艺术的辉煌之作。

除了预设的指令外，你还可以创造自己的个性化指令，就像是独一无二的魔法咒语。自定义指令让你能够扩展Vue的功能，实现特定的DOM操作或行为。想象一下，你需要给网页中的图片添加一个特效，当鼠标悬停在图片上时，图片会微微放大。这时候，你可以创建一个名为v-zoom的自定义指令来完成这项任务。// 注册一个全局自定义指令 `v-zoom`// 当被绑定的元素插入到 DOM 中时……// 放大1.1倍});// 恢复原大小});});

在Vue3的世界里，组件之间的通信就像是社区中的居民交流信息。有的信息只需要邻居间悄悄传递，有的则需要整个社区都知道。Vue3提供了多种方式来实现这种交流，让我们用生活中的例子来解释这些通信方式，并附上Vue3的简单代码示例。

综上所述，Yarn相对于NPM具有诸多优势，这些优势不仅体现在技术层面，更体现在用户体验和团队协作等多个方面。因此，我们有理由相信，Yarn将会引领JavaScript包管理的新潮流，成为未来开发的主流工具之一。

函数柯里化是一种将多参数函数转换成一系列使用一个参数的函数的技术。它的主要目的是将复杂的函数调用过程分解成多个简单的步骤，使得代码更加简洁、易读、易维护。通过本文的介绍，相信大家对 JavaScript 函数柯里化有了更深入的了解。函数柯里化不仅可以简化复杂的函数调用过程，还可以实现延迟执行、部分求值和组合多个函数等功能。希望本文能够帮助初级前端更好地理解和应用函数柯里化，提升编码能力。

通过理解闭包的工作原理，你可以创造出更加模块化和功能强大的代码，就像是在你的写作中加入了一种新的笔触，使得你的作品层次丰富，意味深长。不要仅仅依赖记忆中的概念，而是要去实践，去体验闭包的力量，并且形成你自己对它的理解。这样，无论何时何地，你都能够运用自如，写出既优雅又高效的代码。

你是否每次面试前都要临时抱佛脚，重温一遍跨域的知识？你看了那么多的跨域文章，为什么还要花时间反复的学习这个知识点？你真的是记性不好，学完就忘了吗？想象一下你住在一个小区里，你可以自由地在小区内走动，访问任何一个你想去的地方。但是，如果你想去对面小区找朋友借个充电器，通常会有小区的门禁挡住去路。这个小区的门禁就为了阻止了你直接进入另一个区域，它有效的保障了自己小区内的人员安全，为了防止小偷、抢劫犯、推销人员等等。但是它的缺点也不言而喻，限制了你走亲访友的自由。

总结起来，JavaScript的执行上下文就像是剧场的运营方式，它管理着每一个细节，确保每场戏都能有序地展开。通过掌握这个概念，我们可以写出更加精确和高效的代码，就像导演精心策划每一幕一样。