Надеюсь этим постом дать начало традиции делиться не только своими наработками (библиотеки, фреймворки, отдельные функции), но и стилем написания кода, а точнее структурированием проекта.
Буквально пару дней назад ко мне обратился мой старый клиент с просьбой обновить небольшое веб приложение, которое я делал около года назад. Когда я открыл код, я там буквально ничего не понял. Весь проект был засунут в одну функцию, срабатывающую по domready. Там же были объявлены переменные и функции, в один уровень (хотя и в самом верху, как бы соблюдая правила хорошего тона). Первой же мыслью было "переписать всё нахер". Переписал я это всё дело, используя готовый набор инструкций, которые я выдумал пять проектов назад и тупо копировал в дальнейшем, так как было лень что-то новое придумывать.
Хочу показать, как я последнее время структурирую код, делая его более понятным, доступным везде (используя единое пространство имен) и масштабируемым. При этом, не добавляется никаких сложных вещей (по сути те же переменные с функциями), не нужно затачивать свой код "под что-то".
Скажу честно, я не понимаю как применять всякие MVC на практике, да и код из примеров часто кажется слишком перегруженным. Часто намного проще изобрести свою собственную структуру, заточенную под проект, при этом прекрасно понимая, что, где и как работает.
Как я уже сказал, все функции и данные хранятся в одном пространстве имен. Скажем, проект вашего заказчика называется "Project Name".
Перед задействованием каких-либо скриптов, создаём пространство имен:
<script>
window.projectName = window.pn = {};
</script>
Затем добавляем скрипты в произвольном порядке. Файлы скриптов именуются так:
pn.something.js
Файл скрипта начинается c объявления строгого режима и подпространства имен:
"use strict";
pn.something = {
}
После этого инициализируем события (см. репозиторий внизу)
Минимальный список файлов:
pn.data.js
Здесь хранятся данные и методы, которые манипулируют этими данными, скажем:
pn.data = {
i: 0,
incrementI: function() { this.i++ }
}
В этот объект так же помещаются данные, которые мы получили в процессе работы скрипта:
pn.ajax.getSome( function( some ) {
pn.data.some = some;
})
pn.ajax.js
Здесь хранятся методы для получения данных с сервера. Сюда же можно кинуть урлы и пр. вещи, относящиеся к исключительно к аяксу
pn.events.js
Здесь инициализируется страница объявляются события (подробнее с несколькими комментариями см. в репо)
pn.ui.js
Функции, отвечающие за интерфейс, к примеру:
pn.ui = {
renderMenu: function() {...}
}
pn.utils.js
Здесь всякие вспомогательные функции, например, получение массива, с нулями. Данные из pn.data здесь не модифицируются, а функции только возвращают что-то.
Сделал для ознакомления небольшой репозиторий:
https://github.com/finom/AG-JS-Boilerplate
Информации там немного, но общая идея, надеюсь понятна. Со временем буду обновлять, в том числе, и для себя, так как память часто подводит.
Хотя я не рассказал ничего особенно нового, не применил каких-нибудь сложных заумных штук, я надеюсь, новичкам будет полезно ознакомиться с простейшим набором универсальных приёмов, описанных выше, несколько уменьшая соотношение говнокод/код.