Using ES6 Class syntax, how to implement class methods from other files?

半腔热情 提交于 2019-12-22 18:36:33

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!