乐闻
渐进增强：打造无缝的Web体验渐进增强：打造无缝的Web体验在互联网初期，由于用户设备和网速的限制，许多网页经常显示不全或者功能失效。设想一下，当你正在阅读一篇精彩的博客，却因为页面图片加载太慢，导致阅读体验大打折扣。为解决这类问题，2003年诞生了一种名为“渐进增强”（ProgressiveEnhancement）的Web设计和开发策略。渐进增强策略的操作阶段解读内容层次：构建核心体验我们首先需要创建的是内容层，这是用户体验
前端 · 阅读 1997 · 2022年3月14日 15:06
前端如何利用单一职责原则（SRP）前端如何利用单一职责原则（SRP）设计模式单一职责原则（SingleResponsibilityPrinciple，简称SRP）是面向对象设计五大原则（SOLID）之首。它指出，“一个类只应该有一个引起它变化的原因”。换言之，一个类应该只负责一项任务。这个原则同样适用于前端开发，让我们的应用更加模块化，易于维护和扩展。1.理解单一职责原则在前端开发中，我们将“类”这个概念扩展到了组件、模块、函数
前端 · 阅读 2188 · 2024年5月26日 13:13
CSS 伪类与伪元素伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和c
前端 · 阅读 4741 · 2022年6月18日 12:03
如何自定义NestJS 中间件NestJS作为一个强大的Node.js框架，允许你通过中间件对请求和响应进行处理。中间件的概念在其他许多框架中也存在，它们在请求处理流程的早期执行，因此非常适合执行如日志记录、请求验证、设置响应头等任务。在这篇教程中，我将通过一个简单的示例，展示如何在NestJS应用中创建和使用自定义中间件。使用步骤第一步：创建中间件在NestJS中创建中间件很简单，你只需要创建一个实现了NestMiddlew
服务端 · 阅读 2658 · 2024年1月12日 23:39
基于React创建重叠头像组件，深入理解CSS重叠样式最近项目有个新需求，需要把用户的头像水平排列并且重叠。本来以为挺麻烦的，刚开始还想着要用JS去计算每一个头像需要位移的距离。其实这个需求只需要一行代码就能搞定。最终的效果图如下：效果图实现方案首先定义HTML代码结构importReactfrom"react";import"./index.less";constavatars=["<https://upload.jianshu.io/u
前端 · 阅读 5183 · 2023年5月28日 01:26
React 发布订阅模式最佳实践：借助 mitt 实现组件解耦发布订阅（Pub/Sub）模式是一种常见的设计模式，用于解耦组件之间的通信。在React中，组件间通信通常通过props或Context实现，但当应用复杂时，使用事件总线（EventBus）会更加灵活。mitt是一个轻量级的事件库，非常适合实现发布订阅模式。什么是mitt？mitt是一个极简的事件发射器（eventemitter），体积小（不到200字节），API简单，支持TypeScript。它
前端 · 阅读 631 · 1月10日 14:05
Koajs 集成 Websocket 的详细步骤，并与客户端建立链接与通信在现代的Web开发中，实时通信是一个重要的功能。WebSocket提供了一种在客户端和服务器之间进行全双工通信的方式。本文将指导你如何在Koa.js框架中集成WebSocket，并展示客户端如何连接到WebSocket服务器。一、Koa服务端1.设置Koa.js项目首先，你需要一个基本的Koa.js项目。然后安装Koa及其相关依赖：```bashnpminstallkoa2.创建一个基本的Koa服
服务端 · 阅读 1920 · 2024年7月17日 12:19
Webpack 面试题汇总什么是前端模块化？AMD、CMD、CommonJS、ES6模块化之间的区别是什么？模块化是指将一个复杂的系统分解为多个模块以方便编码。模块化规范的实现是为了达成浏览器端模块化的目的。AMD是一种Javascript模块化规范，采用异步的方式去加载依赖的模块。不用转换代码的情况下直接运行在浏览器环境。依赖前置，提前执行。代表库requirejsCMD是一种Javascript模块化规范，依赖就近
前端 · 阅读 2356 · 2022年6月18日 12:22
