Как разбить js код на несколько файлов

Обновлено: 29.06.2024

Как мне разделить код? Я могу придумать несколько способов, например, использовать иерархию пространств имен или расширить объект снаружи на window.myGlobalNamespace.additionalFunc = function () . Каковы другие способы? Каковы плюсы и минусы? Какой из них считается лучшей практикой?

И люди могут делать

чтобы изменить поведение моего кода!

Здесь есть две проблемы:

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

Если это не так, то есть, если мы хотим, чтобы доступ был доступен, мы должны сделать его общедоступным. Тогда пользователь сможет его изменить!

Что еще, все публичные функции могут быть изменены и заменены. Я не хочу, чтобы это произошло.

Я не вижу, как RequireJS решает эти проблемы. Может кто-то пролить свет?

ОТВЕТЫ

Ответ 1

Есть только два способа получить JavaScript в HTML:

Inline - <script> some JavaScript </script>
Ссылка - <script src='main.js'></script>

Я знаю, что это очевидно, но нам нужна эта общая точка для следующего.;)

JavaScript не имеет возможности "импортировать" другие файлы JavaScript в него. Все "импорт" выполняется в HTML. Вы можете сделать это несколькими способами:

Свяжите каждый в отдельности в HMTL

Динамически связать их через некоторый JavaScript

Библиотека, например RequireJS. RequireJS использует API определения асинхронного модуля (AMD). Это механизм JavaScript для определения модулей, так что модуль и его зависимости могут быть асинхронно загружены.

Это import, чтобы рассмотреть причины разделения JavaScript на отдельные файлы.

Поддержание работоспособности - становится проще работать на одной части за раз
Чтение - если все находится в одном большом файле, очень сложно понять, что есть
Отдел труда - проще иметь несколько разработчиков, работающих с несколькими файлами, а не с одним большим.
Повторное использование - все ваши функции могут быть разбиты на высокосвязные модули

Отдельные файлы JavaScript НЕ делать вещи Частные, закрытие делает вещи частными.

Теперь, рассмотрим в конце дня, когда все готово к производству, самое лучшее, что вы могли бы сделать, это оптимизировать свой JavaScript, объединив его все в один файл, так что у пользователя есть только один файл для загрузки.

При работе с частными переменными в JavaScript вы в какой-то момент захотите получить к ним доступ.

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

Позвольте мне проиллюстрировать некоторый код.

module-test.html и main.js(слияние first.js, second.js и main.js для более простого тестирования)

Ответ 2

Похоже на то, что вам нужно, это требование JS. Я использую это почти во всех своих сборках. В качестве альтернативы вы можете взглянуть на раскрывающийся шаблон модуля в качестве резервного, но для того, что вы после него звучат, как "Требование", гораздо более подходит.

Ответ 3

Защищенные переменные в javascript могут быть достигнуты путем передачи в защищенные переменные в качестве зависимости. Подкласс должен быть создан внутри родителя, поскольку только он имеет доступ к защищенным переменным. Пример jsFiddle

ПРИМЕЧАНИЕ. Как заметил Чарльз У., этот шаблон работает только тогда, когда protectedState является объектом. Если бы это была строка /int, она была бы передана по значению, и изменения, сделанные в подклассе, не были бы видны из копии родителей.

Ответ 4

Модуляция (разделение кода) - это не то же самое, что защита данных (скрытие данных).

RequireJS решает проблему модуляции, а не проблему защиты данных. Или, по-другому. Независимо от того, какие проблемы существуют при попытке защитить данные и любые решения для защиты данных, эти проблемы и решения одинаковы с или без RequireJS.

RequireJS реализует все механики для задания зависимостей между модулями, для загрузки этих зависимостей только по мере необходимости, чтобы не перезагружать вещи, которые уже были загружены, во избежание загрузки вещей, которые не требуются вообще, быстро меняют расположение модулей, имеют избыточность и т.д.

После развертывания, если вы обнаружите, что RequireJS слишком тяжело, используйте almond библиотеку.

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

Если вам нужна модуляция (т.е. вы хотите, чтобы ребенок был закодирован отдельно от родителя), я не считаю, что это возможно в JavaScript. Было бы возможно, чтобы дети и родители работали в одном и том же закрытии, но тогда это не было бы модульным. Это верно с или без RequireJS.

Если нет, то есть, если мы хотим, чтобы доступ был доступен, мы должны сделать его общедоступным. Тогда пользователь сможет его изменить!

Если вы хотите предотвратить назначение parentPrivate , вы можете использовать Object.freeze() в пространстве имен, содержащем parentPrivate .

Однако я не знаю, насколько он поддерживается различными браузерами. И если то, что находится в parentPrivate , само по себе является объектом, а не примитивным значением, оно также необходимо заморозить, если вы не хотите, чтобы он был изменен клиентами вашего кода. И как только объект заморожен, он замораживается для всех, поэтому модуль, который владеет объектом, не получает специальной обработки для его модификации. И замораживание ничего не скрывает.

Или вы можете использовать сеттеры и геттеры, как в этом примере RequireJS:

Если модуль импортируется как parent , тогда parent.unwritable не может быть записано, но сам модуль все равно может изменить значение, возвращаемое письмом, на writable . Обратите внимание, что если возвращаемое значение Getter является объектом, а не примитивным значением, этот объект может быть изменен вызывающим.

Опять же, это правда, используете ли вы RequireJS или нет. Решения одинаковы, проблемы одинаковы и т.д.

Я создал приложение javascript со всем кодом в одном файле. Приложение немного выросло, и я думаю, что пришло время разбить его на несколько файлов, но мне трудно понять, как это сделать. Я думаю, что проблема заключается в том, как я решил создать приложение, которое использует следующий шаблон:

Даже если бы все модули были слабо связаны и управляемы событиями, я все еще не знаю, как бы я разбил это на несколько файлов, учитывая зависимость каждого модуля от общих функций /переменных. У кого-нибудь есть предложения?

Основная идея заключается в том, что отдельные файлы JS добавляются в один и тот же модуль с кодом, подобным следующему:

Где в каждом файле JS, если MODULE уже определено (из другого файла JS), вы добавляете в него, иначе создаете его. Вы можете настроить его так, чтобы (в основном) не имело значения, в каком порядке включены различные файлы.

В статье подробно рассматриваются несколько вариантов, и, конечно, вы, вероятно, придумаете свои собственные настройки .

Чтобы не вводить в заблуждение, но, исходя из фона C ++, я попытался создать нечто, напоминающее что-то вроде пространства имен c ++, способом, описанным ниже. это работает, но я хотел бы знать, является ли это приемлемым шаблоном для ОП?

Вы можете поместить общие функции и общие модули в объект myApp, чтобы они не загрязняли глобальное пространство имен, но к ним можно было получить доступ где угодно, не находясь внутри одного и того же замыкания.

Затем вы можете определить их в любом файле и использовать их в любом файле.

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

Мое любимое решение - использовать сценарии на стороне сервера, чтобы включить другие файлы в мой «основной» файл. Например, используя Perl Template Toolkit:

Есть ли способ разделить эти функции на несколько файлов, хотя они все в основном зависят друг от друга?

Я создаю игру html5, и я хочу отделить большую часть кода, например, мне бы хотелось, чтобы код для рисования объектов находился в определенном файле, код для обновления состояния игры в другом файле и так далее, чтобы я мог по-прежнему доступ ко всем глобальным переменным.

Есть ли способ сделать это без большого количества хлопот или переписывания всего кода?

спросил(а) 2013-05-25T16:08:00+04:00 8 лет, 6 месяцев назад

Многие люди боролись с этим, как вы делаете прямо сейчас.

Старый способ сделать это должен был иметь объект пространства имен, например MYAPP . Таким образом, единственной глобальной переменной был MYAPP , и вы поместили на нее все свои функции/переменные, например:

Основная проблема с javascript на стороне браузера заключается в том, что он не имеет "включить" или "требует", как это делают другие серверные языки. Это затрудняло "включение" JS файла (и, следовательно, его функций/переменных), где вы этого хотели.

В настоящее время люди думали об этом и решали проблему главным образом двумя способами:

Способ AMD: определение асинхронного модуля позволяет вам асинхронно загружать другие JS файлы, тем самым имея "браузер" на стороне браузера. Лучший пример такого типа библиотеки - require.js. Асинхронная загрузка хороша для целей разработки, но производственный код должен быть предварительно скомпилирован для обеспечения производительности. Способ CommonJS: используя метод node.js, вам синхронно требуется модуль, а модуль определяется с module.exports объекта module.exports . Однако перед использованием кода в браузере требуется компиляция. Лучший пример такой библиотеки - это браузер. Обратите внимание, что часть компиляции может быть почти бесшовной с наблюдателем. ответил(а) 2013-05-25T16:22:00+04:00 8 лет, 6 месяцев назад

Если вам действительно нужно получить доступ к этим глобальным переменным извне, есть еще много способов модульного кода. Здесь один:

Но вам явно придется немного переработать ваш код.

Вариант заключается в определении подмодулей, так что "глобальные переменные" менее глобальны. Как правило, это более управляемо, если вы не подвергаете слишком много: если у вас есть 20 файлов, и любой LOC любого файла может получить доступ к любой переменной, определенной в другом месте, будет немного сложно узнать, что произойдет.

ответил(а) 2013-05-25T16:13:00+04:00 8 лет, 6 месяцев назад

Взгляните на пространство имен:

Пространство имен - это концепция шаблона модуля.

Используя многоуровневый подход к структуре кода, вы переходите от абстрактного к более конкретным объектам для структурирования вашего кода. Обычно вы начинаете с всеобъемлющего объекта.

Создание такой всеобъемлющей структуры позволяет использовать один глобальный. Теперь вы можете разбить свой код на несколько модулей (разных) файлов, добавив свой код в объект JSApp .

Все, что вам нужно сделать для реализации, - это вызвать все, что вам нужно, в $(document).ready() вызове $(document).ready() .

Конечно, есть проверки, которые должны быть реализованы до того, как вы обойдете все невообразимые объекты, присваивающие пространство имен, даже если вы ДУМАЕТЕ, что оно должно быть там.

мое приложение использует этот основной объект, как вы видите, большая часть работы выполняется в этом методе. проблема в том, что этот объект станет слишком большим, если я захочу записать его все в один файл. и код будет трудно отлаживать. есть ли какой-нибудь способ разбить этот объект на несколько файлов (например, каждую функцию в одном файле)? Я также хочу иметь возможность получать доступ и изменять переменные displayArray, userOptions и query из этих функций.
любые советы приветствуются. спасибо :)

Я часто чувствую необходимость разбить код Objective-C на несколько файлов для лучшей читабельности. Я хочу избежать занятий и позвонить им. Я хочу простой импорт (как в php). Если бы кто-нибудь мог сослаться на рабочий пример.

Ты можешь! Напишите несколько сценариев .js, а затем вставьте их в файл html следующим образом:

Это хороший пример того, как это сделать. ( источник )

далее вы можете сделать вот так:

Вы можете переместить все функции в отдельные файлы и добавить их в прототип вашего приложения.

файл initialize.js:

файл initilize.js:

Это решение будет загрязнять ваши глобальные пространства имен всеми функциями из внешних файлов. Так что, если это более крупный проект, вы должны начать использовать и AMD решение, как requirejs :

файл initialize.js:

файл initilize.js:

Вы можете определить приложение 'class' в одном файле, а затем использовать прототип для добавления каждой функции в отдельные файлы, например

Я нашел много примеров, а также попробовал сам разбить модуль на несколько файлов. Так что я получаю его, очень удобно. Но иногда практично разделить класс по той же причине. Скажем, у меня есть пара методов, и я не хочу втискивать все в один длинный файл. Я ищу что-то похожее на частичное.