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

Question

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

1

Мне до сих пор удалось избежать хардкорного программирования 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>

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

Jim Hanks 24 сен. 2018, в 18:35

Источник

0

Если вы хотите, чтобы эта функция была доступна глобально, единственный способ добиться этого - поместить ее в глобальную область. Если я не понимаю ваш вопрос? Немного более приятный способ поместить вещи в глобальную область видимости состоит в том, чтобы иметь какой-то globals объект, который содержит все ваши глобальные переменные, вместо того, чтобы помещать фактические имена функций / свойств в window которое потенциально может вызвать конфликты. Таким образом, вы бы сказали, что globals.foo() вместо window.foo()
mhodges 24 сен. 2018, в 16:17
0

Поместите его в глобальное пространство имен, как до ES6?
Dave Newton 24 сен. 2018, в 16:25
0

@ Mhodges: Да, это по сути вопрос. Вы правы, есть и другие контейнеры, которые могут быть использованы, кроме window такие как хранилище простых свойств, как вы говорите, или «пространство имен» или что-то еще. Мне казалось, что импорт модуля должен представлять собственную область видимости на этом уровне, и мне просто не хватало правильного синтаксиса (и я сделал должную осмотрительность / поиск, прежде чем спрашивать). Но звучит так, будто это не совсем так. Я думаю, я должен принять комментарий @mhodges в качестве ответа.
Jim Hanks 24 сен. 2018, в 16:35
1

@JimHanks Если вы используете загрузчик пакетов / модулей, такой как Webpack, вы можете делать то, что пытаетесь. Каждый файл js будет содержать свой список импорта, который загружается только при загрузке этого файла. Ваш глобальный охват не загрязняется, и все является автономным. Если это то, что вы пытаетесь достичь, я настоятельно рекомендую этот метод. Однако, если вы не хотите использовать загрузчик пакетов / модулей, я думаю, что вашим лучшим выбором будет использование вашего собственного пространства имен с глобальным объектом.
mhodges 24 сен. 2018, в 16:41
0

@JimHanks Я бы также добавил, что (в 2018 году) для проектов среднего и крупного размера использование загрузчика пакетов / модулей - это абсолютно верный путь. Webpack на сегодняшний день является самым простым и эффективным на сегодняшний день. Там есть отличные руководства о том, как встать и бежать.
mhodges 24 сен. 2018, в 16:43
0

@mhodges: Mhodges: согласен. Я еще не использую пакет, но я уверен, что буду, и, может быть, это «ближе к истине» о том, что мне все еще не хватает. Но если вы можете отправить свой первый комментарий в качестве ответа, я приму это.
Jim Hanks 24 сен. 2018, в 17:02

Показать ещё 4 комментария

Теги:

javascript

es6-modules

1 ответ

Ещё вопросы

Если вы хотите, чтобы эта функция была доступна глобально, единственный способ добиться этого - поместить ее в глобальную область. Если я не понимаю ваш вопрос? Немного более приятный способ поместить вещи в глобальную область видимости состоит в том, чтобы иметь какой-то globals объект, который содержит все ваши глобальные переменные, вместо того, чтобы помещать фактические имена функций / свойств в window которое потенциально может вызвать конфликты. Таким образом, вы бы сказали, что globals.foo() вместо window.foo()
Поместите его в глобальное пространство имен, как до ES6?
@ Mhodges: Да, это по сути вопрос. Вы правы, есть и другие контейнеры, которые могут быть использованы, кроме window такие как хранилище простых свойств, как вы говорите, или «пространство имен» или что-то еще. Мне казалось, что импорт модуля должен представлять собственную область видимости на этом уровне, и мне просто не хватало правильного синтаксиса (и я сделал должную осмотрительность / поиск, прежде чем спрашивать). Но звучит так, будто это не совсем так. Я думаю, я должен принять комментарий @mhodges в качестве ответа.
@JimHanks Если вы используете загрузчик пакетов / модулей, такой как Webpack, вы можете делать то, что пытаетесь. Каждый файл js будет содержать свой список импорта, который загружается только при загрузке этого файла. Ваш глобальный охват не загрязняется, и все является автономным. Если это то, что вы пытаетесь достичь, я настоятельно рекомендую этот метод. Однако, если вы не хотите использовать загрузчик пакетов / модулей, я думаю, что вашим лучшим выбором будет использование вашего собственного пространства имен с глобальным объектом.
@JimHanks Я бы также добавил, что (в 2018 году) для проектов среднего и крупного размера использование загрузчика пакетов / модулей - это абсолютно верный путь. Webpack на сегодняшний день является самым простым и эффективным на сегодняшний день. Там есть отличные руководства о том, как встать и бежать.
@mhodges: Mhodges: согласен. Я еще не использую пакет, но я уверен, что буду, и, может быть, это «ближе к истине» о том, что мне все еще не хватает. Но если вы можете отправить свой первый комментарий в качестве ответа, я приму это.

mhodges · Accepted Answer · 2018-09-24T14-40-00.000Z

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

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

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