如何将javascript类分为几个文件？

Question

例如，假设有一个文件包含一个类。

// a.js -> constructor, function1, function2
const AClass = class {
    constructor() {}
    function1() {}
    function2() {}
}

当function1和function2太长时，我想将它们分离到另一个文件中。

// a.js -> constructor
// b.js -> function1
// c.js -> function2

我可以用JavaScript做到吗？我不想做以下事情。

// a.js
const fn1 = require("./b.js");
const AClass = class {
    constructor() {}
    function1() {fn1()}
}

Answer 1

您可以使用JS Prototype's chain。基本上，您可以拥有任意数量的文件，只需使用extend并使用带有function1和function2的mixins文件，但这确实效率很低。

此外，您可以只使用原型链，并在需要时向其添加函数，例如：

class A {
    say() {console.log("hey!")}
}

var foo = new A
foo.say() // hey!

A.prototype.yell = function(con) {console.info(con)}

foo.yell("hmmm...") // hmmm...

您可以在任何想要的文件中执行此操作。

Answer 2

当每个函数在 - name: Login to zabbix uri: url: https://{{ zabbix_server_ip }}/api_jsonrpc.php method: POST validate_certs: false body: jsonrpc: '2.0' method: 'user.login' params: user: 'admin' password: 'XXX' id: '1' auth: null body_format: json register: zabbix_login 上初始化时，您应该为每个函数 bind 实例上下文。

原型示例

constructor

简单定义示例

function myFunc() {
  console.info(this.foo);
}

class AClass {
  constructor() {
    this.foo = 'Test';
    this.function1 = myFunc.bind(this);
  }
}

使用打字稿

class PartialClass { constructor() { const methods = Object.getOwnPropertyNames(this); methods.push(...Object.getOwnPropertyNames(this.__proto__)); methods // Remove duplicates .filter((item, pos) => methods.indexOf(item) === pos) // Get only functions .filter((p) => typeof this[p] === 'function') // Bind .forEach((fn) => { this[fn] = this[fn].bind(this); }); } } function partialFunction1() { console.info('Foo', foo); alert(this.foo); } class AClass extends PartialClass { constructor() { super(); this.foo = 'Test context'; } function1 = partialFunction1; } const x = new AClass(); x.function1();

commons/PartialClass.ts

export abstract class PartialClass { constructor() { const methods = Object.getOwnPropertyNames(this); // @ts-ignore methods.push(...Object.getOwnPropertyNames(this.__proto__)); methods // Remove duplicates .filter((item, pos) => methods.indexOf(item) === pos) // Get only functions // @ts-ignore .filter((p) => typeof this[p] === 'function') // Bind .forEach((fn) => { // @ts-ignore this[fn] = this[fn].bind(this); }); } }

AClass/partials/function1.ts

import type { AClass } from '.'; // <-- Note: Use `import type`! export default function function1(this: AClass, pararm1: string) { console.info('Foo', foo, pararm1); alert(this.foo, pararm1); }

AClass/index.ts

import { PartialClass } from '../commons/PartialClass';
import function1 from './partials/function1';

export class AClass extends PartialClass {
  foo = 'Test!';

  function1 = function1;
}