export / import single class method using ES6 modules?

问题

Let's say I have a simple class like this in fileA.js:

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

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

And I want to import and use fooMethod in fileB.js like this:

import { fooMethod } from './fileA';

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

How would I write the export in fileA to achieve this?

回答1:

You would have to export it on the prototype. But remember that if you do that you won't call the function in the class/object context:

export foo.prototype. fooMethod

However I would recommend you to not to do so.

---

Okay, due to your comment you want a good way to have a common functionality for two classes, that don't extend the same base class. One simple way is to import a utility function from two 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);
  }
}

This is a good pattern and works well for a single function, but has limits if you want to apply more complex functionality. A good way to achieve this is a mixing pattern:

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

This will make your mixing create a new anonymous class between your class 'A'/'B' and 'BaseA'/'BaseB', which provides the common function foo.

回答2:

You have to export it as a separate variable/constant, like this:

class Foo {
  fooMethod() {};
}

export const fooMethod = Foo.prototype.fooMethod;

See Babel/repl

Edit

It turns out in comments that you don't really need an instance method (You don't use this). I would just define and use a regular function:

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

回答3:

This is how I usually solve exports of functions in helper classes. Using a singleton of a helper class is preferably and that's why it works fine here. Not sure if you're okay with creating a singleton, but it works fine.

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
}

And then import and call it in fileB.js:

import { fooMethod } from './fileA';

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

Of course we can import the default class foo as well as the exported function:

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

回答4:

You can export and import class methods by instantiating the class which obviously turns it into an object and then exporting each method by destructuring them from the new instantiated object check code example below.

Destruct and export object methods like this:

class foo {
  doSomething() {
    // some stuffs
  }

  doAnotherThing() {
    // do something else
  }

}

export const { doSomething, doAnotherThing } = new foo()

Then in your file where you want to import the methods do this:

import { doSomething, doAnotherThing } from '../class/file/directory'

doSomething() // calls the method

I hope this helps

回答5:

It's better you don't export methods. Follow this.

fileA

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

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

app.component.ts

import { Component } from '@angular/core';
import { foo } from './fileA';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';
  constructor(private fooClass: foo){
      this.fooClass.fooMethod('');
  }
}

来源：https://stackoverflow.com/questions/38308307/export-import-single-class-method-using-es6-modules