m0_63472757的博客

原创 web前端渡一大师课 03 歌词滚动效果

01:20.90]凭这两眼与百臂或千手不能防。[01:28.68]贪欢一刻偏教那女儿情长埋葬。[01:41.69]凭这两眼与百臂或千手不能防。[01:49.54]贪欢一刻偏教那女儿情长埋葬。[03:05.27]凭这两眼与百臂或千手不能防。[03:13.06]贪欢一刻偏教那女儿情长埋葬。[03:26.21]凭这两眼与百臂或千手不能防。[03:33.92]贪欢一刻偏教那女儿情长埋葬。[03:47.04]凭这两眼与百臂或千手不能防。[04:07.90]凭这两眼与百臂或千手不能防。

原创 web前端渡一大师课 CSS属性计算过程

<h1>这是一个h1标题</h1>

原创 web前端渡一大师课 01 事件循环

浏览器采用多进程多线程模型保障稳定性，其中渲染主线程负责执行HTML/CSS/JS代码。由于需要处理解析、渲染、交互等多种任务，主线程采用事件循环机制调度任务：通过消息队列实现异步处理，避免阻塞。当遇到计时器、网络请求等异步操作时，主线程将任务交由其他线程处理，完成后回调加入队列等待执行。JS的单线程特性决定了同步代码会阻碍渲染，如死循环会导致页面冻结。任务优先级方面，微队列（如Promise）优先级最高，其次是交互队列和延时队列。定时器因系统偏差和事件循环机制无法实现精确计时。理解事件循环机制是掌握JS异

原创 css 面试题

主轴方向由flex-direction控制(默认row,水平从左到右)交叉轴始终垂直于主轴,用于控制垂直对齐当你使用某些CSS属性(如transform,filtter,opacity等)时,浏览器会将这些元素提升到一个单独的合成层,这意味着这些元素的渲染不会影响其他部分的渲染,从而提高性能GPU加速: 合成层使用GPU来加速渲染,提高动画流畅性和页面交互速度合成与重排: 合成层可以减少重排和重绘;

原创 深入理解CSS中的BFC 与IFC , 布局的两大基础概念

本文介绍了CSS布局中的两个重要概念：BFC（块级格式化上下文）和IFC（行内格式化上下文）。BFC是独立布局环境，影响块级元素垂直排列，可解决浮动导致的高度塌陷和外边距合并问题，通过设置overflow、float、position等属性触发。IFC控制行内元素水平排列，处理文本对齐和换行行为，由display:inline或inline-block等触发。文章通过实例展示了BFC清除浮动、防止外边距合并，以及IFC实现行内元素对齐和图文混排的应用场景，比较了两者的区别，帮助开发者更好地控制页面布局。

原创 CSS外边距合并（塌陷）全解析：原理、场景与解决方案

CSS外边距合并的三大场景及解决方案：1.相邻元素、父子元素和空元素的外边距合并现象；2.5种主流解决方案：BFC隔离（推荐flow-root）、物理隔离（padding/border）、Flex/Grid布局、行内块和伪元素法；3.方案选择指南：现代项目首选flow-root，兼容需求用overflow:hidden，响应式布局推荐Flex/Grid。文章详细说明了每种方案的优缺点和适用场景，帮助开发者精准解决布局问题。

原创 uniapp 中使用路由导航守卫,进行登录鉴权

Uniapp登录路由守卫实现方案摘要 本文介绍了两种Uniapp登录状态路由守卫实现方案。方案一使用第三方插件(hh-router-guard或uni-simple-route)，方案二通过uni.addInterceptor实现。重点讲解了方案二的实现细节：1)配置白名单机制；2)权限校验逻辑；3)拦截器核心方法；4)初始化调用方式。该方案支持白名单动态更新，可检查token有效性，未登录用户自动跳转登录页并携带来源路径。在App.vue的onLaunch中调用initRouteGuard()即可启动全局

原创 前端开发工作流: ESLInt+ Prettier+VS Code终极指南

前端团队协作中，代码质量工具链（ESLint+Prettier+VSCode插件）能有效解决三大问题：代码一致性、潜在错误检测和协作效率。ESLint侧重代码质量检查和规范执行，Prettier专注代码风格统一，两者配合使用时需用eslint-plugin-prettier解决规则冲突。VSCode插件则提供实时反馈和自动格式化功能。此外，ESLint默认规则可扩展为Airbnb、Standard等开源规范，而settings.json文件控制着编辑器的格式化行为。实际开发中，建议同时配置项目级.prett

