Чудо{вищные} заметки

Вот здесь упомянуто, что в обновлённой версии гуглокода инопланетяне решили использовать распрекрасную jQuery.

Есть ещё сомневающиеся в правильности выбора jQuery? Или даже те, кто и вовсе ещё не выбрал? Задумайтесь! – даже гости из будущего почувствовали Великую Силу, которую даёт jQuery отбирая взамен лишь не многим больше 20кБ трафика.

Но овладеть магией не просто. А очень просто.

Выдам ещё одну порцию фактов, связанных с jQuery.

• jQuery.get() и jQuery.post() принимают последним четвёртым параметром dataType. Ну принимает и бог с ним, скажут некоторые. А другие смогут этот факт использовать во благо. Вот пример такого “блага”:
  $.post(backend_url,params,callback,’script’); // и вуаля – все вернувшееся с бэкэнда интерпретируется как javascript.Опять-таки внимательный (и просвещённый) читатель скажет “ну и нафига? есть же jQuery.getScript ?”. Тут мне ответить уже нечего. Разве что напомнить о том факте, что getScript передаёт параметры GET-ом, длина которого как мы знаем весьма ограничена.
• Кстати о jQuery.getScript() – начиная с версии 1.2.1 getScript умеет кросс-доменные запросы (все урлы начинающиеся с http автоматом будут тянуться не через XmlHttpRequest, а посредством добавления тега script). Это открыло нам такие просторы, что ни в сказке сказать, ни трактором убрать… (правда имеется одно досадное недоразумение, но видимо оно беспокоит только меня UPDATE: пофиксили).
• Не совсем jQuery, но тоже важный факт – расчудесный плагин jQuery.livequery аналог Behaviour – помогающий создавать скрипты работающие “на манер css”.

  $('span.bugaga').livequery('click',function(){
     alert('Бугага');
  });
  $('span.gygygy').livequery(function(){
     $(this).bind('click',function(){
        alert('Надо же - кликнули. Гыгыгы');
     });
     alert('В документе появились span-ы c классом gygygy');
  });
  

  Поясняю – работает это так же как и jQuery.bind, за одним лишь исключением – элементов на странице к моменту вызова функции может и не быть. Когда они появяться – livequery “навесит” на них нужные обработчики. Очень удобно. Но будьте внимательны и осторожны – не стоит увлекаться – чем больше элементов будут переданы в livequery, тем “тормознее” будет система – каждые 20мс проводиться поиск элементов в целью найти и обезвредить навесить нужные эвенты (а также после разнообразных манипуляций с dom).

• И последний на этот раз факт – как известно jQuery “оборачивается” в функцию $() – уж больно кратко,красиво и удобно в использовании. Но в эту же функцию любят “оборачиваться” многие известные js-фреймворки. И это казалось бы ставит крест на совместном их использовании… Но не в случае с jQuery – его авторы понимают что они не одни на белом свете. jQuery.noConflict(); “отпустит” функцию $(), правда сам код использующий jQuery в этом случае должен содержать либо полное название функции [ jQuery("selector").action(); ] или же должен быть “завёрнут” в анонимную функцию [ (function($) { original_code})(jQuery); ]

И всё-таки он обновляется! (да-да – а земля круглая и вертится).

Самые, на мой взгляд, вкусные изменения это закладка “Stack” в отладчике. (Её как раз стало очень нехватать – ранее стек вызова показывался в строке с меню и тупо не помещался в ней) и возможность использовать внешний редактор(!) по умолчанию это aptana.

Появились и визуальные изменения – подсветка исполняемого блока кода например. А вот «“better” debugging icons» по-моему паршивые – старые были привычнее и симпатичнее…

Вы можете взглянуть на полный список изменений в этой версии и на свой страх и риск установить себе эту глючную версию, которая страдает падучей…

Technorati Tags: firefox, firebug

Расскажу несколько фактов о jQuery, которые как мне видится, не очень понимают “отечественные программеры”

