踩过的坑
文章平均质量分 66
帅比九日
前端小马喽
展开
-
【微信小程序】微信小程序设置本地背景图片在真机无法显示的解决方案
使用网络图片:将图片上传到服务器,然后在 CSS 中引用网络地址。使用 Base64 编码:将图片转换为 Base64 编码,然后在 CSS 中引用。使用标签代替:在 WXML 文件中使用标签来显示图片。原创 2024-07-22 18:22:47 · 491 阅读 · 0 评论 -
【ECharts】使用 ECharts 处理不同时间节点的数据系列展示
假设我们有多个测站(stations),每个测站有多个目标(targets),每个目标在不同的时间点采集数据。为了将这些数据在同一个图表中展示,我们需要对时间点进行统一处理,使得每个时间点都有相应的数据值。以下代码演示了如何将不同时间节点的数据系列重新采样到统一的时间轴上,并生成新的数据结构,以便在 ECharts 中展示。遍历所有的测站和目标,收集所有的生产时间点,找到最小时间点和最大时间点,并生成包含所有时间点的数组。遍历每个测站和目标,将旧时间点和数据映射到新的时间点数组上。对象,以便进行时间计算。原创 2024-07-17 17:18:03 · 430 阅读 · 0 评论 -
【前端】有时候你可能需要SSE而不是WebSocket
轮询:实现简单、兼容性好,但效率低。适用于不需要实时更新的场景。SSE:实现简单、单向通信、低延迟,但不支持 IE 浏览器。适用于需要实时更新的单向数据推送。WebSocket:双向通信、低延迟、高效率,但实现复杂,对较旧的浏览器支持不佳。适用于需要实时双向通信的复杂应用。原创 2024-07-11 11:25:54 · 883 阅读 · 0 评论 -
【uniapp微信小程序】uniapp微信小程序——页面通信
在 uniapp 应用中创建一个专门用于管理页面之间事件通信的事件总线。这种方式在逻辑复杂、需要频繁通信的情况下非常实用。// 页面A 发送事件// 页面B 监听事件// 输出 some data});原创 2024-07-10 15:35:23 · 707 阅读 · 0 评论 -
【前端】包管理器:npm、Yarn 和 pnpm 的全面比较
npm 是 Node.js 的默认包管理器,由 Node.js 官方维护。自 2010 年发布以来,npm 已成为 JavaScript 生态系统的核心工具,用于安装、共享和管理 JavaScript 项目的依赖包。Yarn 是由 Facebook 开发的包管理器,于 2016 年发布,旨在解决 npm 在大规模项目中的性能和一致性问题。Yarn 是对 npm 的一种改进和替代,提供了更快、更可靠的包管理体验。pnpm 是一种高效的包管理器,于 2016 年由 Zoltan Kochan 开发。原创 2024-07-10 15:05:08 · 899 阅读 · 0 评论 -
【VUE】 深入理解 Vue 动态路由:简介、实际开发场景与代码示例
在传统的路由配置中,我们需要在初始化 Vue 实例时定义所有的路由。但在实际应用中,特别是涉及权限管理、模块懒加载等场景,我们可能需要根据用户的权限或其它条件动态添加或修改路由。Vue Router 提供的动态路由功能正是为了解决这些问题。原创 2024-07-04 17:04:23 · 521 阅读 · 0 评论 -
【前端】IntersectionObserver 实现图片懒加载和无限滚动
API 是现代浏览器提供的一种异步观察者,它可以监视一个元素与视口(或某个特定祖先元素)交叉状态的变化。图片懒加载无限滚动加载内容实现元素的延迟加载触发动画效果在 Vue 中,我们可以通过自定义指令来实现懒加载。});});} else {// 如果浏览器不支持 IntersectionObserver,需要提供一个降级方案});原创 2024-07-04 16:57:55 · 1269 阅读 · 0 评论 -
【VUE】你是不是老想直接修改props?
在 Vue.js 中,Props 是父组件向子组件传递数据的关键机制。尽管 Vue 强烈建议 Props 是单向数据流的一部分,即从父组件流向子组件,但在实际开发中,有时我们会面临一些需要直接修改传递对象属性的场景。本文将探讨在 Vue 中管理 Props 的最佳实践,并提供一些在实际项目中保持代码清晰和维护性的方法。始终尽量遵循 Vue 的最佳实践,确保代码的可读性和可维护性。在项目初期设定好代码规范,团队成员都遵循一致的模式。虽然这种方法方便,但会破坏数据流的单向性,增加调试复杂度。原创 2024-07-01 17:42:55 · 466 阅读 · 0 评论 -
【前端】Web操作文件的可能性——浅谈一下File System Api
文件系统API(File System API)为开发者提供了一组标准和接口,使得Web应用程序可以像本地应用程序一样读取和写入文件。File API 是文件系统API的基础,允许用户通过文件输入元素或拖放操作选择本地文件。FileReader API 提供了异步读取文件内容的功能,可以将文件读取为文本、Data URL、ArrayBuffer等格式。然而,目前这一功能在标准化进程中,还没有得到广泛支持。File System Access API 是一组较新的API,提供了更强大的文件和目录读写能力。原创 2024-06-28 10:58:41 · 721 阅读 · 0 评论 -
【前端】前端文件下载方式盘点
以上几种方式各有优缺点,具体选择哪种方式应根据实际需求来决定。如果是简单的静态文件下载,使用标签是最简便的方式;如果需要动态生成文件内容,Blob 对象或 FileSaver.js 是不错的选择;而对于需要从服务器获取数据并下载的场景,Fetch API 和 Axios 则提供了更强大的功能和灵活性。原创 2024-06-28 10:00:12 · 304 阅读 · 0 评论 -
【CSS】深入探讨 CSS 的 `calc()` 函数
calc是一个 CSS 函数,用于在样式表中进行数学计算,从而动态地设置 CSS 属性值。它允许开发者在指定长度、百分比、数值等时,进行加减乘除运算。过多的动态计算可能会使样式变得难以理解和调试。特别是在涉及布局的大量计算时,可能会对渲染性能产生影响。:虽然 CSS 的解析和计算速度非常快,但在复杂页面中频繁使用。,但在某些老旧浏览器中,可能会遇到兼容性问题。函数,我们可以实现更灵活和响应式的设计。前,建议检查目标用户的浏览器支持情况。时保持简洁明了,避免过度复杂的计算。的用法、易错点和一些常见争议点。原创 2024-06-25 17:44:25 · 456 阅读 · 0 评论 -
【前端】前端项目埋点:数据驱动决策的基础
埋点是指在代码中预埋特定的事件触发点,通过这些触发点记录用户在应用中的行为数据。常见的埋点包括页面访问、按钮点击、表单提交等。通过分析这些数据,开发者和产品经理可以了解用户行为,评估功能效果,从而做出数据驱动的优化决策。原创 2024-06-21 18:06:56 · 410 阅读 · 0 评论 -
【前端】前端权限管理的实现方式:基于Vue项目的详细指南
在Web开发中,前端权限管理是一个确保应用安全性和优化用户体验的关键部分。本文将详细介绍前端权限管理的几种实现方式,并通过Vue项目中的代码示例来演示具体实现方法。原创 2024-06-21 18:04:57 · 923 阅读 · 0 评论 -
【浏览器插件】理解浏览器扩展开发:为什么 `content script` 里的 `window` 与页面的 `window` 不同以及解决方案
浏览器扩展开发为开发者提供了强大的工具,使得我们可以扩展和增强网页的功能。然而,在开发过程中,尤其是当涉及到与网页内容进行交互时,我们可能会发现 里的 对象与页面的 对象有所不同。这篇博客将探讨这个现象的原因,并介绍一种解决方案来弥合这个区别。浏览器扩展设计的一个关键原则是隔离性,这有助于提高安全性和稳定性。浏览器在多个级别上将扩展代码与网页代码隔离开来:不同的上下文: 运行在一个特殊的环境中,这个环境与网页的主 JavaScript 环境是分离的。虽然 可以访问网页的 DOM,但它与网页的 Jav原创 2024-06-07 14:31:02 · 362 阅读 · 0 评论 -
【前端】使用 Canvas 实现贪吃蛇小游戏
通过这篇博客,你学习了如何使用 HTML5 Canvas 和 JavaScript 来实现一个简单的贪吃蛇小游戏。我们展示了如何绘制游戏元素,处理用户输入,并管理游戏状态。希望这个项目能帮助你对游戏开发有更深入的理解,并激发你进行更多有趣的项目开发!原创 2024-05-23 18:13:33 · 946 阅读 · 0 评论 -
【前端】你真的会用 `console`吗???
对象还提供了许多其他有用的日志方法,这些方法能让我们的调试工作更高效、更有条理。当条件为假时,输出错误信息。它用于输出一般的调试信息和变量值,适用范围非常广泛。创建一个可以分组显示的日志组,使得相关的日志信息在逻辑上组织得更清晰。输出调用栈信息,用于跟踪代码的执行路径,特别适用于复杂调用链的调试。用于代码计时,提供性能分析工具,帮助我们测量代码段的执行时间。类似,但显示的优先级更低,一般用于更详细的调试信息。用于清空控制台的输出内容,让下一轮的调试信息更整洁。类似,但开始时日志组是折叠的,需要手动展开。原创 2024-05-23 11:40:33 · 425 阅读 · 0 评论 -
【前端】面试八股文——BFC
BFC是CSS的一种布局机制,它决定了内部和外部的元素如何定位以及它们的关系和交互。理解BFC的运作原理,可以帮助我们更好地解决各种布局问题。掌握BFC不仅是为了通过面试,更是为了在实际开发中高效地解决布局问题。理解其形成条件、特性以及应用场景,对于任何一个前端开发人员来说都是至关重要的。希望这篇文章能帮助你在面试中应对有关BFC的问题,从而在激烈的竞争中脱颖而出。希望这篇博客文章能帮助你更好地理解并应对前端开发面试中的BFC问题。如果你有更多的问题,欢迎随时询问。原创 2024-05-21 15:28:05 · 551 阅读 · 0 评论 -
【前端】从手动部署到自动部署:前端项目进化之路
持续集成是一种软件开发实践,开发者常常、多次地将代码集成到共享代码库中。每次集成后,都会自动进行构建和测试,以尽早发现错误,提高软件质量和开发效率。从手动部署到自动部署的过渡,不仅是技术的提升,更是效率和稳定性的保障。通过CI/CD工具,前端团队可以极大地降低部署风险、提高响应速度,真正实现敏捷开发与快速迭代。希望通过本文的介绍,你能够顺利将你的前端项目从手动部署迁移到自动部署,迎接更加高效、稳定的开发体验。原创 2024-05-21 14:59:51 · 1178 阅读 · 0 评论 -
【前端】你的样式为啥老不生效
在Web开发中,确保样式生效是一个多方面的考量过程。理解样式作用域、优先级以及如何穿透局部样式限制,是解决样式无法生效问题的关键。一名优秀的前端开发者应当熟练掌握这些技巧,以应对复杂的样式需求和冲突。原创 2024-05-17 18:01:16 · 585 阅读 · 0 评论 -
【前端】页面瞬间请求一百次,你怎么玩?
使用 Promise.all 和限制并发数量:适合简单的并发控制场景。使用第三方库 p-limit:适合希望使用社区维护的解决方案。队列方式控制并发数:适合需要精细化任务调度的场景。使用迭代器生成器:适合复杂流程控制的场景。希望这篇文章对你在前端并发数控制方面有所帮助。原创 2024-05-17 17:57:50 · 878 阅读 · 0 评论 -
【前端】深入浅出响应式布局
通过理解响应式布局的基本思想和关键技术,开发者可以创建灵活、适应性强的网站。在实际应用中,可以根据具体需求选择合适的布局方法和技术,例如使用流式布局、Flexbox、Grid以及媒体查询等。为了提高开发效率,选用合适的框架如Bootstrap也是一个不错的选择。掌握这些技术,即使是复杂的网页布局,也能简单、高效地实现响应式设计。希望这篇文章对你有所帮助,如果有任何问题或建议,欢迎留言讨论!通过以上介绍,你已经掌握了响应式布局的核心概念和实现方法。现在就开始动手实践,有问题随时欢迎讨论!原创 2024-05-17 17:39:44 · 968 阅读 · 0 评论 -
【前端】 你知道多少前端架构?
在现代前端开发中,不同的前端架构适用于不同的应用场景。通过选择合适的前端架构,我们可以提高应用程序的性能、可维护性和用户体验。本文将详细介绍几种常见的前端架构,并提供一些代码示例来帮助你理解如何使用这些架构来构建前端应用。SPA 是一种只需要加载一个 HTML 页面的应用程序,页面的内容通过 JavaScript 动态更新而无需重新加载整个页面。MPA 是另一种常见的架构,每个页面是一个独立的 HTML 文件。通过这种方式,可以将前端应用拆分成多个独立的小部分,并在最终的应用中组合这些部分。原创 2024-05-17 17:32:29 · 620 阅读 · 0 评论 -
【前端】开发五子棋小游戏全流程
通过这篇博客,我们介绍了如何使用HTML、CSS和JavaScript开发一个简单的五子棋小游戏,重点介绍了棋盘初始化和点击事件处理,以及胜负判定的逻辑实现。希望这篇文章能帮助你更好地理解前端开发和算法的基础知识。享受编程的乐趣吧!原创 2024-05-16 11:07:07 · 717 阅读 · 0 评论 -
【前端】一分钟带你了解原子化架构
原子化架构通过将 UI 设计从最小的原子单元逐步构建为完整的页面,不仅提升了代码的复用性和可维护性,也使得开发过程更加有序、高效。对于大型前端项目和需要统一设计语言的系统来说,原子化架构是一个非常理想的解决方案。希望通过这篇文章,你能深入理解原子化架构的原理、设计思路以及实际应用,并在你的项目中成功实践。原创 2024-05-16 10:17:20 · 1484 阅读 · 0 评论 -
【JS】JS的各种循环方式你真的会用吗?
在不同的场景中选择合适的循环方式能显著提升代码的可读性和性能。掌握每种循环的实现方式、优缺点和使用场景,能帮助我们编写更高效、简洁的代码。希望通过这篇文章,各位能全面了解JavaScript中各种循环方式,真正掌握它们的使用技巧!原创 2024-05-15 17:25:16 · 404 阅读 · 0 评论 -
【JS】基于原生JavaScript的大文件切片上传及断点续传实现
通过以上步骤,我们实现了一个基本的文件切片上传及断点续传功能。前端通过JavaScript将文件分成多个片段逐一上传,并记录上传进度;后端使用Node.js接收片段并在上传完成后将其合并成一个完整文件。这个实现方案可以根据实际需求进行优化和调整,例如增加并行上传、错误重试机制、进度通知等功能。本篇博客旨在为您提供一个实现思路以及基础代码,希望对您有所帮助!如果您有任何疑问或建议,欢迎留言讨论。原创 2024-05-15 17:16:35 · 1137 阅读 · 0 评论 -
【前端】打砖块游戏:实现细节介绍
在本文中,我将详细介绍如何使用HTML、CSS和JavaScript技术构建一个简单的打砖块游戏。我们将重点讨论游戏的三个核心技术方面:碰撞检测、画图和事件监听。github可以直接拉取代码测试。通过上述的实现细节,我们展示了如何使用前端技术创建一个基本的打砖块游戏。通过简单的HTML结构、CSS样式以及JavaScript中的绘图、碰撞检测和事件监听技术,开发者可以构建出具有基本互动性的网页游戏。希望这个示例能为你在前端游戏开发领域的学习和探索提供帮助和启发。原创 2024-05-14 18:42:17 · 813 阅读 · 0 评论 -
【Vue】Vue 中的数据传递策略:探索跨组件通信的多样化方法
在现代的前端开发过程中,Vue.js 以其灵活和易于理解的结构脱颖而出,成为了广受欢迎的 JavaScript 框架之一。在构建动态应用时,组件之间的数据传递是必不可少的,但随着应用规模的扩大,这一需求可能会变得复杂。本篇博客旨在深入探讨 Vue 中多种跨组件传递数据的方法,包括它们的运作机制、适用场景与具体的实现代码。我们将比较这些方法的优缺点,并指出它们在不同应用场景下的最佳实践,以帮助开发者根据自身项目的具体需求,选择最合适的数据通信策略。原创 2024-05-14 14:49:00 · 845 阅读 · 0 评论 -
【教程向】从零开始创建浏览器插件(六)实战篇
至此我们已经完成了全部功能,在浏览器中加载该文件夹即可在页面中测试功能。本文通过一个实际的例子展示了如何在浏览器扩展中使用IndexedDB进行数据的存储与管理。通过封装操作逻辑,我们可以更加方便地在扩展中进行数据处理,从而增强扩展的功能和用户体验。希望这篇文章能帮助你理解并实践IndexedDB在浏览器。原创 2024-05-13 19:32:11 · 1396 阅读 · 0 评论 -
【斑马打印机】web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印
在现代物流、仓储和零售行业中,RFID和二维码技术发挥着至关重要的作用。这些技术不仅提高了效率,还增强了追踪和管理的能力。本文将介绍如何使用JavaScript和斑马打印机的BrowserPrint API来打印RFID二维码贴纸。BrowserPrint是斑马技术公司提供的一个JavaScript库,它允许网页应用直接与连接到客户端计算机上的斑马打印机进行交互。这意味着开发者可以在不需要安装额外软件的情况下,直接从网页应用中发送打印任务到斑马打印机。原创 2024-05-13 17:44:20 · 1546 阅读 · 0 评论 -
【教程向】从零开始创建浏览器插件(五)调试篇
在开发Chrome扩展时,不同类型的脚本和页面涉及不同的调试方法。这包括背景页(Background Page)、弹出页面(Popup Page)和内容脚本(Content Scripts)。每个组件的调试方法有一定的差异,了解这些差异可以帮助开发者更有效地诊断问题和调优性能。原创 2024-05-11 10:44:19 · 415 阅读 · 0 评论 -
【echarts】解决ECharts鼠标悬停(mouseover)事件触发范围问题
对于更加复杂的需求,例如在不增大实际图形大小的前提下增加触发区域,可以通过在ECharts中添加透明的辅助图形(如透明的柱状图或圆形)来扩大mouseover触发范围。option = {series: [type: 'line', // 实际显示的线图...},type: 'scatter', // 用于扩大触发区域的散点图opacity: 0 // 透明显示如果标准的图表配置不足以满足需求,可以通过编写自定义的事件监听逻辑来进一步优化用户体验。通过监听mousemove。原创 2024-05-11 10:29:34 · 1641 阅读 · 0 评论 -
【教程向】从零开始创建浏览器插件(四)探索Chrome扩展的更多常用API
在Chrome扩展开发中,除了最基础的API外,Chrome还提供了一系列强大的API,允许开发者与浏览器的各种功能进行交互。本文将介绍其中几个常用的API,并提供详细的示例代码帮助您开始利用这些API。原创 2024-05-10 10:38:11 · 1210 阅读 · 0 评论 -
【教程向】从零开始创建浏览器插件(三)解决 Chrome 扩展中弹出页面、背景脚本、内容脚本之间通信的问题
数据共享难题:它们各自拥有不同的执行环境,无法直接访问彼此的 JavaScript 变量或对象。事件监听问题:弹出页面关闭后,其事件监听器会被卸载,无法保持持久监听状态。权限隔离:内容脚本与弹出页面的权限各自独立,内容脚本无法直接访问弹出页面的 DOM 元素,反之亦然。由于 Chrome 扩展的不同脚本运行环境是相互独立的,所以开发者在设计扩展时需要使用不同的通信机制来确保数据共享和功能协同。消息传递数据持久化标签控制与代码注入。原创 2024-05-10 10:23:36 · 682 阅读 · 1 评论 -
【摸鱼】如何在任何页面摸鱼看小说?
老有朋友表示自己上班摸鱼的时候不太方便,这两天摸鱼的时间写了一个小插件来解决这个问题。在高强度的工作日或学习日中,许多人都会感到疲倦,偶尔想要摸鱼放松一下。读小说是很多人的选择之一,但在公司或者图书馆打开小说网站往往不太合适。如果你正面临这种困境,我今天要介绍的这款浏览器插件《摸鱼王》就是你的救星!这个插件我已经提交给浏览器拓展商城审核,不过还需要一段时间才能在商城里面找到,目前可以通过gitHub获取。原创 2024-05-09 16:21:48 · 2650 阅读 · 0 评论 -
【教程向】从零开始创建浏览器插件(二)深入理解 Chrome 扩展的 manifest.json 配置文件
在本篇博客中,我们将更详细地探讨 Chrome 扩展中的文件。这个文件是每个浏览器扩展不可或缺的核心,它不仅定义了扩展的基本元数据,而且还规定了扩展的行为和权限。我们将深入探讨各种常用配置,并提供具体的代码示例以帮助您更好地理解和运用这些配置。原创 2024-05-09 14:33:34 · 963 阅读 · 0 评论 -
【教程向】从零开始创建浏览器插件(一)
在这篇博客中,我们将学习如何创建一个简单的浏览器插件。对于本教程,我们将以创建一个在浏览器中运行的基本插件为例,该插件能够通过点击插件图标来改变当前网页背景色。我们将使用Chrome扩展程序作为实践平台,因为它具有良好的文档支持,并且创建过程比较简单,但所学知识同样适用于其他浏览器的插件开发。原创 2024-05-09 14:23:17 · 749 阅读 · 0 评论 -
【JS】call和 apply函数的详解
call()和apply()方法在功能上相似,主要区别在于参数的传递方式。选择合适的方法可以使代码更加清晰和高效。理解这两个方法的区别及其适用场景,对于深入掌握JavaScript而言非常重要。原创 2024-05-07 14:50:37 · 369 阅读 · 0 评论 -
【前端】前端数据本地化的多种实现方式及其优劣对比
数据本地化是提升Web应用性能的重要手段之一。如果需要存储的数据量小,同时兼容性要求高,可以选择Cookie。对于一般的本地数据存储需求,LocalStorage和sessionStorage是简单实用的选择。而对于需要大量数据存储和复杂查询的场景,IndexedDB提供了更强大、灵活的数据存储方式。理解每种技术的优劣,根据实际需求选取最适合的方案,是开发高效、优质Web应用的关键。原创 2024-05-07 14:36:29 · 553 阅读 · 0 评论 -
【前端】输入时字符跳动动画实现
实现这一效果的核心思路是利用CSS的关键帧动画(Keyframes Animation)来定义字符的跳动动画,并通过JavaScript来动态地将动画应用到用户每次输入的新字符上。同时,为了保持输入框内容和展示的内容同步,我们还需要对输入框的值进行监听,并相应地更新显示区域的内容。通过以上的技术方案,我们实现了一个在用户输入字符时,字符跳动的动画效果。这种方法不仅增强了用户体验,使界面交互看起来更加动态和有趣,而且也体现了CSS动画和JavaScript相结合的强大功能。原创 2024-05-06 18:50:36 · 630 阅读 · 0 评论