原创 Node.js 在前端开发中的作用与 npm 的核心理解

Node.js和npm已成为前端开发的核心工具。Node.js提供开发服务器（如Vite）、构建工具（Webpack）支持，并运行自动化任务。npm作为包管理器，负责依赖安装、脚本执行和模块发布。通过package.json管理依赖，package-lock.json锁定版本。优化建议包括使用镜像源加速、nvm管理Node版本。两者共同构建了现代前端工程化体系，显著提升开发效率。

原创 failed to load config from D:\Aweb\project\doorandwindow-background-newmaster\vite.config.tserror w

【摘要】在使用Vite时遇到visualizer调用错误，原因是导入方式不正确。错误提示表明visualizer未被识别为函数。解决方案是将导入方式从import visualizer from 'rollup-plugin-visualizer'改为命名导入import { visualizer } from 'rollup-plugin-visualizer'。这确保正确引用插件函数，解决配置问题。

原创 Vue3 项目启动报错 Error [ERR_REQUIRE_ESM]: require() of ES Module D:\Aweb\project\doorandwindow-background

项目加载vite.config.ts时出现ESM与CommonJS不兼容问题，原因是package-manager-detector作为ESM模块被CommonJS代码require()调用。解决方案是在package.json中添加"type":"module"字段，并确保脚本配置正确。这样明确指定项目使用ESM模块系统，可避免模块加载冲突。

原创 Web 前端性能优化全景指南与实战策略

*fn: 要被防抖的函数delay: 延迟时间(默认300毫秒)*///返回一个新函数,这个函数才是真正绑定事件用的函数//清除上一个定时器//延迟后执行//执行目标函数fn, this保持原来的调用上下文,args把刚才传入的新函数的参数传进去},delay);//用法console.log('🔍 正在搜索：', keyword);// 每次输入触发，都传入当前输入框的内容});

原创 CSS 定位：原理 + 场景 + 示例全解析

CSS中的position属性用于设置元素的定位方式,它决定了元素在页面中的"定位行为"

原创 Web前端为什么要打包？Webpack 和 Vite 如何助力现代开发？

功能强大,插件和Loader丰富,几乎支持所有资源类型转换适合大型项目,构建过程复杂但灵活生产环境自动开启代码压缩,拆分,缓存策略通过webpack.config.js配置规则打包是现代前端必不可少的流程,帮助我们解决模块化,性能和兼容性问题Webpack更强大灵活,配置复杂,适合大型项目Vite轻量便捷,极大提高开发效率,适合新项目快速上手了解打包原理,能帮你写出更高性能,更易维护的代码结合项目需求,合理配置压缩,拆分和缓存策略,确保用户体验。

原创 Git Commit 提交规范指南 - Web前端开发者必备

部分说明示例类型提交的类别（等）featfix作用域影响的范围（可选）(login)描述简明扼要的说明实现用户登录功能正文详细说明（可选）用列出关键改动脚注关联Issue或重大变更（可选）这样的提交信息:清晰可读,团队协作更搞笑便于检索, git log -- grep="feat(login)"可快速找到登录相关功能可自动化,方便生成CHANGELOG.md。

原创 理解 Vue 2 的响应式原理：数据劫持与依赖收集的背后

数据被修改,setter调用dep.notify( ),触发所有依赖watcher执行update( )watcher执行视图更新,组件自动刷新。

原创 JavaScript对象继承

/ 子类通过原型链继承父类为了解决原型包含引用值导致的继承问题,一种叫作"盗用构造函数"的技术在开发社区流行起来(这种技术有时也称作"对象伪装"或"经典继承"). 基本思路很简单: 在子类构造函数中调用父类的构造函数 , 因为毕竟函数就是特定上下文中执行代码的简单对象,所以可以使用apply( )和call( )方法以新创建的对象为上下文执行构造函数,来看下面的例子://父类//子类//继承SuperType。

原创 UniApp开发各种项目的区别详解(H5,App(5+app), ,Web2app,小程序)等

