Как избежать добавления экспорта модуля JavaScript ES6 в глобальную область для использования в обычных блоках скрипта? - PullRequest
Новая
       0

Как избежать добавления экспорта модуля JavaScript ES6 в глобальную область для использования в обычных блоках скрипта?

0 голосов
/ 24 сентября 2018

Мне до сих пор удавалось избегать хардкорного программирования на JavaScript, но, похоже, это подходит к концу.Готовясь к новому крупному проекту, я пытаюсь разобраться с лучшими практиками в 2018 году. Я много читал о различных модульных подходах и использовал некоторые из них, например модули Dojo на основе AMD.Размышляя о том, как спроектировать свою собственную модульную архитектуру, кажется, что ES6 - верный путь для новой разработки.Пока я понимаю синтаксис импорта / экспорта и получил несколько простых модулей для работы.Но моя нынешняя техника загрузки модулей обратно в HTML и их использования просто «не так».Позвольте мне рассказать о том, что у меня работает.

Модуль foo.js 

import (bar} from '/Scripts/bar.js'

export function foo() {
    bar();
    console.log("I'm in foo");
}

Модуль bar.js 

export function bar() {
    console.log("I'm in bar");
}

index.html 

<head>
    <script type="module">
        import {foo} from "/Scripts/foo.js"
        window.foo = foo;   // save for later but "feels wrong"
   </script>
</head>

<body>
    <script>
        // foo();      // doesn't work - foo by itself is only defined in the module scope
        window.foo();  // unless "stashed" somewhere else
    </script>
</body>

Может быть, это правильная техника (и я нашел более старый вопрос, который в основном был таким же, как у меня ), но мне все еще не кажется, что я должен загрязнять глобальное пространство имен, как это.Если предположить, что это плохо, что еще мне делать?

1 Ответ

0 голосов
/ 24 сентября 2018

Если вы хотите, чтобы функция была доступна глобально, единственный способ добиться этого - поместить ее в глобальную область (AKA объект window).

Немного более приятный способ поместить вещи в глобальную область видимости, однако, это иметь некоторый объект globals, который содержит все ваши глобальные переменные, вместо того, чтобы помещать имена функций / свойств непосредственно в window объект, который потенциально может вызвать конфликты с другими сторонними библиотеками.

Так вы бы сказали globals.foo() вместо window.foo()

...