Из таких web приложений, как Google Wave, Gmail и т.п.  мы видим, что кеширование данных на стороне клиента это хорошая идея для большинства веб-приложений. Подумайте сами, для мобильного интернета очень важен объем трафика. Однотипные запросы в 70% случаях (я не делал никаких расчетов, просто выражать доводы в процентах гораздо солиднее) возвращают одни и те же данные. Кроме того кешировать можно не только данные, но и само приложение.  

До сих пор наиболее популярным методом для локального хранения были cookie. Cookie - это пара ключ-значение, которые хранятся локально в текстовом файле (4KB  или 20 пар ключ-значение максимум(IE) для одного домена). Кроме того cookie передаются на сервер при любом HTTP запросе на сервер, даже при AJAX. Закономерно, что  в стандарте должны были появится средства для более практичного хранения данных в браузере. 

Из всей спецификации  HTML5, локальные хранилища данных на стороне клиента, вероятно, одна из самых обсуждаемых тем. Есть как положительные, так и отрицательные мнения. Из минусов,  самый весомый это нарушение концепции актуальности данных для всех пользователей, т.е. так, как это работает сейчас: пользователь заходит на сайт и видит последнюю версию веб-приложения, ту которую видят и все остальные пользователи. Однако при верном применении локальных хранилищ и своевременного обновления данных, этих проблем можно избежать.

Итак, хранилище на стороне клиента делится на 3 принципиальных методологии:

  1. Session storage.
  2. Local storage или Global Storage
  3. Database storage

 

Стандарт HTML5 привносит новое, удивительное API. Если вы соедините это API с элементом <canvas> то вы можете получить супер современный загрузчик изображений. Эта статья расскажет, как это сделать. Все эти советы хорошо работают в Firefox 4. Также будут описываться некоторые альтернативные способы, чтобы убедиться, что они работают на Webkit-браузерах. Большинство из этих API, не работают в IE, но это довольно простой способ в использовании, и вполне годиться в качестве запасного варианта. 

Было бы неплохо, если бы кто-то отписал в комментариях, как он использует ту или иную технологию уже сейчас в своих проектах.

В своем блоге для подсветки кода я использую syntaxhighlight. Удобная штука, для того чтобы подсветить код его нужно заключить в теги

<pre class="brush:php">
</pre>

Ну и в странице, где этот код будет показан подключить необходимые скрипты и активировать подсветку

<link href='js/highlight/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/>
<link href='js/highlight/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='js/highlight/scripts/shCore.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shAutoloader.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='js/highlight/scripts//shBrushXml.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shBrushPhp.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = false;
SyntaxHighlighter.defaults.toolbar = false;
SyntaxHighlighter.defaults['pad-line-numbers'] = true;
SyntaxHighlighter.all();
</script>

Все бы ничего если бы не одна мелочь, вставлять код в ckeditor страшно неудобно. Приходиться извращаться с исходным текстом, что обычно неминуемо приводит к ошибке в html.

Так уж сложилось, что в мире кроме JQuery есть еще куча различных библиотек. Самые популярных из них: Prototype, Mootools, ExtJS. К тому же есть тысячи самописных. И web-программистам, то и дело, по роду своей деятельности приходится с ними всеми сталкиваться.

По своей сути все эти библиотеки, как бы они не были хороши, всего лишь надстройки над JS браузера. Это значит, что ничего из ряда вон выходящего они делать априори не умеют. Они лишь абстрагируют программиста от тонкостей реализации работы JavaScript в разных браузерах.

К примеру, сейчас, в большинстве браузеров есть метод document.getElementsByClassName. Но в самых выдающихся (IE), этого метода нет. Что делает программист, когда ему надо найти элемент по его классу?

Каждый раз рождается, что-то вроде этого:

function getElementsByClassName(myclass,node){
	var parent = node || document;
	if(!parent.getElementByClassName){
		var items = parent.getElementByTagName('*');
		var result = [];
		for(var r in items)
			if(items[r].className==myclass)
				result[result.length] = items[r];
	}else result = parent.getElementByClassName(myclass);
	return result;
}

Библиотеки освобождают нас от такой рутины, и сами добавляют в document.prototype нужный метод, если его нет. Но библиотек очень много, а методов, которые нужны каждый день с десяток. Сюда относится уже упомянутый поиск по классу (по CSS селектору), события onload, ondomready, работа с AJAX, нахождение позиции элемента на странице, определение браузера и т.д. Словом, редко в каком веб приложении можно обойтись без этих методов. Разработчики jQuery, похоже, об этом знают, поэтому эта библиотека и в авангарде.

Но, как  я уже сказал, не jQuery единым сыт web-разработчик. Поэтому надо знать элементарный джентльменский набор и из других библиотек. Они могут Вам пригодиться, когда Вы, к примеру, работаете над чужим проектом.

Поводом для написания статьи были постоянные вопросы моего товарища, который работал со старой версией UMICMS, но уже привык к свежей версии. Сейчас UMIперешла на jQuery, а раньше она работала на Prototype.

Также очень популярная Joomla по дефолту работает с Mootools, по этому эту библиотеку я не мог обойти стороной.

Выдернул из jQuery реализацию обработчика события onDomReady. Для тех, кто не в курсе поясню, что это событие возникает, после того как весь html код страницы будет загружен браузером, но в отличие от  window.load, срабатывает раньше того, как будут загружены все стили, скрипты, картинки и т.д. Т.е. если в своем JS вам надо провести какие-то манипуляции с DOM на странице до ее показа, то вам нужен именно этот метод. Вы, конечно, можете подключать jQuery целиком, и тогда в вашем распоряжении будет этот метод. К примеру при подключенном jQuery установить событие можно так

Подкатегории

Все о разработке на библиотеке jQuery