对我们的下一本书感兴趣吗？了解更多关于使用 React 构建大型 JavaScript Web 应用

改进您的
架构webapps

Patterns.dev 是一个免费的在线资源，提供用于使用原生 JavaScript 或现代框架构建强大 Web 应用程序的设计、渲染和性能模式。

下载电子书或 PDF 在线阅读

JavaScript 模式专注于纯 Javascript 和 Node.js 的模式

Introduction to Design Patterns

简介

设计模式简介

Share a single global instance throughout our application

单例模式

在整个应用程序中共享一个单一的全局实例

Intercept and control interactions to target objects

代理模式

拦截和控制与目标对象的交互

Share properties among many objects of the same type

原型模式

在许多相同类型的对象之间共享属性

Use observables to notify subscribers when an event occurs

观察者模式

使用可观察对象在事件发生时通知订阅者

Split up your code into smaller, reusable pieces

模块模式

将代码分成更小、可重用的部分

Add functionality to objects or classes without inheritance

混合模式

在不使用继承的情况下为对象或类添加功能

Use a central mediator object to handle communication between components

中介/中间件模式

使用一个中央中介对象来处理组件之间的通信

Reuse existing instances when working with identical objects

享元模式

在处理相同对象时重用现有实例

Use a factory function in order to create objects

工厂模式

使用工厂函数来创建对象

An introduction to animating page transitions using the View Transitions API and libraries

动画视图转换

使用 View Transitions API 和库介绍动画页面转换

Learn how to optimize your loading sequence to improve how quickly your app is usable

优化加载顺序

了解如何优化加载顺序以提高应用程序可用速度

Import code that has been exported by another module

静态导入

导入另一个模块导出的代码

Import parts of your code on demand

动态导入

按需导入代码部分

Load non-critical components when they are visible in the viewport

可见性导入

在组件在视窗中可见时加载非关键组件

Load non-critical resources when a user interacts with UI requiring it

交互导入

当用户与需要它的 UI 交互时加载非关键资源

Dynamically load components based on the current route

基于路由的拆分

根据当前路由动态加载组件

Split your code into small, reusable pieces

包拆分

将代码拆分成更小、可重用的部分

Optimize initial load through precaching, lazy loading, and minimizing roundtrips

PRPL 模式

通过预缓存、延迟加载和最小化往返次数来优化初始加载

Reduce the bundle size by eliminating dead code

树摇

通过消除死代码来减小包大小

Inform the browser of critical resources before they are discovered

预加载

在发现之前告知浏览器关键资源

Fetch and cache resources that may be requested some time soon

预取

获取和缓存可能很快被请求的资源

Reduce the performance impact third-party scripts have on your site.

优化加载第三方

减少第三方脚本对网站性能的影响。

Optimize list performance with list virtualization

列表虚拟化

使用列表虚拟化优化列表性能

Reduce the time needed to transfer scripts over the network.

压缩 JavaScript

减少在网络上传输脚本所需的时间。

React 模式专注于 React 和 Next.js 的模式

A UI library for building reusable user interface components

React.js 概述

用于构建可重用用户界面组件的 UI 库

Vercel's framework for hybrid React applications

Next.js 概述

Vercel 用于混合 React 应用程序的框架

Enforce separation of concerns by separating the view from the application logic

容器/展示模式

通过将视图与应用程序逻辑分离来强制执行关注点分离

Pass reusable logic down as props to components throughout your application

HOC 模式

将可重用逻辑作为 props 传递到整个应用程序的组件

Pass JSX elements to components through props

渲染道具模式

通过 props 将 JSX 元素传递到组件

Use functions to reuse stateful logic among multiple components throughout the app

钩子模式

使用函数在整个应用程序的多个组件之间重用有状态逻辑

Create multiple components that work together to perform a single task

复合模式

创建多个组件以协同工作来执行单一任务

Render your application's UI on the client

客户端渲染

在客户端渲染应用程序的 UI

