H5 实现拍照选景框效果利用
背景 在实际项目中，遇到了需要唤起手机摄像头拍照的需求，最开始是通过 的方式，可以直接唤起手机相机，但是用户拍照的方向各式各样，导致后续业务处理时，没有达到预期的效果。 基于此，产品同学期望能在用户拍照时给用户一个引导框（也就是平时我们在用第三方证件拍照时的取景框效果）。经过讨论，给出了两种解决方案，一种是通过我们自研，先尝试看一下效果，第二种是使用第三方的 SDK，仅使用他们的拍照功能。 本文档仅涉及第一种，即通过我们自研的方式，实现...
封装一个H5照相机组件（放大缩小、连拍、预览、手电筒，横竖屏拍摄）
项目上有个需求就是说移动端网页中的照相机要支持连拍功能。 要知道咱们一般网页中通过input标签调用出来的照相机都是拍完后需要进行点击确认操作，然后再重新点击拍照按钮调起照相机如此往复，这样的交互方式对于需要快速拍摄照片的场景来说效率确实太低了。 如果本机摄像头无法进行连拍操作的话只能通过直接调用媒体摄像头的方式看看能否实现，考虑到开源的组件UI和交互方式可能无法满足项目需要且也不太好扩展功能所以觉得自己封装一个。 使用到的技术 Nav...
浏览器和nodejs事件循环（Event Loop）有什么区别
单线程和异步 JS是单线程的，无论在浏览器还是在nodejs 浏览器中JS执行和DOM渲染共用一个线程，是互斥的 异步是单线程的解决方案 1\. 浏览器中的事件循环 异步里面分宏任务和微任务 宏任务：setTimeout，setInterval，setImmediate，I/O，UI渲染，网络请求 微任务：Promise，process.nextTick，MutationObserver、async/await 宏任务和微任务的区别：微...
“同学，谈谈你对vue3 响应式原理的理解”
深入解析 Vue 3 的响应式原理涉及其核心实现细节和底层机制，主要包括 的使用、依赖收集与触发、以及性能优化策略。 1\. 响应式系统概述 Vue 3 的响应式系统基于 对象来实现数据的自动追踪和更新。 的主要作用是拦截对对象属性的操作（如读取、写入等），并允许开发者定义自定义行为。 2\. 响应式对象的创建 2.1 的使用 构造函数接收两个参数： 目标对象 ：即需要被代理的原始对象。 处理器对象 ：定义了一系列拦截操作的方法（如 、...
H5移动端-解决点击输入框时页面自动放大的问题
问题 在移动端项目，我们常遇到的一个问题：用户点击输入框时，页面会不期望地发生自动缩放，这既打断了用户的输入流程，也影响了整体的用户体验。 我们的目标是优化这一行为，确保用户在点击输入框时，页面能够保持稳定，仅允许用户专注于内容的输入，从而提升产品的可用性和满意度。 解决前后效果对比 方案 针对移动端点击输入框导致页面自动缩放的问题，我们需要根据不同操作系统（主要是安卓与iOS）采取差异化的解决方案。 安卓：通常可以通过在HTML文档头...
JavaScript 内存泄漏：识别与防范
导读 内存泄漏是指程序在不再需要某些对象时，未能释放这些对象所占用的内存，导致内存占用持续增加，最终可能导致系统性能下降甚至崩溃。 在 JavaScript 中，由于其垃圾回收机制（Garbage Collection），内存管理通常由运行时环境自动处理。然而，内存泄漏仍然可能发生，特别是在长时间运行的应用程序中。本文将介绍JavaScript内存泄漏的常见原因及其预防方法。 常见的内存泄漏类型 以下是 JavaScript 中一些常见...
Web浏览器中的JavaScript事件循环机制
JavaScript是一门单线程语言，但通过事件循环（Event Loop）机制，它能够处理异步操作，实现非阻塞的I/O模型。让我们深入了解Web浏览器中的事件循环机制。 事件循环的基本概念 事件循环主要由以下几个部分组成： 1. 调用栈（Call Stack）：用于存储正在执行的函数调用。 2. 堆（Heap）：用于存储对象。 3. 任务队列（Task Queue）： 宏任务队列（Macrotask Queue） 微任务队列（Micr...
为什么vite能够让浏览器识别.vue后缀文件
本文将从 的源码带着大家一起分析我们在使用vite开发Vue项目的时候vite所处理的一些流程，本文不会讲解API的使用，因为本文的难度偏难，如果仅仅是想学习如何配置vite，本文可能不太适合您。 在阅读本文之前，请确保你对vite的基本原理有一定的了解（不一定是了解源码，但是至少要对vite的整体运行过程有一个较为清楚的认识）。众所周知，在 的的生态中，我们通过Vue提供的Loader，分别对Vue单文件组件的template、scr...
从JavaScript执行原理到作用域与闭包
闭包 是JavaScript中非常重要的一个概念，MDN中提到闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以 从内部函数访问外部函数的作用域 。在 JavaScript 中，闭包会随着函数的创建而被同时创建。看起来非常晦涩难懂，不易理解。今天写下这篇文章就是想从原理上深入探索，彻底弄明白什么是闭包。 JavaScript执行三阶段与变量...