Просто, чтобы держать интересным и закрыть мой окончательный открытый вопрос, решение, которое реализует ниже функциональность в хорошо организованной манере с достойной архитектурой, получает хорошую награду. Полный код находится на jsfiddle, и вы можете задать любые вопросы:)
Как вы обычно организовываете сложные веб-приложения, которые чрезвычайно богаты на стороне клиента. Я создал надуманный пример, чтобы указать, какой тип беспорядка легко войти, если для больших приложений не удается хорошо справиться. Не стесняйтесь изменять/расширять этот пример, как вы пожелаете - http://jsfiddle.net/NHyLC/1/
Пример в основном отражает часть публикации комментариев на SO и выполняет следующие правила:
- Должно быть минимум 15 символов, после того, как несколько мест обрезаны к одному.
- Если нажата кнопка
Add Comment, но размер меньше 15 после удаления несколько пробелов, затем показать всплывающее окно с ошибкой. - Укажите количество оставшихся символов и суммировать с цветовым кодированием. Серый указывает на небольшой комментарий, коричневый цвет указывает на средний комментарий, оранжевый большой комментарий и красное переполнение комментариев.
- Один комментарий может быть представлен только каждые 15 секунд. Если комментарий представленный слишком рано, показывает всплывающее окно с соответствующим сообщением об ошибке.
Несколько проблем, которые я заметил в этом примере.
- В идеале это должен быть виджет или какая-то упакованная функциональность.
- Такие вещи, как комментарий за 15 секунд и минимум 15 символов, относятся к некоторым политикам приложения, а не к встроенному внутри каждого виджета.
- Слишком много жестко заданных значений.
- Отсутствует организация кода. Модель, Представления, Контроллеры объединены вместе. Не то, чтобы MVC - единственный подход для организации веб-приложений с богатой клиентской стороной, но в этом примере их нет.
Как бы вы это сделали? Применяя небольшой MVC/MVP на этом пути?
Вот некоторые из соответствующих функций, но это будет иметь больше смысла, если вы увидели весь код на jsfiddle:
/**
* Handle comment change.
* Update character count.
* Indicate progress
*/
function handleCommentUpdate(comment) {
var status = $('.comment-status');
status.text(getStatusText(comment));
status.removeClass('mild spicy hot sizzling');
status.addClass(getStatusClass(comment));
}
/**
* Is the comment valid for submission
* But first, check if it all good.
*/
function commentSubmittable(comment) {
var notTooSoon = !isTooSoon();
var notEmpty = !isEmpty(comment);
var hasEnoughCharacters = !isTooShort(comment);
return notTooSoon && notEmpty && hasEnoughCharacters;
}
/**
* Submit comment.
* But first, check if it all good!
*/
$('.add-comment').click(function() {
var comment = $('.comment-box').val();
// submit comment, fake ajax call
if(commentSubmittable(comment)) {
..
}
// show a popup if comment is mostly spaces
if(isTooShort(comment)) {
if(comment.length < 15) {
// blink status message
}
else {
popup("Comment must be at least 15 characters in length.");
}
}
// show a popup is comment submitted too soon
else if(isTooSoon()) {
popup("Only 1 comment allowed per 15 seconds.");
}
});
Изменить 1:
@matpol Спасибо за предложение для объекта-оболочки и плагина. Это действительно будет большим улучшением по сравнению с существующим беспорядком. Однако плагин не является независимым, и, как я уже упоминал, он будет частью более сложного приложения. Широкие политики приложений на стороне клиента/сервера будут диктовать такие вещи, как минимальная/максимальная длина комментария, как часто может комментировать пользователь и т.д. Разумеется, плагин может получать эту информацию в качестве параметров.
Кроме того, для приложения с богатым клиентским интерфейсом данные должны быть отделены от своего представления html, так как многие серверные округления могут быть сохранены, так как приложение поддерживает данные, и вещи могут храниться локально и периодически обновляться на сервере или на интересные события внутри самого приложения (например, когда окно закрыто). Вот почему мне не очень нравится плагин. Он будет работать так же, как и в пакетном представлении, но он все равно будет сосредоточен вокруг DOM, что будет проблематичным, если у вас есть 20 таких плагинов в приложении, что не является абсурдным числом любыми способами.
