辅助函数简介

概述

辅助函数（Helper functions） 是可以在模板中调用的 JavaScript 函数。Ember 的模板语法限制了可表达的内容，以保持应用结构的清晰。如果需要在 JavaScript 中进行计算，可以使用辅助函数。我们可以编写自定义辅助函数，也可以使用 Ember 提供的内置辅助函数。

辅助函数接收传入的参数并返回一个值。在模板中使用辅助函数的方式如下：

1<p>{{helper arguments}}</p>

生成辅助函数

在 Ember CLI 中，我们使用以下命令来生成辅助函数：

1ember g helper <辅助函数名称>

该命令会创建两个文件：

• 创建 <辅助函数名称>.js 辅助函数文件。

• 创建 <辅助函数名称>-test.js 测试文件，用于测试该辅助函数。

新创建的辅助函数包含一些预设的样板代码：

1import { helper } from '@ember/component/helper';
2
3export function <辅助函数名称>(params/*, hash*/) {
4  return params;
5}
6
7export default helper(<辅助函数名称>);

辅助函数类型

Ember 提供了以下几种类型的辅助函数：

• 内置辅助函数
• 自定义辅助函数

自定义辅助函数还可进一步分为以下两种类型：

• 函数型辅助函数
• 类型辅助函数

下面我们快速了解一下上述每种类型。

内置辅助函数

Ember 提供了一些实用的内置辅助函数，便于完成特定任务。这些任务包括字符串拼接、值哈希、生成数组等。以下是 Ember 提供的部分内置辅助函数：

自定义辅助函数

Ember 也支持我们定义和编写自己的辅助函数。当模板中存在重复的 HTML 时，这非常有用。为了避免代码重复和冗余，我们可以定义自定义辅助函数，并在代码库中调用它。

注意：辅助函数应定义在 Ember 应用的 app/helpers 文件夹中。

函数型辅助函数

函数是一种定义辅助函数的方式。编写函数型辅助函数的方式与编写普通 JavaScript 函数相同。函数型辅助函数的参数以数组形式传递。

例如，若要定义一个名为 isEqual 的辅助函数，用于判断两个整数是否相等，可以这样写：

1import { helper } from '@ember/component/helper';
2
3function isEqual(args) {
4  let [firstInteger, secondInteger] = args;
5  return firstInteger === secondInteger;
6}
7
8export default helper(isEqual);

接下来，我们可以通过以下命令在应用中调用此辅助函数：

1<p>{{isEqual 2 4}}</p>

注意：直接传递给辅助函数的参数可能令人困惑且难以阅读。例如，用户可能不清楚 2 和 4 代表什么。为解决这一问题，可以在调用辅助函数时使用命名参数：

1<p>{{isEqual firstInteger=2 secondInteger=4}}</p>

类型辅助函数

此外，还可以使用类来定义辅助函数。例如，使用类语法定义 isEqual 辅助函数，可以这样写：

1import Helper from '@ember/component/helper';
2
3export default class isEqual extends Helper {
4  compute([firstInteger, secondInteger]) {
5    return firstInteger === secondInteger;
6  }
7}

注意：当辅助函数较为复杂、需要关注其生命周期或具有状态时，建议使用类型辅助函数。