Как организовать код JavaScript в проекте для удобства сопровождения?

Question

Я в основном разработчик PHP, но в последнее время я играю с большим количеством JavaScript, в основном в jQuery.

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

Код обрабатывает вызовы AJAX и манипуляции с DOM.

Answer 1

Разделение интересов

Это означает, что у вас есть три типа файлов: HTML, CSS и JS.

Вы не смешиваете HTML, CSS или JS.Каждый из них находится в своем собственном файле.

Просто сохранив все отдельно и никогда , используя встроенный JavaScript или встроенный CSS, вы можете решить большинство проблем организации кода.

Другая техника - это упаковщики и минификаторы.

Мои упаковщики могут выбрать browserify (js) и меньше (css)

Упаковщики означают, что у вас есть весь код во многих файлах / модуляхразделен на хороший дизайн.Тогда, поскольку отправка большого количества маленьких файлов стоит дорого, вы используете упаковщик времени сборки, чтобы превратить все ваши js в один файл js и все ваши css в один файл css.

Что касается самого JS, я склонен идти дальше ииспользуйте загрузчик модулей.Browserify - это и упаковщик, и загрузчик модулей.

Загрузчики модулей означают, что вы определяете небольшие модули и загружаете / запрашиваете их, когда вам нужно и где вам нужно.

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

Answer 2

Вы можете использовать CommonJS «require» для разделения кода javascript во многих файлах, а затем использовать browserify или Webpack .Другой вариант - Cor , язык, который компилируется в javascript, ориентированный на организацию, чистоту и опыт разработки.