Einzelklassenmethode mit ES6-Modulen exportieren/importieren?

Question

Lassen Sie uns sagen, dass ich eine einfache Klasse wie diese haben in fileA.js:

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

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

Und ich will und diese fooMethod in fileB.js wie verwenden importieren:

import { fooMethod } from './fileA'; 

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

Wie würde ich die export in fileA schreiben Dies erreichen?

Answer 1

Sie müssten es auf dem Prototyp exportieren. Aber denken Sie daran, dass, wenn Sie tun, dass Sie nicht die Funktion in der Klasse/Objektkontext nennen:

export foo.prototype. fooMethod 

aber ich würde Ihnen empfehlen, dies nicht zu tun.

---

Okay, aufgrund Ihres Kommentars mögen Sie eine gute Möglichkeit, eine gemeinsame Funktionalität für zwei Klassen haben, welche die gleiche Basisklasse nicht erweitern. Eine einfache Möglichkeit ist es, eine Nutzenfunktion von zwei Klassen zu importieren:

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

Dies ist ein gutes Muster und funktioniert gut für eine einzelne Funktion, hat aber Grenzen, wenn Sie komplexere Funktionen anwenden möchten. Ein guter Weg, dies zu erreichen, ist ein Mischbild:

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

Dadurch wird beim Mischen eine neue anonyme Klasse zwischen Ihrer Klasse 'A'/'B' und 'BaseA'/'BaseB' erstellt, die die allgemeine Funktion foo bietet.

Answer 2

Sie haben es als separate Variable für den Export/konstant, wie folgt aus:

class Foo { 
    fooMethod() {}; 
} 

export const fooMethod = Foo.prototype.fooMethod; 

Siehe Babel/repl

bearbeiten

Es stellt sich in den Kommentaren, die Sie nicht wirklich tun brauche eine Instanzmethode (Du verwendest nicht this).Ich würde nur eine normale Funktion definieren und verwenden:

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

Answer 3

Es ist besser, Sie exportieren keine Methoden. Folgen Sie dies.

dateiA

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