Vue v-for 进阶指南：in 与 of 的区别及应用场景
在 开发中， 是我们用来遍历数组、对象或其他数据结构的核心指令。然而，很多开发者可能忽略了其中的一个细微差别： 和 。这两个关键字看似相似，但却有各自不同的使用场景和适用数据类型。理解它们的区别，可以帮助我们编写更简洁、高效的代码。 本文将详细探讨 中的 和 ，并讲解它们各自的适用场景，帮助你在 项目中做出最佳选择。 什么是 ？ 是 提供的用于遍历数据的指令，它可以帮助你快速渲染列表、表格等动态生成的内容。在使用 时，我们通常需要遍历一...
使用iframe内嵌网页的时候，如何做到内嵌网页的高度自适应
在页面无刷新更新方面，虽然现在的ajax很强悍，但是处理代码相对多点。想比之下，iframe就简单多了！处理iframe的自适应宽、高，会经常用到，网上整理了一份，写在这里备用： 单个iframe 高度自适应： 起作用的是这句： onload="this.height=iFrame1.document.body.scrollHeight" 多层嵌套iframe 高度自适应： A页面的iframe： B.PHP页面又有一个iframe：...
升级Vue2 到 Vue3
2023年年底，vue2 正式地寿终正寝，不再被官方支持。公司业务的后台还有小程序项目都是使用 vue2，早在很早之前就有升级到 vue3 的想法，在我加入团队之前就有其他成员进行尝试，却不了了之。在23年年底前这一规划又被提上日程，当时我便打算拿我们后台的项目开刀，进行这一大更新。 1、方案调研 作为一个拥有十几万行代码，几百上千个文件的项目，手动一个个去更新，去研究 vue2 语法和 vue3 语法的区别自然是不现实的。既然在当时，...
多种方案教你实现iframe嵌套页面相互传参(父子通信)
需求描述 在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？ 开始上手 上代码 父页面 iframe页面 父向子传值 方法一：通过URL传参 父页面添加代码 iframe页面添加代码 方法二：通过window.postMessage()方法 父页面添加代码 iframe页面添加代码 注意事项 postMessage方法有三...
无法复现生产BUG？rrweb录制用户行为助你排忧解难！
背景 对于一些比较重要的项目，我们可能需要对这些项目中的某些网页进行特殊处理，比如记录的用户行为，这样做是有好处的，通过分析用户的行为从而对项目的流程进行优化；采集用户遇到的 bug 的操作路径，尤其是当我们无法复现生产环境的 BUG 时，录制用户行为对开发人员有很大的帮助，那么该如何实现录制用户行为的功能呢？ 关于录制用户行为需要注意两点： 必须要做到用户无感知才行，如果让用户决定是否录制，那其实就无法记录用户行为了，一般来说用户是会...
7 种常见的前端攻击
大家都知道，保证网站的安全是十分重要的，一旦网站被攻陷，就有可能造成用户的经济损失，隐私泄露，网站功能被破坏，或者是传播恶意病毒等重大危害。所以下面我们就来讲讲7 种常见的前端攻击。 1\. 跨站脚本 (XSS) 跨站脚本攻击 (XSS) 是一种注入攻击，攻击者通过将恶意脚本注入到网页中，欺骗用户浏览器执行，从而窃取用户敏感信息或破坏网站。XSS 攻击是 Web 应用程序中最常见的安全威胁之一，也是造成重大安全事故的常见原因。 攻击方式...
JavaScript 连接蓝牙&传输数据！
需求背景 最近项目上接到一个新的需求： ！ 以下是关于这个需求的 ： 支持主流浏览器 ：如 Chrome、Firefox、Safari 等以及不同操作系统（如 Windows、macOS、Linux 等）。 蓝牙连接 ：用户能够通过浏览器自动搜索并连接到附近的蓝牙打印机。 文件打印 ：用户可以选择本地文件（如 PDF、Word、图片等格式）并通过蓝牙打印机进行打印。 用户界面 ：提供一个简洁明了的用户界面，方便用户选择打印机、上传文件和...
Next.js 项目写 Tailwind CSS 基本都会遇到的两个问题
前言 目前 Tailwind CSS 在 GitHub 有 80k Stars、Npm 周下载量 733W，已经成为前端主流的 CSS 框架。 而 Next.js 脚手架默认集成 Tailwind CSS，创建项目后便可直接使用 Tailwind CSS。 Tailwind CSS 看似使用简单，其实也有一些“门道”在其中。本篇我们就来聊聊 Next.js 项目写 Tailwind CSS 时会遇到的一些问题以及如何解决。 初始化项目...
Nextjs首屏加载速度性能从80分优化到98分
google控制台的网络network去看首次加载资源请求是否有重复加载的情况 google控制台的performance来录制首屏加载过程的文件时长以及阻塞情况,避免一些首次加载无须展示的组件的优化 \ 打包size优化,@next/bundle analyzer可视化的检查页面和打包的资源大小,然后针对性去优化 选择性能指标检测工具我用的 更好的了解真实用户的体验 以上是对性能可视化和测试的工具,方便针对性优化 首先对图片,css进...