Презентационные JS против функциональных JS: разделить их?Общая архитектура?

Question

Это общий вопрос.

Очень часто мне нужно написать JavaScript для веб-страниц.Имея в виду лучшие практики, ненавязчивый js и т. Д. У меня есть JavaScript в отдельных файлах * .js.Каждая страница получает свой собственный файл JS.В последнее время меня несколько беспокоило сочетание программного кода с функциональным кодом, с которым я всегда сталкиваюсь.

Так, например, я бы назначил обработчик .click для элемента.При этом щелчке элемент должен изменить свой внешний вид, и на сервер должен быть сделан вызов AJAX.Итак, прямо сейчас, я бы сделал обе эти вещи внутри этого .click обработчика.Это может стать громоздким в зависимости от того, что должно быть достигнуто.Когда я возвращаюсь к этим блокам кода после того, как не прикасался к ним в течение недели, я часто чувствую, что для отслеживания всех строк кода требуется слишком много времени, когда мне нужно только что-то исправить с помощью внешнего вида.

В любом случае, есть идеи по архитектуре / дизайну для презентационных js против функциональных js ?Хранить их в одном файле, но разбить на отдельные функции?Разбить их на 2 отдельных файла?Оставить их в покое?

Answer 1

Я считаю полезным иметь три файла JS на каждой динамически генерируемой странице.Общие функции, которые используются повторно везде, специфичные для проекта функции, которые используются во всем проекте, и файл js для конкретной страницы.Таким образом, вы получите представление о том, что является «многоразовым», а что нет.Это также побуждает вас «продвигать» свой код.

По мере того, как вы «продвигаете» его, вы обнаружите, что все больше и больше разделяете его на пользовательский интерфейс или поведение.По мере разделения большего количества материала вы можете включить 6 файлов или просто разбить каждый файл структурой пакета, как вы предлагали ранее UIFunctions (). DoStuff () ... Однако, если вам нужно добавить префикс к своему PageName, вы непродвинул свой код, и, возможно, пришло время сделать это: -)

Вот как я это делал.

Answer 2

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

function domyUIstuff(myevent, myselector)
{
// stuff here
};
function domyBehaviorStuff(myevent, myselector)
{
//dostuffhere
};
$(selector).click(function(e)
{
   domyUIstuff(e,$(this));
   domyBehaviorStuff(e,$(this));
};

Примечание: я делаю вещи отдельно (я делаю много asp.net) от разных пользовательских элементов управления - я создаю файл myusercontrol.js для моего myusercontrol.ascx, а также файл mypage.js для моей страницы .aspx, который имеет тенденцию сокращать «шум» при отладке - я помещаю свои «универсальные» функции в файл подкачки, которые я мог бы вызывать из своих элементов управления, такие как универсальные обработчики сообщений ajax или универсальные «служебные» функции.