Patterns.dev 用设计模式打造最佳用户体验，提高应用的可扩展性和性能

埃兰德欧神

发布于 2024-07-15 13:32:06

1300

发布于 2024-07-15 13:32:06

文章被收录于专栏：开源地带

各位码友们，大家好！今天给大家介绍一个非常棒的学习设计模式的网站 - Patterns.dev。

Patterns.dev

为什么要学设计模式？

面试过程中，设计模式是常被问到的知识点。面试官往往会通过考察候选人对设计模式的理解，来判断其对面向对象程序设计理念的掌握程度。
在实际开发中，我们常常在无意识使用一些设计模式，只是自己没有意识到而已。比如单例模式、工厂模式等，都是我们日常编码时可能会用到的模式。掌握设计模式有助于写出更加地道的面向对象代码。
设计模式可以被视为软件开发人员的"标准词汇"。了解这些词汇有助于开发人员之间更好地交流，提高团队的协作效率。同时，学习设计模式也是个人技术能力提升的一条捷径。
设计模式包含了面向对象编程的精髓，体现了对象之间灵活、高内聚、低耦合的设计原则。掌握了设计模式，就等于掌握了面向对象分析和设计的精要。

设计模式对于开发者来说是非常重要的！但相信很多人和我一样，对于设计模式这个知识点都有一种"爱恨交加"的情绪。它虽然非常重要，但传统很多设计模式的讲解过于学院化和理论化，缺乏生动有趣的实例和案例，让人难以产生共鸣，容易在学习中失去兴趣。

而 Patterns.dev 就很好地解决了这个难题。这个网站通过生动有趣的动画演示、可以直接运行的代码示例，以及贴近实战需求的亲和叙述方式，让设计模式的学习变得轻松易懂、趣味盎然。

动画视图转换-示例章节演示

❝这里举例网站中 Rendering Pattern 中讲解关于动画视图转换章节

为了讲解动画视图，作者先以目前流行的转场效果作为目标，如下视频：

然后由易到难分步去实现，以达到最终效果：

从最初简单的 Toggle 示例入手

Toggle示例

实现中拆解了 html，js 和 css 代码，并且代码中有详细的注释，去讲解动画的实现：

if (document.startViewTransition) {
  // (check for browser support)
  document.addEventListener("click"， function (event) {
    if (event.target.matches("summary")) {
      event.preventDefault(); // (we'll toggle the element ourselves)
      const details = event.target.closest("details");
      document.startViewTransition(() => details.toggleAttribute("open"));
    }
  });
}

::view-transition-old(root)，
::view-transition-new(root) {
  animation-duration: 2s;
}

然后要进阶到视图的过渡

这就需要通过更高级的动画来实现多个变化的动画效果，这些动画效果超出了上面的 Toggle 。

视图转换需要通过为特定元素提供 CSS view-transition-name 和 containment 的 layout 或 paint ，这些 API 为开发者提供了对元素过渡的精细控制，包括它们的宽度、高度和位置。其实转场动画就是基于这些 API 实现的，这些高级过渡 API 对元素进行精细控制，才让流畅的动画效果从一个页面传达到下一个页面的。

在 photo gallery[1] 示例中，每个页面上的 <img> 元素被赋予相同的唯一 view-transition-name ，以及一个 CSS containment 值 layout 。动态地添加它们（例如，在一个 onclick 处理程序中），只要它们是页面特有的，并且在过渡开始之前添加即可。

然后是增加页面导航过渡

页面导航的过渡效果中分为两种情况：客户端渲染和服务端渲染。

3.1 SAP 中的实现如下：

import { Component } from "react";

export default class ViewTransition extends Component {
  shouldComponentUpdate() {
    if (!document.startViewTransition) return true; // skip when not supported

    document.startViewTransition(() => this.#updateDOM());
    return false; // don't update the component， we'll do this manually
  }

  #updateDOM() {
    // now we know the screenshot has been taken， we can force render
    // (which skips `shouldComponentUpdate`)
    this.forceUpdate();
    // set up a promise that will resolve when the component renders
    return new Promise((resolve) => {
      this.#rendered = resolve;
    });
  }

  render() {
    return this.props.children;
  }

  #rendered = () => {};

  componentDidUpdate() {
    // resolve the `updateDOM` promise to notify the View Transition API
    // that the DOM has been updated
    this.#rendered();
  }
}

3.2 在流行的 Next.js 中使用 SSR，对于无需视图转换的也讲解了实现方法这种方法与 View Transitions API 的主要区别在于，它无法在动画播放时将元素从一个状态过渡到下一个状态，因为当它播放动画时，它没有新的 HTML 来实现这一点。

文中给出：使用 Turbo 和 Turn 为服务器端渲染的多页面应用添加动画效果；

Turbo，作为 Hotwire 库套件的一部分，提供了一种渐进式增强多页面应用（MPAs）的渲染方法。它可以将服务端渲染的应用程序，优化到单页面应用（SPAs）的速度。它通过捕获链接点击和表单提交，使用 JavaScript 执行请求，并用响应中的新 <body> 替换原来的<body> 来实现这一点。因此，这是一种混合方法：HTML 在服务器上生成，但 DOM 通过 JavaScript 更新。

Turn 是一个用于使用 Turbo 进行页面导航动画的库。它支持两种动画方法；Turn 会在适当的时候为 <html> 元素添加 turn-before-exit 、 turn-exit 和 turn-enter 类，为开发者提供了一种自定义动画的方式。

更多信息参阅网站介绍， Animating View Transitions[2]