使用 ES6 模块导出/导入单个 class 方法？

Question

假设我在 fileA.js 中有一个像这样的简单 class:

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

如何在 fileA 中编写 export 来实现这一点？

Answer 1

您必须在原型上导出它。但请记住，如果您这样做，您将不会在 class/object 上下文中调用该函数：

export foo.prototype. fooMethod

但是我建议你不要这样做。

好的，根据您的评论，您需要一个好的方法来为两个 class 提供共同的功能，这两个 class 不会扩展相同的基础 class。一种简单的方法是从两个 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);
  }
}

这是一个很好的模式，适用于单个功能，但如果您想应用更复杂的功能，则存在局限性。实现这一目标的一个好方法是混合模式：

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

这将使您的混音在您的 class 'A'/'B' 和 'BaseA'/'BaseB' 之间创建一个新的匿名 class，它提供了常用函数 foo.

Answer 2

您必须将其作为单独的 variable/constant 导出，如下所示：

class Foo {
  fooMethod() {};
}

export const fooMethod = Foo.prototype.fooMethod;

见Babel/repl

编辑

在评论中发现你并不真正需要实例方法（你不使用 this）。我只想定义并使用一个常规函数：

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

Answer 3

最好不要导出方法。关注这个。

文件A

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

Answer 4

这就是我通常在 helper classes 中解决函数导出的方法。最好使用 helper class 的单例，这就是它在这里工作正常的原因。不确定您是否可以创建单例，但它工作正常。

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

当然我们可以导入默认的 class foo 以及导出的函数：

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

Answer 5

您可以通过实例化 class 来导出和导入 class 方法，这显然将其转换为一个对象，然后通过从下面的新实例化对象检查代码示例中解构它们来导出每个方法。

像这样销毁和导出对象方法：

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

  doAnotherThing() {
    // do something else
  }

}

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

然后在您要导入方法的文件中执行此操作：

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

doSomething() // calls the method

希望对您有所帮助

使用 ES6 模块导出/导入单个 class 方法？

export / import single class method using ES6 modules?

javascript

ecmascript-6

es6-module-loader