Как правильно вынести переменные из класса js?
Имеется вот такой вот класс:
class Component {
constructor(configuration) {
const defaultConfig = {
title: "FEAR",
selectors: {
badge: "BEAR",
},
};
let options = Object.assign({}, defaultConfig, configuration);
Object.keys(defaultConfig).forEach((prop) => (this[prop] = options[prop]));
this.init = this.init.bind(options);
this.init();
}
init() {
// здесь записываю в переменные для удобства,
// "полученные" из конструктора ключи обьекта
const CURRENT_TITLE = this.title;
const CURRENT_BADGE = this.selectors.badge;
// далее использую вышесозданные переменные,
// где требуется, например в функциях, методах, etc.
const myFunction = () => {
console.log(`${CURRENT_BADGE} ${CURRENT_TITLE}`); // Выводит: BEAR FEAR
};
myFunction();
}
}
new Component();
Проблема заключается в том что при подобном подходе, через некоторое время, количество переменных начинает увеличиваться и возникает дикое желание вынести переменные в отдельный файл, чтобы уже оттуда получать их и использовать. Да, и в любом случае намного удобнее работать с большим кодом, когда имеется возможность разбить его на более мелкие фрагменты. В коде выше, комментариями отмечены указанные в теле вопроса — переменные.
При подобной модификации кода:
import defaultConfig from "./defaultConfig";
import { CURRENT_TITLE, CURRENT_BADGE } from "./constans";
class Component {
constructor(configuration) {
let options = Object.assign({}, defaultConfig, configuration);
Object.keys(defaultConfig).forEach((prop) => (this[prop] = options[prop]));
//this.init = this.init.bind(options);
this.init();
}
init() {
const myFunction = () => {
console.log(`${CURRENT_BADGE} ${CURRENT_TITLE}`);
};
myFunction();
}
}
Почти всё работает, но на деле не всё так просто и по сути работа скрипта нарушена.
Вот содержимое файла - "./defaultConfig":
export default {
title: "FEAR",
selectors: {
badge: "BEAR"
}
};
А это содержимое файла "./constans":
import defaultConfig from "./defaultConfig";
export const CURRENT_TITLE = defaultConfig.title;
export const CURRENT_BADGE = defaultConfig.selectors.badge;
Насколько я понимаю, в данном случае, всегда будут действовать дефолтные параметры, и попытки перезаписать какие-либо свойства объекта - обречены на провал. То есть, например, обновляем содержимое "title" при вызове "класса":
new Component({
title: "WATER"
});
Желаемый результат конечно, в данном случае: "WATER", но к сожалению, в консоль выводится дефолтное значение, т.е "FEAR". То есть, получается дефолтные значения установить удается, но вот заменять "кастомными" - увы, не выходит.
Возможно ли каким-нибудь наиболее безболезненным способом, решить это дело?