Вставить в head страницы.
Состоит из одной функции - ess(); Смысл в уменьшении размера страницы, генерируемой на стороне сервера за счет представления основных или всех отображаемых блоков/контейнеров на странице в XML виде. Ниже приведены основные преимущества такого подхода.
ess(a, str, ch, f);
HTML
x1
x2
...
xN
var str='html$var1$html$var2$html.. ..$HTML$.. ..html$varN$';
Пример использования
Пусть у нас есть страница, которую мы хотим упростить. Что бы было, что "потрогать", я возьму страничку programmado.ru - главную страницу. На ней можно много чего оптимизировать или даже все, но для примера я возьму только вывод новостей, ниже код вывода для одной новости.
Полный Merge Sort ( Сортировка Слиянием )
Не знаете что такое Merge Sort? Хотите знать? Чем же она отличается от других сортировок и как она работает? Всё здесь!)
Взяв его за основу, я заменил все его динамичное содержание на переменные, например 'http://programmado.ru/62-polnyy-mergesort.html' - это ссылка, пусть она будет '$src$', а 'Полный Merge Sort ( Сортировка Слиянием )' - это название, а значит '$titl$' и так далее... Получаю вот такой HTML шаблон для новостей. Чем больше HTML осталось - тем лучше. Так как в тексте новости может быть всякое, то я отдам ей HTML будущего тега и заменю для $HTML$. В принципе это не обязательно, так как маска может быть в виде XML, когда все или некоторые значения содержатся в отдельных тегах, но я решил, что все остальное можно разместить в аттрибутах.
Теперь один момент - этот шаблон надо сделать переменной в JS, а это значит, что все "неправильные" кавычки я экранирую, а переводы строк убрираю.
var news_sh='<div class="all"><h2 class="title"><a href="http://programmado.ru/$src$">..........</a></div></div>';
Его я поместил в файл programmado.js. Остается заменить вывод новости на странице на вот такие строчки:
Вот что получилось для новости, про сортировку слиянием:
Не знаете что такое Merge Sort? Хотите знать? Чем же она отличается от других сортировок и как она работает? Всё здесь!)
Для сравнения, вот ниже эта же новость, но "по старому":
Полный Merge Sort ( Сортировка Слиянием )
Не знаете что такое Merge Sort? Хотите знать? Чем же она отличается от других сортировок и как она работает? Всё здесь!)
Что бы все работало, вношу небольшие изменения в head странички. Для того, что бы изменения были более заметны, я таким же образом заменил 2 горизонтальных меню, одно меню справа и облако тегов.
<script type="text/javascript" src="ess.3.1.js">
<script type="text/javascript" src="programmado.js">
<script type="text/javascript">
function domagic() {
ess(g('#top'), toper);
ess(g('#navcontainer'), hormenu);
ess(g('#ritmenus'), ritmenu);
ess(g('tagscloud'), tcl);
ess(g('#lastlist'), lastlist);
ess(g('news'), news);
}
<body onload="domagic();">
Каковы результаты? Все вместе весило около 1Мб, из которых половина это трафик с других сайтов, а не кешированным остается только 88Кб, из которых 71Кб - главная страница, а остальное - счетчики и др. После оптимизиции размер уменьшился до 34Кб, но это потребовало подключение 3Кб - технологический пакет ESS и 19Кб файла с шаблонами, который тоже кешируется. Оптимизации может подвергаться все, но это требует переработки всего вывода сайта, что намного проще, чем ручная замена каждого блока и т.д.
Вот то что получилось - programmado.html, а вот то что было - programmadobefore.html.
Это файл с шаблонами - programmado.js
Состоит из связки функций - inc(); Суть в разбиении всего необходимого JS сайта на функции или более маленькие файлы, а потом их подключение в режиме реального времени по мере надобности. JS сначала загружается, потом весь обрабатывается и только после этого может выполняться. Его обработка напрямую зависит от его размера и занимает основную часть времени - до 300-400мс для файлов 100-150Кб. У разбиения файлов по 5-10Кб или даже отдельные функции имеется ряд преимуществ, включая кеширование:
//обычный
inc(a, f_n);
//в развернутом виде
inc({
//список подключаемых функций
},function() {
//код
});
//каталог функций
includesrc='http://fous.name/ess/function_';
// functioni - название функции, которое будет использоваться для вызова, а Ki - ее постфикс, что бы получалась строчка вида function_Ki.js
//'.js' добавляется автоматически
var a={function1:'K1',...,functionN:'KN'};
//каталог файлов
includesrc='http://fous.name/ess/';
//file1 - название JS файла, без '.js'
var a={file1:'file1',...,fileN:'fileN'};
Содержимое подключаемых файлов:
//если подключается функция, то это файл c названием вида function_Ki.js
ludes["Ki"]=function(a1, .., aN){
//код
};
//Ki - постфикс файла с функцией, который указывается для подключения
//a1-aN - передаваемые переменные
//если подключается файл // JS код ludes["filei"]++; //filei - название файла, без '.js'
Пример использования
Подключим функцию, находящуюся в файле http://fous.name/ess/function_1.js, задав ей имя goodjob, для этого выполним этот код:
includesrc='http://fous.name/ess/function_';//id ф-ии опущено, почему - было описано выше
inc({
goodjob:'1'
}, function() {
goodjob();//вызовем функцию, что бы убедиться, что она подключена
});
//код function_1.js
ludes["1"]=function(){alert('Функция загрузилась и успешно выполнилась.');}
Для того что бы подключить файл, например, http://fous.name/ess/file1.js используем вот этот код:
includesrc='http://fous.name/ess/';//каталог с файлом
inc({
file1:'file1.js'
}, function() {
ggg();
});
//код file1.js
function ggg() {
alert('Файл подгрузился и все функции готовы к вызову.');
}
ludes["file1"]++;
Немного экзотики - ESS можно использовать для GET запросов. Попробуем сделать запрос в файл http://fous.name/ess/string1.php и ответ сохраним в переменную php. Что бы не мелочиться - пусть будет JSON ответ, для этого надо написать, что то вроде:
includesrc='http://fous.name/ess/';//каталог с файлом
inc({
php:'string1.php?mess=Hello world!'
}, function() {
alert(php[0]+'\n'+php[1]+'\n'+php[2]);
});
//код string1.php
$a=$_GET['mess'];
settype($a, 'string');
echo "ludes['string1']='";
$d = array("Вот пример AJAX, на основе ESS.", 'Полученная переменная: '.$a, 'Конец.');
echo json_encode($d);
echo "';";
Учтите, что для того, что бы обновить значение переменной таким GET запросом надо сначала присвоить ей значение null и только потом повторно отправить запрос. Это нестандартное применение и для AJAX все же лучше использовать AJAX, а не ESS, пусть это и может быть быстрее и проще.
Свернуть примерЭто функция, которая возвращает элемент или массив элементов, находя их по id, тегу, name или class. Она используется, как вспомогательная для ess() и inc(). Это аналог гораздо более мощной функции $() в jQuery, выполняющий только поиск элемента.
Вызов:
g(a, b, m);
Примеры использования
var nws=g('nws');//поиск тегов <nws>
var rows=g('li', '#menu');//поиск <li> в элементе с id=menu
var lit=g('.button','@frm',1);//поиск элементов с class=button в элементе с name=frm, всегда возвращает массив