西洼工作室的博客

本文介绍了一个浏览器事件循环、内存管理与渲染的模拟界面设计和实现。页面采用响应式布局，使用CSS Grid和Flexbox构建双面板结构，包含代码编辑器和内存/队列可视化区域。界面采用渐变背景、毛玻璃效果面板和卡片式设计，通过动画效果增强交互体验。功能上实现了代码编辑、执行控制、内存堆栈可视化等功能模块，使用不同颜色区分活跃状态，并支持执行速度调节。整体设计融合了实用性和视觉美感，为理解浏览器底层机制提供了直观的可视化工具。

前端混入(Mixin)是一种代码复用模式，可将功能注入对象或类而无需继承。JavaScript中可通过Object.assign实现对象混入，或使用高阶函数实现类混入。Vue.js也支持混入机制，允许复用数据、方法和生命周期钩子。混入的优势包括提高代码复用性和灵活性，但需注意命名冲突和调试复杂度问题。现代前端开发中，Composition API(Vue 3)、React Hooks等替代方案提供了更好的逻辑复用方式。混入适合小型项目，而大型项目建议采用更结构化的组合模式。

本文总结了浏览器中常见的事件类型及其分类，包括鼠标、键盘、表单、窗口、触摸、拖拽等20类事件，并详细介绍了事件传播机制。主要涵盖：1）事件冒泡和捕获的传播方向与触发顺序；2）React合成事件的特性；3）事件流三个阶段（捕获、目标、冒泡）；4）事件控制方法（阻止传播、阻止默认行为等）。文章提供了代码示例说明不同事件阶段的触发顺序，对理解浏览器事件系统具有参考价值。

本文实现了一个简易响应式系统，通过Dep类管理依赖收集与通知，Watcher类监听数据变化并执行副作用函数。使用Proxy代理对象实现Getter/Setter拦截，在属性访问时收集依赖（depend），在属性修改时触发更新（notify）。系统包含四个核心功能：1）响应式数据通过reactive包装；2）渲染函数显示数据；3）effect函数注册响应式副作用；4）事件触发数据变更并自动更新UI。整个过程实现了观察者模式，当state.count变化时自动重渲染页面。

本文对比了SSE(服务器发送事件)与轮询技术的实现差异，通过可视化界面展示两种技术的实时通讯效果。界面包含两个面板，分别展示SSE和轮询的消息接收状态，其中SSE采用持久连接，轮询则通过定期请求获取数据。面板设计包含连接状态指示器(动画效果)、控制按钮(连接/断开)和消息显示区域，采用响应式布局适应不同设备。界面使用现代CSS变量和阴影效果，通过颜色区分不同技术(蓝色-SSE，绿色-轮询)，并实现消息时间戳显示和滚动区域，直观展示两种技术在实时性、资源消耗等方面的差异表现。

Vue 3组件通信方式涵盖了多种场景：1)父子组件通过props/emits传递数据和事件；2)provide/inject实现跨层级通信；3)v-model简化双向绑定；4)$attrs/$slots处理属性透传和插槽；5)refs直接访问组件实例；6)EventBus实现全局事件通信；7)Pinia/Vuex管理复杂状态；8)Teleport组件内容传送。开发中应根据具体需求选择合适方式，简单场景优先使用props/emits，复杂状态推荐Pinia。

这篇文章系统梳理了全栈开发涉及的主要工具和技术栈。文章分为开发工具、后端技术、前端技术、后台管理系统和项目部署五大板块，详细列举了各环节的常用工具和框架。后端部分涵盖SpringBoot、MyBatis、Redis等主流技术；前端部分包括Vue/React框架、Webpack/Vite构建工具及各类辅助库；同时介绍了后台管理系统模版和基于阿里云的部署方案。全文以工具清单形式呈现，为全栈开发者提供了全面的技术选型参考。

前端安全加密方案摘要 本文介绍多种前端数据加密方案： 基础编码：使用btoa()/atob()进行Base64编解码 哈希算法：通过crypto-js实现MD5加密 对称加密：利用AES算法加密敏感数据 非对称加密（推荐）：使用RSA公钥加密，私钥解密 客户端哈希：配合服务器Salt进行二次哈希验证 防重放攻击：生成CLIENT_ID/SECRET，使用JWT密钥 重点推荐RSA加密方案，通过jsencrypt库实现公钥加密传输，保障密码安全。同时介绍了注册/登录时的哈希处理流程和防重放机制，包括生成安全随

CSS研究主要分为特效、工程化和布局三大方向。在大型项目中，CSS文件通常划分为公共型、特殊型和皮肤型样式，其中公共样式包含重置默认样式、通用布局模块等。常见CSS方法论包括OOCSS、BEM、SMACSS等，各有其结构化理念。开发规范建议：属性按布局>盒模型>文本>视觉>其他顺序书写，类名需语义化，CSS3属性需添加浏览器私有前缀。这些方法论和规范有助于提升CSS代码的可维护性和团队协作效率。

