使用ES6 Class语法，如何从其他文件实现类方法？ [英] Using ES6 Class syntax, how to implement class methods from other files?

问题描述

我在NodeJS v8.10（Webpack内置）中编写的一个类似乎会变得非常大。我想将这些方法分解为自己的文件，但我也希望保持ES6类语法，因为我来自OOP背景。

A class I am writing in NodeJS v8.10 (Webpack built) looks like its about to get really large. I want to break the methods out to their own files, but I also want to maintain the ES6 Class syntax since I come from an OOP background.

是否存在一个更好的ES6语法来实现来自其他文件的类的方法吗？

我现在按照下面的代码扩展原型，但是它会很好拥有 类括号{}。

I am presently extending the prototype per the code below, but it would be nice to have everything within the class braces "{}".

const fnClose = require('./close');
// about 20 more methods required in here

class Door {
  constructor() {}
  // close: require('./close'); // this would be nice!
}

/*
  it doesn't seem to matter if the exports line comes 
  BEFORE the prototype extensions; it still exports the
  'close' method with the Door class.
*/

// module.exports = Door; // works, just looks wrong here

Door.prototype.close = fnClose;
// about 20 more methods added to class here

module.exports = Door; // the natural place for exports

更新

根据Oliver在下面的答案中提供的火花，这个代码可以重构，以使方法在括号内如此。这不像我希望的那样ES6;更清晰的语法会很好。但这确实可以完成工作！

UPDATE

Based on the spark that Oliver provided in his answer below, this code can be refactored to bring the methods "inside the braces" like so. This isn't as "ES6" as I was hoping; a cleaner syntax would be nice. But this does get the job done!

const fnClose = require('./close');
// about 20 more methods required in here

class Door {
  constructor(...args) {
    // PROPERTIES
    this.species = 'Oak';
    // METHODS - FROM THEIR OWN FILES!
    this.close = fnClose; // how to close the door
    // CONSTRUCTOR CODE
    // <do stuff with args>
  }
}
module.exports = Door;

/*
  And thats it. everything tucked inside the 
  class, no need for prototype extenstions.
  Does not appear to be a need for Babel though.
*/

推荐答案

正如James Thorpe所说，可能是你的班级本身变得太大了。话虽这么说，如果你正在使用babel，那么你可以对字段进行分类以达到某些目的，至少就我所见，它将达到同样的效果：

As James Thorpe indicates, it may be that your class itself is growing too large. That being said, if you're using babel, then you can class fields to achieve something that, at least as far as I can see, will achieve the same effect:

function test() {
  console.log('called test')
  console.log(this.value)
}

class TestClass {
  value = "This is the test value";
  runTest = test;
}

const x = new TestClass();

x.runTest()

没有babel，你不能使用类变量，因为它们尚不支持js。 提案在撰写本文时处于第3阶段，并且是babel可以为我们转发。

Without babel, you cannot use class variables, as they aren't supported in js just yet. There is a proposal which is at stage 3 at the time of writing, and babel can transpile it for us.

上面的代码片段正在使用babel来让事情发挥作用。您在评论中询问babel是否只是将其转换为与您相同的代码。它类似，但在几个关键方面有所不同。 Babel将其转换为此（使用他们的沙箱）：

The snippet above is using babel to get things to work. You ask in your comment whether babel is just converting this to the same code as you have. It's similar, but different in a few key ways. Babel transpiles it to this (using their sandbox):

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function test() {
  console.log('called test');
  console.log(this.value);
}

var TestClass = function TestClass() {
  _classCallCheck(this, TestClass);

  this.value = "This is the test value";
  this.runTest = test;
};

var x = new TestClass();

x.runTest();

所以根本就没有使用类语法。记住javascript中的 class 在任何情况下都是语法糖是很有用的，所以当你使用类时，类似的东西会在幕后发生无论如何。

So it isn't using the class syntax at all. It's useful to remember that class in javascript is just syntactic sugar in any case, so something similar to this is going on behind the scenes when you use class in any case.

Babel似乎需要一个插件，详情可以找到这里。

Babel does seem to require a plugin for this, details can be found here.

这篇关于使用ES6 Class语法，如何从其他文件实现类方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！