Я бы сделал это в три раза.
- Инкапсулировать javascript в небольшие четко определенные классы в пространствах имен
- Классы Javascript должны иметь HTML, который им требуется «внедрить» в качестве зависимости, что позволяет модульное тестирование вне браузера
- Перенесите на сервер как можно больше функциональных возможностей на стороне клиента и используйте концепцию, известную как AHAH
Интервал имен Javascript
Это может быть легко достигнуто и было рассмотрено в других статьях, таких как этот Есть ли "краткий" способ сделать пространство имен в JavaScript?
Небольшие инкапсулированные классы
Javascript-код, так же как и код на стороне сервера, должен быть хорошо инкапсулирован небольшими связными классами и методами. Каждый класс находится в отдельном файле, названном вместе с пространством имен, в котором он находится, например: MyCompany.SomePackage.MyClass.js.
Избыточные HTTP-запросы к каждому файлу могут быть сохранены с помощью , объединяя и минимизируя эти файлы классов во время сборки.
Инверсия зависимостей в Javascript
Таким образом, вместо того, чтобы выбирать элементы, с которыми вам нужно работать, внутри вашего класса, вот так:
var MyNamespace.MyClass = function() {
var elementINeed = $('#IdOfElementINeed');
}
Вы бы добавили его так:
var foo = new MyNamspace.MyClass($('#IdOfElementINeed'));
var MyNamespace.MyClass = function(incomingDependency) {
var elementINeed = incomingDependency;
}
Этот метод хорошо подходит для тестируемого javscript и разделения проблем с помощью MVC стиля многоуровневого кода.
AHAH и упрощение на стороне клиента
AHAH - довольно старая техника, которая уже довольно давно используется в веб-разработке, хотя она возрождается среди поклонников веб-сайтов из-за ее чистой простоты. Однако эту философию следует воспринимать не только на уровне архитектурной техники, и она должна использоваться в качестве замены для всего вашего клиентского JavaScript, например: проверка, отображение / скрытие динамического содержимого, вычисления и т. Д.
Где вы раньше могли прикрепить событие onClick со сложностью на стороне клиента:
$('#someElement').click(function(){
// insert complex client-side functionality here, such as validating input
// eg var isValid = $(this).val() < minimumCommentLength;
// update page based on result of javascript code
// eg $('#commentTooLong').show();
})
Теперь вы просто запускаете ajax-запрос обратно на сервер, чтобы получить новый HTML, и просто заменяете все или некоторые элементы, которые вас интересуют, как таковые:
$('#addCommentButton').click(function(){
$.ajax({
url: "/comment/add",
context: document.body, success:
function(responseHTML){
$('body').html(reponseHTML);
}});
})
Очевидно, что это тривиальный пример, но при эффективном использовании ЛЮБОЕ событие javascript на странице просто запускает идентичный запрос ajax и замену HTML, что значительно сокращает объем требуемого кода на стороне клиента. Перемещение его на сервер, где его можно эффективно протестировать.
А-а-а-а-а, утверждают, что это неэффективный способ запуска веб-сайта, однако я использовал и видел эту технику на сайтах с доступом к модему 56k, а также в массовых публичных сайтах. Результат, конечно, медленнее, но вы все равно можете совершать круговые поездки за 100 миллисекунд, что практически мгновенно для людей.