Uniapp 是一个使用Vue.js开发所有前端应用的框架,支持编译到App,H5,微信小程序,支付宝小程序等多个平台,虽然号称一套代码多端运行,但不同平台在实现机制,API支持,能力边界等方面仍有较大差异,本文将结合H5,App(5+App),Web2App,小程序等场景,深入分析UniApp开发各种项目时的区别于注意事项。

原创 创建对象

虽然Object构造函数或对象字面量可以方便地创建对象,但这些方式也有明显不足: 创建具有同样接口的多个对象需要重复编写很多代码。

原创 js对象原型,原型链

无论何时,只要创建一个函数,就会按照特定的规则为这个函数创建一个prototype属性(指向原型对象),默认情况下,所有原型对象自动获得一个名为construcor的属性,指回与之关联的构造函数,对前面的例子而言,Person.prototype.constructor指向Person 然后,因构造函数而异,可能会给原型对象添加其他属性和方法。

原创 深入理解 JavaScript 对象与属性控制

Object.defineProperties() 通过多个描述符一次性定义多个属性, 接受两个参数: 要为之添加或修改属性的对象和另一个描述符对象,其属性要与添加或修改的属性意义对应,比如:year_:{},editon:{value:1},year:{},})//2017//false//undefined 数据属性没有get.get//false//false。

原创 Vue 虚拟DOM和DIff算法

Vue通过虚拟DOM和Diff算法,极大地优化了性能,当数据发生变化时,Vue会生成新的虚拟DOM,通过DIff算法与旧的虚拟DOM树对比,最终只更新有变化的部分,从而减少了直接操作真实DOM的次数,提升了页面的响应速度,结合合理的性能优化策略,可以让Vue在大规模应用中也能保持高效的性能。

原创 从 HTTP/0.9 到 HTTP/3：Web 前端开发者必须了解的协议进化史

浏览器处于安全考虑,限制了网页向不同源发送请求简单说就是:一个网页只能请求自己域名下的资源,想去请求别人的,就要遵守规则比如你的网站是: https: //www.a.com你想用ajax请求:这就算跨域了!

原创 【前端基础】Cookie、sessionStorage 和 localStorage 详解及应用场景分析

Cookie是一种由服务器发送到浏览器的小型文本数据,也可以通过js创建,用于在客户端存储信息,并在后续请求中自动携带这些信息sessionStorage是H5提供的一种本地存储方式,用于在当前会话(标签页)期间存储数据,浏览器关闭或刷新后数据失效localStorage同样是H5引入的本地存储机制,数据存储后会长期保存在本地浏览器中,除非被手动清除。

原创 从 0 开始认识 WebSocket：前端实时通信的利器！

WebSocket是一种网络通信协议,专门用于"持久连接"和"实时通信".它允许浏览器和服务器之间建立一个持续不断的链接通道,双方可以随时主动发消息,而不像HTTP那样必须"你请求我才响应",在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输你可以把HTTP想象成一次性纸杯.而WebSocket更像一根水管,接上之后水(数据)可以随时流动。

原创 UDP 是什么？Web 前端开发也应该知道的底层网络协议

UDP是一种无连接,轻量,快速但不可靠的网络传输协议,它广泛用于实时性要求较高的场景,比如直播,语音,游戏德国。

原创 【前端也该懂】搞懂 TCP：让你的接口更稳、页面更快！

作为前端开发,大家每天都在HTTP,HTTPS,WebSocket打交道,但你有没有想过,这些协议背后的"搬运工"是谁?答案就是——TCP(Transmission Control Proptocol)如果你正在做性能优化,处理网络错误,搞WebSocket通信,了解TCP的底层机制能让你事半功倍。

原创 理解微信体系中的 AppID、OpenID 和 UnionID

AppID(应用ID)是微信平台分配给每一个应用的唯一身份标识OpenID是微信为用户在某个"AppID"下生成的唯一标识| 微信开放平台 ||（绑定多个 AppID 实例） || 同一用户的 UnionID || 小程序A | | 公众号B | | 网页登录C |AppID是应用的身份,OpenID是用户在某个应用下的身份,UnionID是同一用户在多个应用下的统一身份。

原创 前端工程化：构建高质量 Web 项目的现代方法论

定义: 将软件工程理念应用到前端开发中,实现高效开发,高质量交付,可维护性强的代码管理方式本质: 让前端开发流程标准化,流程自动化,模块化目标: 提高开发效率,降低沟通成本,控制项目质量,优化性能,用户体验。

