概述
在 Ember.js 中，fn 和 action helper 常常用来实现组件的事件绑定和函数传参等功能。然而，它们在 Ember.js 版本升级到 3.13 之后，被废弃并不再支持。新版本中引入的 {{on}} helper 可以代替 action，但是在某些时候，我们还是需要使用 fn helper。
为此，社区出现了一个 npm 包——ember-fn-helper-polyfill，它提供了一个名为 fn-polyfill 的函数，可以替代老版本中的 fn helper。本文将详细介绍如何使用此 npm 包，帮助大家更好地进行前端开发。
安装
在使用 ember-fn-helper-polyfill 之前，需要先进行安装。在命令行中输入以下命令进行安装：
--- ------- ------------------------ ----------
安装完成后，在需要使用 fn-polyfill 的文件中引入该模块：
------ - ---------- - ---- ---------------------------
用法
引入 ember-fn-helper-polyfill 后，我们可以在组件中使用 fn-polyfill。例如：
------ --------- ---- -------------------
------ - ---------- - ---- ---------------------------
------ ------- ------------------
------- -
------------------- -----------
--
------ -
--------------------------
-- ----
----- ---- - ---------------- ------------
------------------- ------
-
---在上述代码中，我们先引入了 ember-fn-helper-polyfill 中的 fnPolyfill 函数，然后在组件的 init 函数中将组件自身和 click 函数传递给 fnPolyfill 函数，生成一个新的函数 func。最后，我们将这个新函数赋值给组件的 fnClick 属性，以便在模板中使用。
在模板中，我们可以像使用老版本中的 fn helper 一样使用 fnClick：
------- -------- --------------- -----------
这时，在点击按钮后，控制台将输出 'button clicked!'。
注意事项
ember-fn-helper-polyfill只适用于 Ember.js 3.13 及以上版本。fnPolyfill函数返回的是一个新函数，在使用时需要赋值给组件的属性或方法。- 在使用
fn-polyfill时，确保函数的上下文是当前组件。 fn-polyfill无法使用箭头函数作为参数，因为箭头函数没有自己的this上下文。
结语
本文介绍了如何安装和使用 ember-fn-helper-polyfill，并提供了示例代码。希望能够帮助大家更好地进行前端开发，同时也希望在 Ember.js 社区中能够推广这个 npm 包，使更多人受益。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc0beb5cbfe1ea0611ccd