02
Апр
2021

Как правильно вынести переменные из класса 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". То есть, получается дефолтные значения установить удается, но вот заменять "кастомными" - увы, не выходит.

Возможно ли каким-нибудь наиболее безболезненным способом, решить это дело?

Источник: https://ru.stackoverflow.com/questions/1265013/%D0%9A%D0%B0%D0%BA-%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE-%D0%B2%D1%8B%D0%BD%D0%B5%D1%81%D1%82%D0%B8-%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5-%D0%B8%D0%B7-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0-js

Тебе может это понравится...

Добавить комментарий