Оптимальные скрипты jQuery admin, 2009-05-20 12:22:43
Популярный клиентский JS фреймворк jQuery позволил веб-разработчикам сфокусировать своё внимание с кроссбраузерности на юзабилити и функциональности страниц. Кода стало меньше, скорость разработки возрасла.
При разработке проектов с высокой нагрузкой, мы уделяем выходному коду (HTML, JS, CSS) особое внимание, оптимизируя его размер, так как это экономит канал, увеличивая удобство использования и снижая нагрузку на сервер. В одном из проектов нам удалось снизить объём выходного кода более чем в 4 раза.
В этой статье поделюсь некоторыми очевидными приёмами испоьзования jQuery. С помощью них можно не только писать собственные скрипты короче (а значит и понятнее, и быстрее), но и оптимизировать скрипты, которые были добавлены извне. Статья послужила началом болга и будет несомненно расширяться.
| вариант до |
вариант после |
комментарий |
$(...).bind('click', function(){
}); |
$(...).click(function(){
}); |
метод bind() сделан для расширения функциональности пользовательскими событиями. Большинство стандартных событий в jQuery уже есть. |
$(...).attr('value');
$(...).attr('value', content); |
$(...).val();
$(...).val(content); |
Тот же пример использования готовых методов. |
$.get(url, function(data){
$(layout).html(data);
}); |
$(layout).load(url); |
В jQuery пожалуй самые изящные механизмы вызова ajax, не нужно забывать про них. |
$(...).css('display', 'none');
$(...).css('display', 'block'); |
$(...).hide();
$(...).show(); |
действие то же, изящность и простота - очевидны. |
{'title':$('#title').val(),
'www':$('#www').val(),
'description':$('#description').val()} |
{title:$('#title').val(),
www:$('#www').val(),
description:$('#description').val()} |
при описании объектов, даже создаваемых "на лету", заключать в кавычки название свойств не обязательно. |
$('ul li#' + n);
$('ul li#1').show(); |
$('ul li').eq(n);
$('ul').first('li').show(); |
номер тега в контейнере позволит убрать свойство id у каждого элемента. Мы стремимся к постоте кода. |
$(this).width(200);
$(this).css('color', '#ff0000');
$(this).show(); |
$(this).width(200).css('color', '#ff0000').show(); |
помним про то, что большинство методов возвращает объект. |
$(this).css('color', '#ff0000');
$(this).css('border', '1px solid #0000ff'); |
$(this).css({color : '#ff0000', border : '1px solid #0000ff'}); |
помним про полиморфизм методов. |
Тэги статьи: jQuery оптимизация
| | 
мы рекомендуем VPS хостинг:  |
