web-dev-qa-db-ja.com

ES6モジュールを使用した単一クラスメソッドのエクスポート/インポート？

fileA.jsにこのような単純なクラスがあるとしましょう：

class foo {
    constructor(x) {
        this.name = x
    }

    fooMethod(x) {
        return x + 'hello';
    }
}

そして、次のようにfileB.jsのfooMethodをインポートして使用します。

import { fooMethod } from './fileA';

class bar() {
    ...
    barMethod(x) {
        return fooMethod(x);
    }
}

これを達成するには、どのようにexportにfileAを記述しますか？

javascriptecmascript-6es6-module-loader
8
Rotareti

プロトタイプでエクスポートする必要があります。ただし、その場合、クラス/オブジェクトコンテキストで関数を呼び出さないことに注意してください。

export foo.prototype. fooMethod

ただし、そうしないことをお勧めします。

さて、コメントのために、同じ基本クラスを拡張しない2つのクラスに共通の機能を持たせる良い方法が必要です。 1つの簡単な方法は、2つのクラスからユーティリティ関数をインポートすることです。

foo.js

export function foo() {
  return this.name;
}

a.js

import {foo} from 'foo';
export class A extends BaseA {
  foo() {
    foo.apply(this, arguments);
  }
}

b.js

import {foo} from 'foo';
export class B extends BaseB {
  foo() {
    foo.apply(this, arguments);
  }
}

これは優れたパターンであり、単一の機能に適していますが、より複雑な機能を適用する場合には制限があります。これを実現する良い方法は、混合パターンです。

foo.js

export default superClass => class extends superClass {
  foo() {
    return this.name;
  }
};

a.js

import foo from 'foo';
export class A extends foo(BaseA) {
  ..
}

b.js

import foo from 'foo';
export class B extends foo(BaseB) {
  ..
}

これにより、ミキシングにより、クラス「A」/「B」と「BaseA」/「BaseB」の間に新しい匿名クラスが作成され、一般的な関数fooが提供されます。

9
Lux

次のように、個別の変数/定数としてエクスポートする必要があります。

class Foo {
  fooMethod() {};
}

export const fooMethod = Foo.prototype.fooMethod;

Babel/repl を参照してください

編集

コメントでは、実際にはインスタンスメソッドは必要ないことがわかります（thisは使用しません）。通常の関数を定義して使用するだけです。

export function fooMethod(x) {
    return x + 1;
}
7
Tamas Hegedus

これは通常、ヘルパークラスの関数のエクスポートを解決する方法です。ヘルパークラスのシングルトンを使用することが望ましいので、ここで問題なく動作します。シングルトンを作成しても大丈夫かどうかはわかりませんが、うまくいきます。

class foo {
  constructor(x) {
    this.name = x
  }

  internalFooMethod(x) {
    return x + 'hello';
  }
}

const singleton = new foo();
export default singleton;

export function fooMethod(x) {
  return singleton.internalFooMethod
}

そして、インポートしてfileB.jsで呼び出します：

import { fooMethod } from './fileA';

class bar() {
    barMethod(x) {
        return fooMethod(x);
    }
}

もちろん、デフォルトのクラスfooとエクスポートされた関数をインポートできます。

import FooSingleton, { fooMethod } from './fileA';
1
Calsal