• при “навешивании” обработчика какого-либо event-а к (например $(‘#element’).click(handler); ) он НЕ заменяет предыдущий обработчик (если таковой имелся), т.е. код:

  $('#element').click(function(){  alert('hello');})
  $('#element').click(function(){  alert('world'); })
  

  Выведет оба alert-а, а не только второй как думается некоторым.

• Непосредственно из первого вытекает следующий факт – конструкций $(document).ready(blablabla); в коде может быть “бесчисленное” количество раз – все обработчики вызовутся в порядке их добавления.
• Система событий в jQuery позволяет не ограничиваться теми событиями, которые есть в документации – можно создавать события самостоятельно:

  $('button').click(function(){ jQuery.event.trigger("buttonClicked");});
  $('div').bind('buttonClicked',function(){ $(this).hide();});
  $('span').bind('buttonClicked',function(){ $(this).show();});
  

  Подобная техника позволяет существенно упростить код и сделать его “читабельнее”.

• Анимационные эффекты в jQuery асинхронны и нередко возникает вопрос – как одну функцию выполнить строго после завершения первой. Все core-функции jQuery связанные с эффектами в качестве последнего параметра принимают callback – функцию, которая вызовется по завершению текущего эффекта:

  $('element-1').fadeOut(3000,function(){
        $('element-2').fadeIn(1500,function() {
        alert('done second effect');
     });
  });
  

• К ЛЮБОМУ html-элементу можно добавить ЛЮБОЙ атрибут (). По этим “самодельным” атрибутам элементы можно найти с помощью селекторов jQuery:

  var elements_by_attr = $('[@myownattr]');
  var elements_by_attr_with_value = $('[@myownattr="somevalue"]');
  var spans_by_attr = $('span[@myownattr]');
  

  Очень полезное “явление” при создании своих собственных элементов управления (и не только).

Ну и напоследок подкину найденную статейку “jQuery for JavaScript programmers”, прочитать которую стоит тем, кто только начинает осваивать прелести jQuery . Материал изложен на английском.

На просторах интернета не нашлось достойного js-контрола – аналога CheckListBox. Восполнил этот недостаток плагинчиком для jQuery. Как и всё в мире jQuery – применяется ненавязчиво и просто – заменяет собой <select> $(“select”).checklistbox();

Взять можно здесь.

Напишу-ка я ещё разок про packer. phing, нормы бухгалтерского учёта и ещё про чё-то.

В предыдущей своей чудовищной заметке про компрессию javascript-ов я упоминал perl-версию packer-а Дэна Эдвардса.
Её приходилось запускать через exec (и соответственно нужен perl). А вот совсем недавно нашёл реализацию этого мега-алгоритма на php и даже не одну.

Соответственно первая реализация была “впендюрена” в phing.task.ext.JsPacker.Task, а вторая напомнила о том что давно собирался изложить.
А именно – про gzip-сжатие js-файлов:

Собственно проблем ровно никаких – mod_gzip в apache, gzip on; в nginx и можно тему закрывать. Но как обычно “есть нюансы”: не всегда эти модули установлены на сервере, не всегда их получается установить, ну и главный “нюанс”: файлы статические, закономерно возникает мысль – зачем их упаковывать при каждом запросе? Вот об этом я и хотел рассказать, но не буду ;o)

Собственно решение прямо в лоб – упаковать файлы один раз и “задеплоить” на сервер. Я это(сжатие) делаю с помощью всё того же phing-а, а решение о том какой файл (сжатый или нет) отдать клиенту принимает mod_rewrite:

RewriteEngine on
RewriteRule ^(.*\.js\.gz)$ – [L]
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz

Это содержимое .htaccess который лежит в директории с js (или httpd.conf в секции Directory/Location отвечающей за эту же директорию).

Смысл вроде прозрачен, но я поясню – если рядом с файлом moi-super-bolshoy-javascript.js будет находиться его сжатая копия moi-super-bolshoy-javascript.js.gz и в запросе будет явно указано, что клиент поддерживает gzip-encoding, то ему(клиенту) выдадут именно сжатую копию. В противном случае (сжатие не поддерживается или сжатого файла нет) в ответ вернётся оригинальный файл.

В итоге уменьшили трафик сервера(и естественно клиентов) и снизили нагрузку на сервер.

Естественно этот фокус можно (и даже наверное нужно) проделать с css.

P.S.
Далеко не все файлы стоит упаковывать зипом . И не каждый файл стоит упаковывать packer-ом – стоит проверить результат на jsl(int)-ом – не редки случаи “поломки” скриптов. Ну а как упаковать оптимальнее – решать индивидуально с каждым файлом предстоит вам.

Update

А вот нашёлся способ отдачи gzip-ованного контента даже лучший, чем описал я.

Geoff Stearns и Bobby van der Sluis задумали осуществить маленькую революцию и наконец “устаканить” процедуру вставки flash-ек на web-страницы.

Товарищи(господа?) решили сделать “мега-супер-пупер” универсальную библиотеку для вставки swf в (x)html-страницы, избавляющую от вездесущих глюков и багов в MSIE различных браузерах, объединив функционал SWFObject и UFO и не упустив из виду другие популярные swf-related приложения (вроде SWFAddress и SWFUpload)

И дело анонсом не закончилось – уже есть сводная таблица методов внедрения swf и поддержкой оных в различных браузерах, которая впрочем пока (надеюсь только пока) не содержит linux-овых бродилок.

От всей души желаю товарищам(господам?) удачи!
Upd: “Это” скоро кончиться
Technorati Tags: web, dev, swf, swfobject, swffix