鹏多多的博客

VS Code精选实用扩展，提升开发效率和乐趣。包括各种摸鱼神器，可视化工具，项目管理神器，编码统计神器等等........

本文介绍了如何在Vue项目中集成Swiper轮播库。针对Vue2和Vue3版本，分别推荐使用vue-awesome-swiper插件和Swiper7+原生支持。详细讲解了两种环境下的安装配置方法、基础用法实现，以及分页器、导航按钮等功能的设置。文章还提供了自定义样式的方案，帮助开发者快速实现美观的轮播效果。对于需要轮播功能的Vue项目，本文提供了全面的技术指导，从基础配置到高级定制一应俱全。

Element UI的Carousel轮播图组件常见高度适配问题及解决方案。文章分析了图片拉伸变形、空白过多、布局抖动和响应式失效等问题，提出基于动态计算的响应式方案。通过监听窗口变化实时计算高度，保证轮播图始终按16:9等比例显示，实现全端适配。该方案适用于以图片为主的轮播场景，能有效避免图片变形和布局抖动问题，保持统一的视觉体验。文中提供了完整的代码示例，包括HTML模板和JavaScript实现逻辑。

本文全面介绍了JavaScript中Console对象的多样化调试功能。基础部分涵盖debug/log/info等不同级别的信息打印；数据可视化展示了表格形式的数据呈现和分组日志管理；性能调试方面包括计时器、计数器和对象结构分析；错误处理环节讲解堆栈跟踪和断言机制；高级特性包含控制台样式自定义和图片打印技巧。这些方法为开发者提供了从基础调试到复杂性能优化的全套工具，显著提升开发效率。

本文介绍了渐进式网络应用(PWA)的核心特性及其配置方法。首先阐述了PWA的六大特点：渐进增强、响应式布局、离线访问、推送通知、安装性和链接分享。随后详细说明了配置过程

javascript中浏览器自带的实用方法

ESLint是一个可配置的JavaScript代码检查工具，主要用于发现和修复代码问题。其核心功能包括静态代码分析、自动修复和可配置规则，能帮助统一代码规范，提高可维护性。错误级别分为关闭(0)、警告(1)和错误(2)。常用规则涵盖逻辑错误预防、最佳实践、变量声明、CommonJS和代码风格等方面，如禁止console使用、强制===操作符、变量命名规范等。这些规则可通过配置文件灵活调整，适合团队协作和CI/CD集成，有效提升代码质量。

本文涵盖了 UI 组件库、js 处理工具库、css 引擎 / 动画库、界面交互 / 可视化库、音视频处理库、Canvas 和图像处理库、Word/PDF/Excel 文档处理库、富文本编辑器、vue 插件、React 插件以及其他相关前端资源的介绍。

前端多语言国际化是开发中不可或缺的一环。阿拉伯语、希伯来语等语言采用从右向左的书写方向，这意味着文本排版、元素布局等都需要进行相应调整。不仅要考虑文本的显示方向，还需对按钮、导航栏、表单等各类 UI 元素的布局进行重新规划，这给开发带来了独特的挑战（折磨）。本文将深入探讨前端开发中阿拉伯语种的适配技术，包括如何适配，全局和局部的修改，绝对定位的替换，兼容性以及替代方案等等。

在网页开发过程中，有时我们需要将本地的页面进行预览。但是本地webpack或者vite开发的项目运行的localhost页面，别人的外网无法直接通过浏览器访问，这时我们可以使用natapp进行内网穿透和预览本地页面。

History.replaceState()是一个非常实用的方法，它为 Web 开发者提供了更灵活的历史记录管理方式。通过无刷新更新 URL 和关联状态数据，能够极大地提升单页应用的用户体验

需要先申请百度账号，然后登陆百度地图开放平台，按照流程，申请成为开发者，然后创建应用

JavaScript 中的eval函数能够动态执行字符串代码，动态执行 JSON 字符串、低代码平台中的规则校验的全面解析。

本文详细介绍了如何在现代Web项目中实现纯前端的图片模糊与压缩功能。通过使用StackBlur库，结合Canvas的绘图能力，开发者可以在前端高效地完成图片处理。

在网页制作过程中，有时候我们只知道宽度，或者只知道高度，这时候需要制作一个4:3和9:16这种类似的盒子，不使用js而使用纯css如何实现呢

IntersectionObserver 是浏览器原生提供的一个Api。可以"观察"我们的元素是否可见，原理是判断目标元素与可见区域的交叉比例，所以也被称为"交叉观察器"。本文通过一个Demo代码，讲解如何使用IntersectionObserver，来实现根据目标元素可见度的交互效果。并附有兼容性，使用场景，完整代码实现，以及成熟的Hooks推荐。