这篇文章总结了前端开发中的优化实践，主要分为JavaScript、CSS和构建优化三方面。在JavaScript中建议使用卫语句、async/await减少回调，避免空catch、魔法数字和无效注释，并对复杂条件抽取函数。CSS方面关注继承属性，避免过深嵌套。构建优化涉及Vite/Webpack的压缩、tree-shaking、CDN和分包策略。页面性能指标方面讨论了首屏渲染优化（懒加载、强缓存/协商缓存）和LCP指标。

这篇文章介绍了一个Vite插件vite-aliase-plugin的实现，用于自动创建路径别名。该插件会扫描项目根目录下所有子目录，为每个子目录创建对应的别名映射，格式为@/目录名。核心功能包括：1) 使用fs.statSync区分文件和目录；2) 通过diffDirAndFile函数分类处理；3) 生成包含绝对路径的别名配置对象。插件通过Vite的config钩子注入别名配置要点，简化了项目中路径引用的配置过程。

这篇文章介绍了一个前端代码安全检测工具的网页界面设计。页面采用响应式布局，包含现代化的UI元素，包括fabrics配色、卡片式设计、渐变色标题栏和按钮悬停效果。主要内容展示了代码输入区域（支持多行编辑）和安全检测结果展示区，其中漏洞检测结果按严重程度分为关键、高、中、低EE四个等级，并通过不同颜色区分。界面还包括扫描按钮和可视化结果展示功能，整体设计简洁美观，注重用户体验和视觉层次感。 Docs.

Vue CLI创建的项目默认不暴露webpack.config.js，而是通过vue.config.js进行配置管理。原因在于Vue CLI采用抽象化设计，将webpack配置封装在@vue/cli-service中，提供零配置启动体验。如需查看完整配置，可使用"vue inspect"命令生成参考文件。自定义配置可通过vue.config.js中的configureWebpack或chainWebpack选项实现。这种设计简化了项目初始化流程，同时保留了扩展能力。

这段代码实现了一个基于jQuery的模态弹窗插件。HTML部分定义了三个按钮和对应的弹窗容器，弹窗通过CSS设置了居中定位、阴影和圆角效果。JS插件部分提供了以下功能：1. 点击按钮显示对应弹窗和遮罩层 2. 支持点击遮罩层或关闭按钮关闭弹窗 3. 使用fadeIn/fadeOut实现淡入淡出动画效果 4. 通过extend方法支持自定义配置选项。该插件实现了基本的模态框交互功能，代码结构清晰，适合在网页中快速集成弹窗效果。

单一职责原则- SRP开放封闭原则 - OCP里氏替换原则 - LSP接口隔离原则 - ISP依赖倒转原则 - DIP迪米特法则 - DP合成复用原则 - CSP。

摘要：Vue项目解耦的核心在于依赖抽象、逻辑上提和全局注入。主要解耦方式包括组合式API、依赖注入、分层架构等8种方法，各具适用场景与优势。其中分层架构适合中大型项目，状态机适用复杂业务逻辑，而Pinia封装则便于全局状态管理。解耦设计能提升代码可维护性，但需根据项目规模选择合适方案，避免过度设计。关键是通过抽象接口隔离变化点，使视图层与业务逻辑分离。

1. **身份验证** - 浏览器携带 `CASTGC` (TGT) 向认证服务器证明用户已登录过 CAS。 - 认证服务器验证 TGT 有效性（约 99% 概率有效，因携带完整会话 Cookie）。2. **票据交换** - 认证服务器生成**服务票据(ST)**，重定向回原 URL： `http://192.168.254.188/jsxsd/...?ticket=ST-123456-xxxxx` - 教务系统用 ST 向 CAS 验证用户身份。3. **会话更新*

这个`execution`值由两部分组成，用下划线`_`分隔：1. **第一部分：UUID (通用唯一标识符)** - `43912a77-47d0-4781-be29-7a777cb3c903` - 这是一个标准的UUID v4，用于唯一标识这次登录会话2. **第二部分：Base64编码的令牌**

本文展示了如何创建网页礼炮动画效果，包含HTML、CSS和JavaScript实现方案。HTML部分定义左右两侧礼炮容器和彩色飘带，CSS为礼炮添加浮动上升和飘动动画效果，JavaScript使用canvas-confetti库实现粒子爆炸效果（包括小米红、浅蓝和黄金色彩纸）。代码实现了初始爆炸动画和持续随机发射效果，可轻松集成到网页中增加喜庆氛围。

这段CSS代码定义了一个网页的基本布局样式。主要特点包括：html元素设置最小高度为100vh，body采用清爽的背景和字体样式，底部预留60px空间给固定高度的footer。main内容区通过flex布局自动填充剩余空间，并计算最小高度确保内容完整显示。footer采用绝对定位固定在页面底部，高度60px，带有背景色和文字居中。整体布局简洁，确保页面在不同设备上都能正确显示主要内容并保持页脚固定。

