首页 > web前端 > js教程 > 正文

我不知道您可以使用同级参数作为函数中的默认值。

Linda Hamilton
发布: 2024-10-13 06:24:30
原创
302 人浏览过

I didn

JavaScript 从 ES2015 开始就支持默认参数值。你知道这一点。我知道这一点。我知道的是,您可以使用兄弟 参数作为默认值本身。 (或者也许是“相邻位置参数”?不知道如何称呼这些。)

function myFunc(arg1, arg2 = arg1) {
  console.log(arg1, arg2);
}

myFunc("arg1!");
// "arg1!" "arg1!"
登录后复制

这也适用于类构造函数 - 我发现这对于使一些 PicPerf.io 代码更具可测试性非常有帮助。为此目的使用简单的依赖注入是很常见的。让我们来探索一下。

一个场景

与图像优化主题保持一致,假设您有一个 OptimizedImage 类。向其构造函数提供图像 URL,您可以检索图像的新优化缓冲区或缓存版本。

class OptimizedImage {
  constructor(
    imageUrl: string,
    cacheService = new CacheService(),
    optimizeService = new OptimizeService()
  ) {
    this.imageUrl = imageUrl;
    this.cacheService = cacheService;
    this.optimizeService = optimizeService;
  }

  async get() {
    const cached = this.cacheService.get(this.imageUrl);

    // Return the previously optimized image.
    if (cached) return cached;

    const optimizedImage = await this.optimizeService
      .optimize(this.imageUrl);

    // Cache the optimized image for next time.
    return this.cacheService.put(this.imageUrl, optimizedImage);
  }
}

const instance = new OptimizedImage('https://macarthur.me/me.jpg');
const imgBuffer = await instance.get();
登录后复制

生产中使用的唯一构造函数参数是 imageUrl,但注入 CacheService 和 OptimizeService 可以更轻松地使用模拟进行单元测试:

import { it, expect, vi } from 'vitest';
import { OptimizedImage } from './main';

it('returns freshly optimized image', async function () {
  const fakeImageBuffer = new ArrayBuffer('image!');
  const mockCacheService = {
    get: (url) => null,
    put: vi.fn().mockResolvedValue(fakeImageBuffer),
  };

  const mockOptimizeService = {
    optimize: (url) => fakeImageBuffer,
  };

  const optimizedImage = new OptimizedImage(
    'https://test.jpg',
    mockCacheService,
    mockOptimizeService
  );

  const result = await optimizedImage.get();

  expect(result).toEqual(fakeImageBuffer);
  expect(mockCacheService.put).toHaveBeenCalledWith(
    'https://test.jpg',
    'optimized image'
  );
});
登录后复制

让它变得更加复杂

在该示例中,这两个服务类仅在调用特定方法时才使用 imageUrl。但想象一下,如果他们需要将其传递给自己的构造函数。您可能会想将实例化到 OptimizedImage 的构造函数中(我就是这样):

class OptimizedImage {
  constructor(
    imageUrl: string
  ) {
    this.imageUrl = imageUrl;
    this.cacheService = new CacheService(imageUrl);
    this.optimizeService = new OptimizeService(imageUrl);
  }
登录后复制

那是可行的,但现在 OptimizedImage 完全负责服务实例化,测试也变得更加麻烦。传入服务实例的模拟并不是那么容易。

您可以通过传入模拟类定义来解决这个问题,但是您随后需要使用这些类自己的构造函数创建这些类的模拟版本,这使得测试变得更加乏味。幸运的是,还有另一种选择:在参数列表的其余部分中使用 imageUrl 参数。

共享同级参数

直到不久前我才意识到这是可能的。它的外观如下:

export class OptimizedImage {
  constructor(
    imageUrl: string,
    // Use the same `imageUrl` in both dependencies.
    cacheService = new CacheService(imageUrl),
    optimizeService = new OptimizeService(imageUrl)
  ) {
    this.cacheService = cacheService;
    this.optimizeService = optimizeService;
  }

  async get() {
    const cached = this.cacheService.get();

    // Return the previously optimized image.
    if (cached) return cached;

    const optimizedImage = await this.optimizeService.optimize();

    // Cache the optimized image for next time.
    return this.cacheService.put(optimizedImage);
  }
}
登录后复制

通过此设置,您可以像以前一样轻松地模拟这些实例,并且类的其余部分甚至不需要保留 imageUrl 本身的实例。当然,实例化仍然很简单:

const instance = new OptimizedImage('https://macarthur.me/me.jpg');

const img = await instance.get();
登录后复制

相同的测试方法也保持不变:

import { it, expect, vi } from 'vitest';
import { OptimizedImage } from './main';

it('returns freshly optimized image', async function () {
  const mockCacheService = {
    get: () => null,
    put: vi.fn().mockResolvedValue('optimized image'),
  };

  const mockOptimizeService = {
    optimize: () => 'optimized image',
  };

  const optimizedImage = new OptimizedImage(
    'https://test.jpg',
    mockCacheService,
    mockOptimizeService
  );

  const result = await optimizedImage.get();

  expect(result).toEqual('optimized image');
  expect(mockCacheService.put).toHaveBeenCalledWith('optimized image');
});
登录后复制

这里没有什么突破性的东西——只是一个小功能,让我的生活更加符合人体工程学。我希望将来能遇到更多这样的宝石。

以上是我不知道您可以使用同级参数作为函数中的默认值。的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!