Авось, кто-то еще не догадался… :)
Самый простой способ использования своих скриптов совместно с Google AJAX Libraries API:
google.load("jquery", "1");
google.setOnLoadCallback(function() {
$('<script type="text/javascript" src="_url_вашего_скрипта_"></script>').appendTo('head');
$('<script type="text/javascript" src="_url_вашего_другого_скрипта_"></script>').appendTo('head');
// ...
});Аналогичным образом подключаются, например, плагины для jQuery.
Собственно, сабж.
На данный момент использовать я эту штуковину буду вряд ли по следующим причинам:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> состоит только в том, что я буду получать соответствующий файл с серверов Google. При наличии нормального хостинга и установки правильных заголовков, ИМХО, эта польза минимальна.И напоследок - многие говорят - “скорость”, “быстро загрузиться JS” и т.д. Это всё, конечно, хорошо, но зачем вам JS, который загрузиться очень быстро, если у вас сам сайт (хостинг) тормозит?..
Доступна для свободного скачивания книга “Road To Ruby”, предназначенная преимущественно для тех, кто имеет опыт программирования на C#, Java и C++. Подробности и ссылку для скачивания можно получить здесь (для скачивания нужно будет зарегистрироваться на сайте internet.com).
Кто не хочет регистрироваться - может скачать книгу у меня.
Впервые я о картах памяти услышал на Exception #07, на докладе о том, как лень может быть полезна. В последнее время периодически вижу словосочетание “mind map” в Google Reader‘е… Попробовать, что ли… Действительно они помогают разобраться в различных ситуациях, или старый дедовский способ - “когда нихрена непонятно - доставай тетрадь/блокнот и ручку - и садись писать” - всё же эффективнее?
PS. Осталось две недели до сессии. Нихрена не успеваю делать. Приходится меньше времени уделять работе. :(
Кросспост моего поста про unobtrusive javascript на хабрахабр вызвал целую кучу критики:
По-моему вывод можно сделать один - многие люди не готовы принять этот подход - может, слишком сложно, может, еще что-то?.. Не знаю, не знаю..
Цель статьи - показать, что из себя представляет “ненавязчивый JavaScript”, для чего он нужен, и чем он лучше “навязчивого” JavaScript. В рунете я подобных статей не встречал (может они и есть, но мне на глаза не попадались и немного погуглив, я тоже ничего не нашел), а как показывает практика - очень многие не знают, что это такое и как этим пользоваться.
Unobtrusive JavaScript - это техника программирования на языке JavaScript, которая состоит из следующих принципов:
Это удобно, это практично, это легко реализуемо и это помогает Вам увеличить аудиторию вашего сайта за счет пользователей, пользующихся старыми браузерами, отключающими JavaScript, пользователей, которые пользуются интернетом с мобильных устройств.
Легче всего показать это на примере. За ним далеко идти не нужно - возьмем всеми любимый Хабрахабр:
<div class="text_comments">
<div class="comment_item" style="margin-left: 0px;">
<div class="service_text_comments_holder">
<a href="http://fxposter.habrahabr.ru/" class="comments_nickname">fxposter</a>
...
</div>
<div class="comment_text">...</div>
<div class="comments_reply">
<div class="reply_word_holder" id="reply_link866650">(<a href="javascript:saw(866650);">ответить</a>)</div>
<div style="display: none" id="reply866650">
<!-- форма отправки комментария -->
</div>
</div>
</div>
</div>Это код комментариев, которые показываются на страничке о посте. Для наглядности ненужные фрагменты были убраны.
Что плохо в этом фрагменте кода?
<a href="javascript:saw(866650);">ответить</a>)Как его можно улучшить?
Сказано - сделано. Преобразуем HTML к следующему виду:
<div class="text_comments">
<div class="comment_item" style="margin-left: 0px;">
<div class="service_text_comments_holder">
<a href="http://fxposter.habrahabr.ru/" class="comments_nickname">fxposter</a>
...
</div>
<div class="comment_text">...</div>
<div class="comments_reply">
<div class="reply_word_holder" id="reply_link866650">(<a href="reply.php?comment_id=866650" class="show_reply_form" id="show_reply_form_866650">ответить</a>)</div>
<div style="display: none" id="reply866650">
<!-- форма отправки комментария -->
</div>
</div>
</div>
</div>Как видите - я изменил тег <a> (присвоил ему “нормальный” href, добавил id и class). Теперь при нажатии на ссылку “ответить” пользователя будет перебрасывать на страницу ответа на выбранный вопрос. Этим я выполнил второй пункт в списке улучшений. Теперь давайте взглянем на первый пункт: для того, чтобы у пользователей, у которых включен JavaScript вместо редиректа выполнялось открытие формы под самим комментарием мне нужно выбрать все элементы с классом “show_reply_form” и каждому из них назначить на событие onclick функцию, которая бы “открывала” соответствующую форму.
Напишем соответствующую функцию:
function showForm(event) {
var id = parseInt(this.id.replace('show_reply_form_', ''));
saw(id);
return false;
}Она берет this.id (т.е. id текущего обьекта), убирает из него “фразу” “show_reply_form_“, тем самым получая номер элемента, который нам нужно открыть и вызывает функцию saw, которая присутствовала изначально в HTML-коде. Для того, чтобы не произошел редирект после клика на ссылку - функция возвращает false.
Осталось только связать эту функцию с нашими ссылками.
В jQuery это делается так:
$('.show_reply_form').click(showForm);В PrototypeJS - так:
$$('.show_reply_form').each(function(element) {
element.onclick = showForm;
});После присвоения нашей функции элементу - this.id станет относится к id этого элемента (да, это “магия JavaScript” :) ).
Весь JavaScript-код теперь можно вынести в отдельный файл:
function showForm(event) {
var id = parseInt(this.id.replace('show_reply_form_', ''));
saw(id);
return false;
}
window.onload = function(event) {
$$('.show_reply_form').each(function(element) {
element.onclick = showForm;
});
}Здесь мы вызываем “связывание” наших ссылок с функцией показа формы при событии window.onload (при загрузке страницы).
Таким образом я выполнил и первый пункт в списке улучшений.
На мой взгляд, такое использование JavaScript, а именно - вынос всех функций на JS в отдельный файл и связывание этих функций с элементами страницы с помощью различных событий (здесь мы видели события window.onload и element.onclick) - это на данный момент - единственно правильное использование JavaScript.
Дерзайте, господа. :)
PS. Я прекрасно знаю, что можно использовать событие не window.onload, а DOMContentLoaded. Но я считаю, что для примера понятнее будет всё же использование window.onload.
Всё летит вверх дном
Впереди не видно света
Всё старое окутано пеленой дыма
Я живу в руинах, которые никому и никогда не понять
О прошлом хочется забыть,
Но оно постоянно о себе напоминает…
Приходит злоба, желание отомстить за всё,
Что было сделано не так, как мне хотелось
О будущем не хочется даже думать
Учитывая то, что происходит со мной,
Вперед к лучшему дороги нет.
Я завидую всем, кому кажется, что это полный бред.
Update:
В прошлом что-то осталось недосказанным…
Вдогонку к предыдущему посту. В первом же комментарии заметили, что править wp’шные исходники в общем случае нежелательно. В принципе и не “в общем” случае тоже нежелательно. :) Поэтому - исправляемся.
Теперь для решения проблемы из предыдущего поста достаточно скачать плагин (txt, zip).
Столкнулся с багом в WordPress’е при выводе постов, а точнее в “применении” к ним “типографики”:
Как видите, кавычки в некоторых словах расставлены абсолютно не так, как нужно. В поисках решения проблемы обнаружил следующее - в WordPress’е на каждый блок выходных данных, будь то заголовок, сам пост, его комментарии или что-либо еще, навешиваются фильтры, которые определенным образом изменяют блок - убирают теги, заменяют одни символы на другие и т. д.
В данном случае меня интересовал блок the_content (в данном случае понятие “блок” можно интерпретировать как “функция WP, которая возвращает некий контент”), который выводит содержимое поста. В файле wp-includes/default-filters.php можно увидеть, какие фильтры применяются к этому блоку:
add_filter('the_content', 'wptexturize');
add_filter('the_content', 'convert_smilies');
add_filter('the_content', 'convert_chars');
add_filter('the_content', 'wpautop');
add_filter('the_content', 'prepend_attachment');Методом проб и ошибок было установлено, что найденный мной баг “создает” фильтр wptexturize (в WP “фильтр” - это функция, которая принимает 1 аргумент - входящий текст, и возвращает обработанный текст). Функция нашлась в файле wp-includes/formatting.php. Она выполняет “типографскую” работу, при этом пропуская всё, что находится между тегами pre, code, kbd, style и script. В теории… На практике - нихрена она не пропускает, если внутри одного из этих тегов будет какой-либо другой тег (что, в принципе, возможно, но встречается редко, а случай pre > code система хавает на ура), либо если внутри какого-нибудь из этих тегов встретится \[.*\] - вот такой кусок (у меня этим куском был ['comment_post_ID'], например). Почему так - не могу знать (мне вообще непонятно зачем наряду с тегами <.*> рассматривать еще и \[.*\]), но факт остается фактом. Улучшенная версия этого файла находится здесь (у меня WP 2.5.1, если что).
None
php|architect’s Guide to PHP Security by Ilia Alshanetsky
Последние комментарии