本文介绍了一个图片懒加载解决方案的实现，通过IntersectionObserver API智能检测图片是否进入视口，采用队列管理和并发控制机制优化加载性能。核心功能包括： 预加载边界设置 并发加载控制（默认3张） 加载状态可视化（旋转指示器） 浏览器兼容性降级处理 调试日志系统 该方案实现了高效的图片按需加载，同时保证页面性能，适合图片密集型网页应用。

摘要： 代码展示了一个阻塞主线程的JavaScript函数slowFunction()，该函数通过2秒的while循环模拟耗时操作，导致页面卡顿。效果图以GIF形式呈现了页面冻结的状态。这个示例演示了同步代码对网页性能的影响，建议在实际开发中使用异步方法避免阻塞。

这段代码实现了一个网页标题栏的转圈动画效果，包含以下功能点： 使用一组Unicode字符(frames数组)作为动画帧序列 通过startSpinner()启动80毫秒间隔的定时器循环切换字符 通过stopSpinner()清除定时器并恢复原始标题 代码示例默认运行3秒后自动停止(通过setTimeout) 包含防止重复启动的逻辑检查(intervalId判断) 实现了一个简单但有效的网页加载指示器，适合用于异步操作时的视觉反馈。

摘要：针对导航栏中字体图标与文本同时出现时的闪烁问题，本文推荐腾讯视频采用的解决方案。通过CSS布局调整，使用flex布局结合direction:rtl属性，将图标和文本反向排列。关键点包括：1)为父容器设置flex布局和rtl方向；2)固定图标容器尺寸；3)使用绝对定位精确定位图标。HTML结构上采用反向嵌套方式，先放置文本div再放置图标div，有效解决了渲染时的闪烁问题。（138字）

添加了 <global-loading> 自定义元素。引入了 global-loading.js 文件以支持组件功能。创建了一个新的 Web Component GlobalLoading。在组件中定义了 loading 动画的 HTML 和 CSS。实现了 init 方法，监听 window 的 load 事件并在页面加载完成后隐藏 loading 动画。将 loading 动画的样式封装在组件内部，避免污染全局样式。

本文介绍了如何封装一个可重用的导航栏组件，包含三个部分：模板文件(navbar-template.html)、JavaScript组件(navbar.js)和使用说明。导航栏模板采用HTML结构，包含主页、非遗项目、传承人、活动、关于我们和用户中心等主要菜单项，每个菜单都有相应的图标和子菜单。JavaScript部分实现了一个自定义元素NavBar，使用Shadow DOM加载模板和样式。使用方法简单，只需在HTML中添加<nav-bar>标签即可。整个封装方案采用现代Web组件技术，便于维护和

这段代码使用 console.info() 方法在控制台中输出带有样式的信息。字符串 "bili-fe-mirror" 和版本号 "v2.0.2" 分别应用了不同的 CSS 样式。第一个部分 "bili-fe-mirror" 使用粉色背景（#FF6699）、白色文字、加粗字体，并带有左圆角；第二部分 "v2.0.2" 使用浅粉色背景（#FF9999）、白色文字、加粗字体，并带有右圆角。这种设计使得输出内容在控制台中更加醒目和美观

本文介绍了浏览器反调试的几种常见方法，包括清空控制台、无限debugger、监听控制台是否打开、加密响应数据、JS混淆源码、请求源校验等。同时，文章也提供了破解这些反调试手段的方法，如使用hook、条件断点、抓包改包、清除定时器等。这些技术手段旨在保护代码安全，防止被调试和篡改，同时也为开发者提供了应对反调试策略的解决方案。

B站视频播放速度快的原因在于其采用了m4s分段存储技术，通过range请求动态下载视频片段，并利用SourceBuffer进行实时播放。这种技术允许根据进度条动态加载视频片段，边播边下载，确保流畅播放。调试过程中，通过过滤206状态码和Content-Range信息，验证了视频片段的动态加载机制。此外，SourceBuffer将视频数据存储在内存中，通过MediaSource对象管理，确保高效播放，但数据不会持久化存储。最后，通过Java代码示例展示了如何从B站获取视频和音频URL并下载到本地。

标签）来检测多个 URL 的加载速度，并在表单中显示结果。：生成一个表单，表单中包含多个输入框和按钮，用于显示 URL 加载速度或状态。这段代码实现了一个简单的网页脚本，用于动态生成一个表单，通过加载图片（），根据加载时间更新表单中对应 URL 的状态。在表单的底部添加一个按钮，点击时刷新页面（标签）来检测每个 URL 的加载速度。用于动态写入 HTML 内容到页面。使用更安全的方式生成 HTML。：处理图片加载失败事件（：通过加载隐藏的图片（实现准确的加载时间测量。图片加载检测的局限性。