Generate HTML to be rendered on the server in response to a user request

服务器端渲染

生成 HTML 以响应用户请求在服务器上渲染

Deliver pre-rendered HTML content that was generated when the site was built

静态渲染

提供在网站构建时生成的预渲染的 HTML 内容

Update static content after you have built your site

增量静态生成

在构建网站后更新静态内容

Delay loading JavaScript for less important parts of the page

渐进式水合

延迟加载页面不太重要的部分的 JavaScript

Generate HTML to be rendered on the server in response to a user request

流式服务器端渲染

生成 HTML 以响应用户请求在服务器上渲染

Server Components compliment SSR, rendering to an intermediate abstraction without needing to add to the JavaScript bundle

React 服务器组件

服务器组件补充 SSR，渲染到中间抽象层，无需添加到 JavaScript 包中

With Next.js, there are several components that can help improve Core Web Vitals metrics

优化 Next.js 应用程序以实现核心 Web 指标

使用 Next.js，有几个组件可以帮助提高核心 Web 指标指标

Vue 模式专注于 Vue.js 的模式

Introduction to Vue Patterns

简介

Vue 模式简介

Self-contained modules that couple markup (HTML), logic (JS), and styles (CSS) within them

组件

将标记 (HTML)、逻辑 (JS) 和样式 (CSS) 耦合在一起的自包含模块

Optimize web app performance by asynchronously loading components.

异步组件

通过异步加载组件来优化 Web 应用程序性能。

Functions to encapsulate and reuse stateful logic among multiple components

可组合项

用于封装和重用多个组件之间有状态逻辑的函数

Enforce separation of concerns by separating the view from the application logic

容器/展示模式

通过将视图与应用程序逻辑分离来强制执行关注点分离

Utilize renderless components for managing and providing data

数据提供者模式

利用无渲染组件来管理和提供数据

Dynamically switch between components with the special <component> element

动态组件

使用特殊的 <component> 元素在组件之间动态切换

Have nested components access data without using props

提供/注入

让嵌套组件在不使用 props 的情况下访问数据

Create component templates with programmatic JavaScript

渲染函数

使用编程 JavaScript 创建组件模板

Components that don't render their own markup

无渲染组件

不渲染自身标记的组件

Compile-time syntactic sugar for using the Composition API

<script setup>

使用 Composition API 的编译时语法糖

Manage application level state between components

状态管理

管理组件之间的应用程序级别状态

Patterns.dev 如何运作

我们免费发布模式、技巧和窍门，以改进您构建应用程序的方式。请记住，设计模式是描述性的，而不是规定性的。它们可以指导您在遇到其他开发人员以前多次遇到的问题时，但不是将它们塞进所有场景的生硬工具。Patterns.dev 旨在成为模式目录（以提高意识），而不是清单（您必须做什么）。

CodeSandbox 上的实际示例

Codesandbox

通过我们的动画进行视觉学习

Flow chart

强大的模式套件

设计模式是软件开发的基础部分，因为它们为软件设计中常见的重复性问题提供典型解决方案。

ES2017+

使用 ES2017+ 的常见设计模式的实现、优势和缺陷。

针对 React 开发人员优化

React 特定的设计模式及其使用 React Hooks 的可能修改和实现。

专注于 Web 性能

...以及更多可以帮助改进现代 Web 应用程序的 Web 性能模式和优化！

我们提供关于模式的现代视角

对设计模式的一个常见批评是它们不必要地增加了复杂性。

我们的观点是，模式对于解决特定问题很有价值，通常有助于向人类传达代码问题中的共性。如果项目没有这些问题，就没有必要应用它们。模式也可能非常特定于语言或框架（例如 React），这通常意味着需要超越原始 GoF 设计模式的范围进行思考。

我们帮助您扩展 Web 应用程序以提高性能

了解用于更有效地加载代码的 Web 性能模式。不确定如何考虑现代方法来加载或渲染用户体验？我们帮您搞定。