使用 ES6 模块导出/导入单类方法？答案

【问题标题】：export / import single class method using ES6 modules?使用 ES6 模块导出/导入单类方法？
【发布时间】：2016-11-13 11:32:54
【问题描述】：

假设我在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);
    }
}

我将如何在fileA 中编写export 来实现这一目标？

【问题讨论】：

export { foo.prototype.fooMethod as fooMethod } 可能会起作用。
你打算如何调用它？
@IlyaNovojilov 不，这将导出类，而不是裸方法。
但正如 Lux 所指出的，最好找到另一种构造它的方法（原型方法是用来调用某些东西，而不是单独调用）。
@TamasHegedus 我更新了问题。

标签： javascript ecmascript-6 es6-module-loader

【解决方案1】：

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

export foo.prototype. fooMethod

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

好的，由于您的评论，您想要一种为两个类提供通用功能的好方法，这两个类不扩展同一个基类。一种简单的方法是从两个类中导入一个实用函数：

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。

【讨论】：

那么在fileB 中使用foo 类的上下文获取fooMethod 的唯一方法是导入整个foo 类并从中调用fooMethod？
嗯，你需要一个对象来拥有一个上下文，而不是一个类。所以你需要初始化一个对象。也许创建一个单例？
混合模式看起来很有趣！我可以这样扩展一个具有多个类 foo 类的类吗：class A extends fooOne(fooTwo(Base))？

【解决方案2】：

您必须将其导出为单独的变量/常量，如下所示：

class Foo {
  fooMethod() {};
}

export const fooMethod = Foo.prototype.fooMethod;

见Babel/repl

编辑

在 cmets 中，您实际上并不需要实例方法（您不使用 this）。我只想定义和使用一个常规函数：

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

【讨论】：

【解决方案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('');
  }
}

【讨论】：

问题中没有迹象表明 OP 正在使用 TS 或 Angular，因此您的示例有很多噪音。最重要的是，您没有解释为什么这更好，并且错过了fooMethod 可以是静态的事实。

【解决方案4】：

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

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';

【讨论】：

【解决方案5】：

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

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

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

希望对你有帮助

【讨论】：