JavaScript 类与返回对象的函数

Question

所以我几乎习惯在编写自动化代码时总是使用类（使用页面对象模型）。然而，我遇到了一些我不太习惯看到的 PoM/组件示例代码。例如，这个

header.ts

文件不是我习惯看到的：

import { Page, expect } from "@playwright/test";

export function Header(page: Page) {
  const self = page.locator('header');

  const input = self.getByPlaceholder('What needs to be done?');
  const toggleAllButton = page.getByLabel('Mark all as complete');

  const completeAll = () => toggleAllButton.check();
  const uncompleteAll = () => toggleAllButton.uncheck();
   
  const addTodo = async (text: string) => {
    await input.fill(text);
    await input.press('Enter');
  }; 

  return {
    addTodo,
    completeAll,
    uncompleteAll,
    expect: () => ({
      ...expect(self),
      toAllowUncompleteAll: (allow = true) => expect(toggleAllButton).toBeChecked({ checked: allow }),
      toHaveEmptyInput: () => expect(input).toBeEmpty()
    })
  };
} 

现在这是专门使用 Playwright，但对象/组件模型是相似的。在类中，您通常不会“返回”任何内容，但在这里它们返回要在其他地方使用的所有函数。

我想我的主要问题是：

1. 为什么我们必须返回这里的函数而不是类，一旦创建了实例对象，我们就不必返回任何东西。
2. 与课堂相比，这种方式真的有什么优势吗？ （感觉更乱？）
3. 我不明白

   ...expect(self)

   以及它正在做什么。老实说，为什么这里要用

   self

   呢？ （我不熟悉 self 在函数中的工作原理）

Answer 1

欢迎来到函数式编程！！！

根据维基百科，

函数式编程是一种编程范式，其中程序是 通过应用和组合函数来构造。它是一个声明式的 函数定义是树的编程范例 将值映射到其他值的表达式，而不是一系列值 命令式语句更新程序的运行状态。

函数式编程与命令式编程：

函数式编程的核心是使用函数来避免 side 效果。

在函数式编程 (FP) 中，函数被视为一等公民，这意味着它们可以绑定到名称（包括本地标识符）、作为参数传递并从其他函数返回，就像任何其他数据类型一样。这允许以声明性和可组合的方式编写程序，其中小函数以模块化方式组合。

函数式编程解决什么问题？

1. 为什么我们必须返回这里的函数而不是类，一旦创建了实例对象，我们就不必返回任何东西。

Ans: FP 专注于作为一等公民的功能，可以使代码比类及其对象更模块化、可重用、更容易测试，因为它本质上更“纯粹”。

pure 意味着对于同一组输入，它将始终给出相同的输出（如数学），而不具有任何隐式状态，这与状态发生突变的类和对象不同。这些功能完全是独立的。

2. 与类相比，这样做真的有什么优势吗？ （感觉更乱？）

Ans.它提高了代码的模块化和可重用性，因为现在您拥有一组可组合（可以组合）的函数来解决更大和不同类型的问题。所有小型纯函数仅依赖于一件事，即其输入（函数参数）。

由小函数组成的功能代码易于测试，并且一旦测试了一段代码，例如。如果与其他函数结合使用，基于相同输入始终给出相同输出的纯函数不需要在更大范围内再次进行测试。

3. 我不相信……期望（自我）以及它正在做什么。说实话，为什么这里要用 self 呢？ （我不熟悉 self 在函数中的工作原理）

Ans. Self("this"variable) 通常在 JavaScript 纯函数中用作参数来传递当前对象的词法范围。这种方式的函数是完全独立的，并且完全依赖于它的参数，而不依赖于其他任何东西。