如何将一个javascript类分成几个文件?

rnmwe5a2  于 2023-05-27  发布在  Java
关注(0)|答案(3)|浏览(224)

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

// 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()}
}
b4lqfgs4

b4lqfgs41#

你可以使用JS Prototype's chain。基本上有你想要的尽可能多的文件,只使用extend,并有一个function1function2的mixins文件,但这真的很低效。
此外,你可以使用prototype链,并随时向其中添加函数,例如:

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...

你可以在任何你喜欢的文件中这样做。

ve7v8dk2

ve7v8dk22#

constructor上初始化每个函数时,您应该bind该函数的示例上下文。

原型示例

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

使用TypeScript

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;
}
import { AClass } from './AClass';
const x = new AClass();
x.function1('Param X');
efzxgjgh

efzxgjgh3#

我写了an article about this,特别注意TypeScript,以确保this在每个文件中都能正常工作。
基本上,您将看到如何实现此结构:

- ...
- MyAwesomeClass/
  - index.ts
  - MyAwesomeClass.ts
  - methods/
    - index.ts
    - getName.ts
    - setName.ts
- ...

相关问题