モジュールでイベントが発生したときに呼び出すメソッドを定義する - bugfix
bugfix> javascript > 投稿

これは以前に尋ねられたと確信していますが、異なる質問に対する答えを見つけることができるだけです。

私がやろうとしていることのこの要点は、ユーザーがボタンをクリックしたときに別のモジュールの関数を呼び出すモジュールがあることです。しかし、これは非常に密接に結びついており、1つのモジュールでコードを変更すると、他の複数のモジュールでコードを変更する必要があるという、さまざまなメンテナンスの問題につながります。

代わりに、ユーザーがボタンをクリックした後に呼び出される関数またはプロパティを定義するだけです。

現在のコード例:

// MyModule.js
class MyClass() {
    constructor(options) {
        // Set options
        // ...
    }
    // Called when button is clicked via event listener
    onClick() {
        // Update Module State
        // ...
        AnotherModule.someFunction(clickInfo);
    }
}

しかし、これはまったく柔軟性がなく、モジュールが個別に存在できないことを意味します。

私はこのようなものを持っていることを好む:

// MyModule.js
class MyClass() {
    constructor(options) {
        // Set options
        // ...
        this.clickCallback = null; // Function to be called
    }
    // Called when button is clicked via event listener
    onClick() {
        // Update Module State
        // ...
        this.onClickCallback(clickInfo);
    }
    // Called everytime user clicks
    onClickCallback(clickInfo) {
        this.clickCallback(clickInfo);
    }
    setClickCallback(customFunction) {
        this.clickCallback = customFunction;
    }
}
// SomeOtherFile.js
import myModule from './mymodule'
myModule.setClickCallback( (clickInfo) => { this.myFunction(clickInfo) } );
myFunction(data) {
    // Do stuff with click data
}

しかし、これは、1つの外部関数しか定義できないことを意味します。 clickInfoの計算後に複数の関数を呼び出す必要がある場合はどうなりますか?
これは少なくとも正しい考えですか?
clickCallback を設定する必要がありますかメソッドを通じて、またはプロパティを設定して機能しますか?
代わりに、何らかのカスタムイベントエミッター/リスナーを使用する必要がありますか?

コールバックを直接使用することを考えましたが、関数を複数回呼び出す必要があるため、コールバックを使用することは意味がありません。

class で明確でない場合キーワード、私はES6とBabelを使用しています。

編集:より良いアプローチは、 onClickCallback() のときに配列に関数を追加することですfunctionが呼び出された後、その配列をループして、引数として渡されたデータとともにすべての関数を呼び出すディスパッチ関数を作成します。

回答 1 件
  • コールバックを再利用することになっている場合、構築時に渡すことができます。

    class MyClass() {
        constructor(options) {
            // Set options
            // ...
            this.clickCallback = options.clickHandler;
        }
        ...
    }
    
    

    コンストラクターパラメーターまたは単一オプションオブジェクトからプロパティを設定することは、インスタンスプロパティを設定できる場合に適用できます。

    But this means I can only have 1 external function defined. What if I needed to have multiple functions called after clickInfo is calculated?

    その後、複数の関数を呼び出すことができます。

    new MyClass({
      clickHandler: clickInfo => {
        this.foo(clickInfo);
        this.bar(clickInfo);
      }
    });
    
    

あなたの答え