原创 Web 前端打包工具与构建系统的进阶指南

新项目首选!尤其是Vue 3/React+TS项目对开发效率,调试体验要求高的团队对打包体积要求不极端苛刻的业务线(普通B端/C端应用)目标推荐工具快速开发 Web 应用✅ Vite打包 npm 组件库✅ Rollup需要构建流程高度自定义 / 多入口打包✅ Webpack老项目升级，逐步替换构建工具项目需要 SSR、微前端等架构目前 Webpack 更成熟，Vite 在追赶。

原创 一文搞懂前端模块化开发

LLFE: 没有模块系统,只是作用域封装CommonJS: 服务端为主,适合Node,但不适合浏览器AMD/CMD: 为了解决前端模块加载而生,但语法复杂,逐步被淘汰ESM: 浏览器原生支持+构建工具集成,正在成为模块化终极方案。

原创 Web 前端包管理工具深度解析：npm、yarn、pnpm 全面对比与实战建议

在现代web前端开发中,包管理工具的重要性不言而喻,无论是构建项目脚手架,安装ui库,管理依赖版本,还是实现monorepo项目结构,一个高效稳定的包管理工具都会大幅提升开发体验和协作效率作为一名前端工程师,深入了解这些工具背后的机制与差异,对于提升项目可维护性和团队协作能力至关重要。

原创 Monorepo 是什么？前端项目的多模块管理终极方案

包管理工具是用来管理项目依赖,发布包,安装依赖的工具,它们都提供了对工作区(workspace)的支持,允许在单个代码库中管理多个项目或包,这种工作区支持在单个代码库中同时开发,测试和管理读个相关的项目,而无需使用多个独立的代码仓库Monorepo将多个子项目统一到一个仓库,实现依赖一致,模块共享,构建加速工具选型: pnpm+Work 轻量高效;Turborepo构建优化;Lerna/Changesets自动发布实践要点:明确模块边界,配置增量构建,自动化CI/CD,合理版本策略。

原创 前端视角下的 CI/CD：写给 Web 前端开发者的全面指南

作为前端开发者,你可能会经历这些:这些问题说到底就是[流程不自动化],[发布不规范].于是,CI/CD就登场了!

原创 React JSX：用HTML语法写JavaScript的神奇魔法

JAX是React的核心组成部分,它通过将HTML结构与JavaScript逻辑结合在一起,使得开发者能够以一种简介,直观的方式构建用户界面,通过支持表达式,属性传递和事件处理等功能,JSX使得组件的开发变得灵活而强大,尽管在使用JSX时需要遵循一些语法规则,但其带来的可读性和开发效率提升是显而易见的,因此,深入理解和灵活应用JSX是掌握React开发的关键,无论是简单的网页应用还是复杂的企业级系统,JSX都为开发者提供了极大的便利。

原创 React 入门了解

原创 MVC与MVVM架构模式对比：前端开发的两种经典范式

在现代前端开发中,架构模式的选择直接影响着应用的维护性 ,可扩展性和开发效率. MVC(Model-View-Controller)和MVVM(Model-View-ViewModel)是两种广泛使用的架构模式,它们各有特点,适用于不同场景, 本文将深入探讨这两种模式的原理,区别以及实际应用。

原创 JavaScript 异步编程：从 Promise 到 async/await 的优雅之道

自定义Promise 手写(Promise)-CSDN博客Promise的编程模型依然充斥着大量的then方法,虽然解决了回调地狱的问题,但是在语义方面依然存在缺陷,代码中充斥着大量的then函数,这就是async/await 出现的原因使用async/await 可以实现用同步代码的风格来编写异步代码,这是因为async/await的基础技术使用了生成器和Promise,生成器是协程的实现,利用生成器能实现生成器函数的暂停和恢复。

原创 自定义Promise 手写(Promise)

手写Promise ,.promise的自定义封装

原创 JavaScript 深入解析：同步、异步、微任务、宏任务、消息队列与事件循环

4.定时器触发线程5.http异步线程6.EventLoop(事件循环)处理线程js是单线程的,也就是说,同一个时间只能做一件事在上面的例子中,所有代码都是同步执行的,longRunningTask会阻塞后续代码的执行,知道它完成,为了解决单线程带来的阻塞问题,js引入了异步编程模型。