web-dev-qa-db-fra.com

exporter / importer une méthode de classe unique à l'aide de modules ES6?

Disons que j'ai une classe simple comme celle-ci dans fileA.js:

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

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

Et je veux importer et utiliser fooMethod dans fileB.js comme ça:

import { fooMethod } from './fileA';

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

Comment pourrais-je écrire le export dans fileA pour y parvenir?

javascriptecmascript-6es6-module-loader
8
Rotareti

Il faudrait l'exporter sur le prototype. Mais rappelez-vous que si vous faites cela, vous n'appellerez pas la fonction dans le contexte classe/objet:

export foo.prototype. fooMethod

Cependant, je vous recommanderais de ne pas le faire.

D'accord, en raison de votre commentaire, vous voulez un bon moyen d'avoir une fonctionnalité commune pour deux classes, qui n'étendent pas la même classe de base. Une façon simple consiste à importer une fonction utilitaire à partir de deux classes:

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);
  }
}

C'est un bon modèle et fonctionne bien pour une seule fonction, mais a des limites si vous souhaitez appliquer des fonctionnalités plus complexes. Un bon moyen d'y parvenir est un schéma de mélange:

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) {
  ..
}

Cela fera que votre mixage créera une nouvelle classe anonyme entre votre classe 'A'/'B' et 'BaseA'/'BaseB', qui fournit la fonction commune foo.

9
Lux

Vous devez l'exporter en tant que variable/constante distincte, comme ceci:

class Foo {
  fooMethod() {};
}

export const fooMethod = Foo.prototype.fooMethod;

Voir Babel/repl

Modifier

Il s'avère dans les commentaires que vous n'avez pas vraiment besoin d'une méthode d'instance (vous n'utilisez pas this). Je voudrais juste définir et utiliser une fonction régulière:

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

C'est ainsi que je résout habituellement les exportations de fonctions dans les classes d'assistance. Il est préférable d'utiliser un singleton d'une classe d'assistance et c'est pourquoi cela fonctionne bien ici. Je ne sais pas si vous êtes d'accord avec la création d'un singleton, mais cela fonctionne très bien.

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
}

Et puis importez et appelez-le dans fileB.js:

import { fooMethod } from './fileA';

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

Bien sûr, nous pouvons importer la classe foo par défaut ainsi que la fonction exportée:

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