for...in和for...of都是JavaScript中遍历数据的方法，让我们来了解一下他们的区别。

有时项目中处理数据的时候，会存在数据有误，或者为空...等等问题而报错，由于`javaScript`是单线程，代码是自上而下放到执行栈中执行，如果某一段报错了，后面的代码全都不会执行。为了避免这种情况发生

今天分享一下使用原生JS实现京东购物的放大镜功能，也就是鼠标移动到左侧商品小图，在右侧出现大图，并且实现局部放大。

1，冒泡排序冒泡排序又称为交换排序。原理是从第一个元素开始，比较相邻元素的大小，若大小顺序有误，则两数对调，再进行下一个元素的比较。如此经过第一次扫描后就可以确保最后一个元素位于正确的顺序。经过第二次扫描可以确保倒数第二个元素位于正确的顺序。由此可知，N个元素经过（N-1）次扫描，就可以完成所有元素的排序。// 冒泡排序function Bubble (arr) { let lengthA = arr.length -1; for(let k = 0;k < lengthA;k

目录1，前言2，代码+应用2.1，短路运算符 ||2.2，短路运算符 &&2.3，零合并操作符 ??2.4，可选链操作符 ?.2.5，位运算符 & 和 |2.6，双位运算符 ~~2.7，逻辑运算符 !1，前言博主收录了一些在实际开发过程中，很实用且方便的JS操作符，熟练掌握的话，不仅代码看上去高大上（实为装逼），而且简洁大方。2，代码+应用2.1，短路运算符 ||从左往右1，只要有一个条件为true时，结果就为true。2，当两个条件都为false时，结果才为fal

今早看了一篇文章《JavaScrip实现：如何写出漂亮的条件表达式》，抱着随便逛逛的心态看了一下，受益匪浅，于是记录一下，我认为对我有用的几点。

vue项目中用到了一些快捷键操作，虽然限制很多，但还是可以实现一些需求的，直接上代码。document.onkeydown = e => { if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === "b") { box.setAttribute("class", "blue"); // 阻止默认事件 e.preventDefault(); };

JS实用方法DataUrl转为File、url转base64。

Promise是异步编程的一种解决方案，比回调函数和事件更合理且更强大。可以理解为一个容器，里面保存着某个未来才会结束的事件的结果

循环，就是根据某个条件，重复执行一段代码

`bind`、`call`和`apply`在函数式编程时候非常有用，本文旨在记录一下我遇到过的一些用法和知识点，也记录一下在装饰器中的用法。

要求将图表分组，根据用户选择的组，来确定ECharts要显示那些线条和柱子，也就是动态的显示series系列。

记录一些很好用的css属性

定义在滚动容器中的一个临时点如何被严格的执行。听起来有点模糊，大致意思就是可以设置滚动容器中子元素的滚动动作

最近做的项目出现了界面卡顿的问题，经过一番排查，发现是因为有个数据做了一些格式化和生成转换，本来只有1000条数据，处理完之后变成了 N 万条数据（业务需求），导致页面渲染很慢，甚至会崩溃。

最近公司要做一个流程功能图，准备参考轻流BPM的流程样式，可惜本人目前技术有限，所以退而求其次，先做成visio这样的拖拽式流程设计。第一次接触jsplumb，文档都是在网上搜的，所以自己就整理一下，结合自己的一些应用，做了一个demo，留待以后有需要

本文主要分享一个项目的规范约束从0到1的流程，从通过vue-cli创建项目，到团队协作插件安装（husky、eslint、commitlint、prettier等）

最近在做IOT的项目，里面有个小程序要用到webSocket，借这个机会，封装了一个uniapp小程序适用的Socket类

Cookie是一些数据, 存储于你电脑上的文本文件中。当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。

发现了一个很好用的全屏API，是HTML5自带的方法，记录一下

nodejs管理工具-nvm的安装和使用，以及排错

最近有一个需求，在web页面上有一个按钮，点击按钮，调起本地的.exe程序客户端，我在网上找了很多，感觉都不完整，所以自己总结写一下。效果图主要实现方式是添加注册表；新建一个qq.txt文本文档（ps:文件名字自定义），把下面这段代码复制进去，根据下面的注意事项图片修改一下，保存后修改为.reg后缀，双击确认运行。原代码Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\qq]@="腾讯QQ""URL Protocol"=""

主要原理是利用css变量设置颜色，用js动态修改变量，使颜色变化，兼容性如下；实现效果实现换肤之前先要了解一下伪类选择器 :root ，还有css的 var() 函数和 setProperty() 函数:root 是一个伪类，表示文档根元素，非IE及IE8及以上浏览器都支持，在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在的文件，都可以使用css var() 函数来引用；语法// 自定义属性的名称，必需以 -- 开头:root{ --main_bg