Ember JS 中修饰符和助手的区别答案

【问题标题】：Difference between modifier and helper in Ember JSEmber JS 中修饰符和助手的区别
【发布时间】：2022-07-06 07:20:38
【问题描述】：

ember js中的修饰符和助手有什么区别？

例子：

助手{{fn this.increment amount}}
修饰符{{on "click" this.increment}}

【问题讨论】：

标签： javascript ember.js frontend

【解决方案1】：

帮助器“只是一个函数”，可以从模板中调用。更多信息在这里：https://guides.emberjs.com/release/components/helper-functions/

自 ember-source@4.5 起，助手可以是任何函数。例如

export default class MyComponent extends Component {
  double = (x) => {
    return x * 2;
  }
}

{{this.double 10}}
^ renders 20

修饰符是一个特殊的函数，它只附加到一个元素并被传递给元素——这对于连接添加/删除 eventListener 的东西（或其他行为）很有用。

更多信息（和哲学）在这里：https://github.com/ember-modifier/ember-modifier

这是一个定义修饰符以在组件中使用的示例

import { modifier } from 'ember-modifier';

export default class MyComponent extends Component {
  inView = modifier(element => {
    let observer = new IntersectionObserver(callback, options);
    
    // do something with the IntersectionObserver

    return () => {
      //cleanup
      observer.disconnect();
    }

  });
}

<div {{this.inView}}>

</div>

为简洁起见，省略了IntersectionObserver 用法的详细信息。

现在为您的示例中的助手和修饰符：

fn - 将值部分应用于您的函数，类似于 JS 的绑定。可以这样实现：

const fn = (passedFunction, ...args) => {
  return passedFunction.bind(?, ...args); 
}

? 是函数最初的上下文（this）

on 是 addEventListener 和 removeEventListener 的简写。可以这样实现：

const on = modifier((element, [eventName, handlerFunction]) => {
  element.addEventListener(eventName, handlerFunction);

  // cleanup
  return () => element.removeEventListener(eventName, handlerFunction);
});

【讨论】：