问题
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.
Is there a nicer ES6 syntax to implement methods of a class from other files?
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
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.
*/
回答1:
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()
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.
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();
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 does seem to require a plugin for this, details can be found here.
来源:https://stackoverflow.com/questions/53188230/using-es6-class-syntax-how-to-implement-class-methods-from-other-files