иметь отдельные объекты js в проекте веб-пакета, которые взаимодействуют с одной и той же переменной

Question

Я хотел знать, возможно ли это, комбинируя webpack и js 'oop, чтобы получить функциональный код, подобный представленному ниже.Цель состоит в том, чтобы иметь возможность изолировать каждый из элементов моего сайта (боковая панель, основной, ...) в разных файлах, обеспечивая при этом их взаимодействие.

Возможно ли это с webpack и чистым js или нет?

import ApplePicker from "./my_path/applePicker.js";
import NiceFarmer from "./my_path/niceFarmer.js";

const orchard = function () {
    const appleNumber = 10;

    const jack = new ApplePicker();
    const daniel = new NiceFarmer();

    jack.eatAnApple();
    daniel.eatAnApple();

    // appleNumber have to be now === 2

}



// Example of applePicker.js structure

const ApplePicker = function () {

    this.eatAnApple = function () {
        // Do something
    }

}

export default ApplePicker;

Answer 1

да, вы можете.

Если вы просто хотите использовать переменную из applePicker.js:

// applePicker.js
export const apples = 10

Если вы хотите иметь возможность переназначить эту переменную, вы можете добавить простой фасадный слой поверхчто:

// applePicker.js
let apple = 5

export function getApple() {
   return apple;
}

export function setApple(newValue) {
   apple = newValue;
}

Еще лучше, если вы хотите, чтобы другие функции "срабатывали" при изменении переменной, используйте шаблон Observer