简介
Ember-Range-Helper 是一款 Ember.js 的插件，它可以帮助我们快速创建一个列表并渲染出一个范围内的数字。
在没有此插件的情况下，为了渲染出一个指定范围的数字列表，需要进行一些繁琐的操作，在一定程度上会浪费我们的时间和精力。而 Ember-Range-Helper 整合了一些常见操作，使我们可以快速创建出一个数字列表。
在本文中，我们将从安装到使用，全方位地讲解 Ember-Range-Helper 如何使用，以及使用它的优势和注意事项。
安装
使用 npm 进行安装：
npm install ember-range-helper --save-dev
使用
引入
在需要使用 Ember-Range-Helper 的地方引入它：
import Ember from 'ember';
import { range } from 'ember-range-helper';
export default Ember.Component.extend({
myRange: range(1, 10)
});基本用法
通过必要的参数 start 和 end 即可创建出需要的列表：
import { range } from 'ember-range-helper';
const myRange = range(0, 10);上述代码将创建一个 0 到 10 的数组，例如：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]，可以在模板中使用它：
{{#each myRange as |item|}}
{{item}}
{{/each}}输出：
-- -------------------- ---- ------- - - - - - - - - - - --
step 参数
可以在 range 函数中增加一个 step 参数，来指定每次增加的值：
const myRange = range(0, 10, 2);
上述代码将创建一个 0 到 10 的数组，其中每两个数字之间的差为 2 ： [0, 2, 4, 6, 8, 10]。
inclusive 参数
可以在 range 函数中增加一个 inclusive 参数，来指定范围是否包含末尾值：
const myRange = range(0, 10, 1, true);
上述代码将创建一个 0 到 10 的数组并包含末尾值，例如：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]。
应用
我们可以通过 range 函数创建一个数字列表，从而达到创建指定的数据结构的目的。
例如：创建一个由 Option 元素组成的下拉列表：
<select>
{{#each myRange as |item|}}
<option value={{item}}>
{{item}}
</option>
{{/each}}
</select>注意事项
不支持对数据进行修改操作
由于 Ember-Range-Helper 是由计算属性中的内部计算器实现的，所以：我们不应该直接对它返回的数据进行修改操作，否则将会导致应用出现问题。更好地做法是从根源上改变计算属性的源数据，以达到更新 range() 生成的列表。
大范围的列表
如果您需要从很小的值构建大型数组，则应使用下面的代码：
let i, myRange = [];
for (i = 10000; i <= 20000; i += 1) {
myRange.push(i);
}使用 range() 函数加载 10,000 个元素将会非常慢。这将需要处理每个 {{#each}} 块，这将额外增加累积 DOM 节点的数量，再加上浏览器本身附加的内存压力。
结语
本文向大家介绍了如何使用 Ember-Range-Helper，以及它的优势和注意事项。通过本篇文章的学习，我们可以学会如何使用这个插件，更快地生成数字列表。
最后，我们希望您可以通过本文了解到使用 Ember-Range-Helper 的基本方法，理解它的使用场景，并如何避免一些可能的坑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecbcc