Как разделить очень длинный js-файл на несколько штук?

Question

[Ник]

Добрый день.
Выдали на работе задачу - сделать карту для мониторинга сети, используя API Яндекс.Карт.
В итоге - на данный момент в файле уже 1,5к строк кода, что дико затрудняет процесс.
Вижу два выхода:
1. Пользовать какие-нибудь препроцессоры и нужные куски подключать через какой-нибудь include (аля Jade для html или SASS для CSS). Однако на выходе мы все равно будем получать офигенно огромный файл, плюс - если кто-то еще кроме меня будет ковыряться в этих картах, есть вероятность что при случайном удалении какой-либо строки - сломается вся карта вообще. Из чего вытекает второй выход:
2. Изначально разделить весь длинющий код на логичные составляющие, и если кто-то накосячит, то сломается хотя бы что-то одно, а не вся карта. Такая себе модульность в общем.

Исходя из этого, собственно, вопросы:
1. Какие посоветуете юзать препроцессоры/фреймворки/библиотеки/чтонибудьматьегочтобработало дабы подключать нужные куски кода тогда, когда нужно?
2. Как грамотно поделить файл, если весь код вообще пишется в одном огромном ините?
ymaps.ready(init);

function init () {
....
}

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

Comments

[Иван]

оффтоп: а оно не будет потом при использовании адово лагать?

[Ник]

Иван: хотелось бы чтобы нет, потому и спрашиваю, в общем-то.

Answer 1

[MNB]

1. Берем шииииииирокую железную линейку и фигачим себе по пальцам, до тех пор пока не научимся разбивать большой код на части еще на этапе написания.
2. Открываем "Мартин Фаулер. Рефакторинг. Улучшение существующего кода". Читаем от корки до корки.
3. Закрываем книгу.
4. Рефакторим код.
5. Читаем предыдущий ответ (про webpack, browserify+commonjs, requirejs) очень очень внимательно

Comments

[Ник]

Линеечку можете прибрать куда-нибудь в интересное место, я вроде как вполне ясно указала, что с js дела не имела и данный факт моего работодателя совершенно не волнует =)

[MNB]

Это касается не только JS, но и любого другого языка.

[Ник]

MNB: я задала вопрос касаясь только JS, поэтому ваш комментарий является абсолютно неинформативным, за исключением названия книги, за что благодарю =)

[MNB]

Можно не благодарить. Достаточно "Отметить как решение" ;)

Answer 2

[timfcsm]

webpack, browserify+commonjs, requirejs... первое посложнее, 2 и 3 проще. но в js всё-таки более-менее разбираться надо, чтобы что-то нормальное получилось

Answer 3

[Игорь Воронов]

Вам ничто не мешает разделить код на множество файлов (так, как посчитаете нужным. Если Вы опытный программист, то поймете, как это сделать), поместить их, скажем, в условную директорию "dev", вести разработку в ней, а в релиз давать минифицированный общий файл. Просто объедините их и никаких проблем. Единственное, что изменится, так это количество тэгов script в релизе.
И не нужны здесь никакие фреймворки! Что за привычка пихать вовсюда кучу объемных фреймворков/библиотек на каждый чих? Объединить -> минифицировать -> радоваться жизни.

P.s. "Как грамотно поделить файл, если весь код вообще пишется в одном огромном ините?
ymaps.ready(init);" - никто Вас не заставляет писать все в этой ф-ции. Вы можете в ней вызывать другие ф-ции из подключаемых на странице скриптов и т.п.