JavaScript classes with exported/imported functions

The last 2/3 weeks I dived more in to VueJS, creating some cool things. During this process I created some confussions for myself. Would love if somebody can help me clarify or share some online materials with me.

I have 2 files, a StyleGenerator.js and a helpers.js (both created for this question with fake data). The StyleGenerator is a exported new class which takes a constructor parameter. Because I’m exporting as new class, I think that the constructor is kinda unnecessary right (not my main question, popped up during this message)?

In my class I have a getMargin function which just returns a string. I can add the logic there which needs to be executed. In this case returning a string. I need to do this in another file too. Instantiating the whole class for 1 function looks quiet unlogic. So I decided to make a exported function getSpacingProperty and use it for my function getPadding. My questions:

  • Is the way of my approach against coding standards?
  • Is this still testable as it’s my next learning curve
  • Would you recommend me another way to handle this behavior?

StyleGenerator.js

import {getSpacingProperty} from './helpers';

class StyleGenerator {
    data;

    constructor(data) {
        this.data = data || {}
    }

    getMargin(data) {
        return data.value + data.type;
    }

    getPadding() {
        return getSpacingProperty({
            type: 'px',
            value: '10'
        })
    }
    
    setData(data){
        this.data = data;
    }
}

export default new StyleGenerator;

Helpers.js

const getSpacingProperty = data => {
    return data.value + data.type;
}

export {
    getSpacingProperty
}