Вышел Firefox 3 beta 5

Firefox 3 Beta 5 включает в себя более 750 изменений по сравнению с прежней бета версией. По словам разработчиков, это самая быстрая из всех версий Firefox:

По сравнению с Firefox 2, веб приложения, такие как Google Mail и Zoho Office работают в два раза быстрее в Firefox 3 beta 5. Также, популярный тест SunSpider от Apple показывает улучшения по сравнению с предыдущим релизом.

В этой версии также улучшена интеграция с Windows, Mac и Linux за счет добавления родных иконок и тем. Помимо прочего усовершенствован органайзер, который позволяет просматривать, управлять и производить поиск в закладках, тэгах и истории поиска.

jQuery File Tree – браузер файлов на jQuery

jQuery File Tree – это AJAX браузер файлов написанный на jQuery. Он полностью конфигурируемый, легок в установке и настройке. Внешний вид изменяется простым редактированием CSS. jQuery File Tree работает во всех браузерах, поддерживаемых jQuery. Он также полностью протестирован в Internet Explorer 6 / 7, Firefox 2, Safari 3 и Opera 9.

jQuery File Tree

Для установки плагина необходимо скачать дистрибутив и загрузить его на сервер. Затем нужно подключить скрипты jQuery.js, jqueryFileTree.js и таблицу стилей jqueryFileTree.css. После этого нужно вызвать функцию fileTree() с указанием контейнера, в котором будет дерево файлов, параметров плагина и функции обработчика:

$(document).ready( function() {
	$('#container_id').fileTree({ root: '/some/folder/' }, function(file) {
		alert(file);
	});
});

Здесь, #container_id это ID div-а, в котором будет дерево файлов, root – корневая директория для просмотра. Функция обработчик принимает один параметр – имя выбранного файла. В данном примере имя файла будет просто выводится в alert. По умолчанию, AJAX запрос отправляется на скрипт jqueryFileTree.php (входит в дистрибутив), но вы можете указать другой скрипт, добавив опцию script:

$(document).ready( function() {
	$('#container_id').fileTree({
		root: '/some/folder/',
		script: 'jqueryFileTree.asp',
	}, function(file) {
		alert(file);
	});
});


Скачать плагинСмотреть демо

JSLab Standard Library – коллекция функций

JSLab – это отличная коллекция JavaScript функций, расширяющих возможности стандартных объектов – Array, Date, String и др.

JSLab Standard Library

Например, для объекта Array имеются функции copy (копирование массива), diff (получение разницы массивов), unique (удаление повторяющихся значений) и др.

Есть также возможность составить из всех имеющихся здесь функций собственную библиотеку. Нужно просто нажать на ссылку Create library и выбрать функции, которые хотите добавить.


Оптимизация циклов

В предыдущей статье, посвященной оптимизации скриптов (Оптимизация скорости выполнения скриптов JavaScript) я описал 7 методов ускорения работы скриптов. Однако этот список не содержал методов оптимизации циклов, которые могут серьезно влиять на скорость выполнения. Сегодня я восполню этот пробел.

1. Оптимизация логического сравнения при итерациях цикла.

Рассмотрим обычный цикл for:

for (var i = 0; i < aList.length; i++) {
	// тело цикла
}

При каждой итерации этого цикла происходит сравнение счетчика i со свойством length массива aList. Но как известно, обращение к константе или обычной переменной гораздо быстрее, чем получение значения через свойства объектов. Поэтому этот цикл можно оптимизировать путем замены этого значения на переменную:

// переменная len будет хранить длину массива
var len = aList.length;
for (var i = 0; i < len; i++) {
	// тело цикла
}

// то же, что и предыдущий пример, но получение длины
// массива и инициализация счетчика объединены в одно выражение
for (var i = 0, len = aList.length; i < len; i++) {
	// тело цикла
}

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

Дальнейшая оптимизация такого цикла возможна путем прохода его в обратном порядке (если это конечно допустимо логикой приложения). В этом случае, при каждой итерации мы будем сравнивать счетчик с константой, а не переменной, что еще более ускорит проход цикла:

for (var i = aList.length - 1; i >= 0; i--) {
	// тело цикла
}

В этом примере, счетчик инициализируется индексом последнего элемента в массиве (который на 1 меньше длины массива), затем при каждом цикле производится сравнение с нулем (можно также использовать выражение i > -1) и уменьшение счетчика на единицу.

Тот же цикл можно еще более ускорить за счет объединения выражений сравнения и декремента:

for (var i = aList.length; --i >= 0;) {
	// тело цикла
}

Это самый быстрый из известных мне циклов. Кроме высокой скорости прохода, он имеет еще и очень компактный код.

2. Использование do ... while вместо while.

Можно заменить циклы while на do ... while чтобы увеличить скорость выполнения. Допустим мы имеем следующий цикл:

var i = 0;
while (i < aList.length) {
	// тело цикла
	i++;
}

Этот код можно переписать с использованием do ... while без изменения результата выполнения:

var i = 0;
do {
	// тело цикла

	i++;
} while (i < aList.length);

Этот цикл будет работать быстрее цикла while, но его можно еще более оптимизировать, прогоняя его в обратном порядке:

var i = aList.length - 1;
do {
	// тело цикла

	i--;
} while (i >= 0);

И еще более ускоряем его путем объединения декремента со сравнением:

var i = aList.length - 1;
do {
	// тело цикла

} while (--i >= 0);

В итоге получаем максимально оптимизированный цикл.

3. "Разворачивание" циклов.

Вместо того, чтобы выполнять одно выражение внутри цикла при каждом его прохождении, можно "развернуть" его, выполняя сразу несколько выражений при одной итерации. Рассмотрим пример:

var aList = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var iSum = 0;

for (var i = 0, len = aList.length; i < len; i++) {
	iSum += aList[i];
}

Этот цикл выполняет 20 итераций, каждый раз добавляя очередное значение массива к переменной iSum. Ту же операцию можно выполнять несколько раз внутри цикла, каждый раз увеличивая значение счетчика на единицу:

var aList = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var iSum = 0;

for (var i = 0, len = aList.length; i < len; i++) {
	iSum += aList[i];
	i++;
	iSum += aList[i];
	i++;
	iSum += aList[i];
	i++;
	iSum += aList[i];
	i++;
}

Здесь добавление значения выполняется четыре раза, а количество итераций цикла сократится до пяти. Таким образом мы получаем прирост производительности. Этот пример можно еще более оптимизировать соединив итерацию с суммированием в одно выражение:

var aList = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var iSum = 0;

for (var i = 0, len = aList.length; i < len; i++) {
	iSum += aList[i++];
	iSum += aList[i++];
	iSum += aList[i++];
	iSum += aList[i++];
}

Конечно же такой метод оптимизации увеличивает количество кода, и его стоит применять только в том случае если необходимо получить максимальную скорость прохода цикла, и если размер скрипта не играет большой роли.


Три упомянутых в статье метода довольно таки просты, но при этом способны значительно увеличить производительность. Если она конечно же для вас важна...


Туториал – открывающаяся панель на MooTools

В этом уроке я покажу как сделать плавно открывающуюся панель используя библиотеку MooTools.

Шаг 1: HTML код.

<h2><span><a href="#" id="toggle">Панель</a></span></h2>
<div id="section">
<div>
<!-- Содержимое панели  -->
</div>
</div>

Как видите, код очень простой. Вложенный в заголовок <span>, а также <div> внутри открывающейся панели (id=”section”) нужны только для создания закругленных углов.


Шаг 2: CSS – устанавливаем стиль панели.

div.container{
	margin:30px auto;
	width:350px;
}
h2{
	margin:0px;
	padding:0px;
	border:0px;
}
h2{
	color:#FFFFFF;
	font-size:13px;
	display:block;
	background:url(img/h2_bg.gif) top left no-repeat #9A9A9A;
}
h2 span{
	padding:5px 10px;
	background:url(img/h2_span_bg.gif) top right no-repeat;
	display:block;
}
h2 a:link, h2 a:visited{
	color:#FFFFFF;
	text-decoration:none;
	display:block;
}
#section {
	background:url(img/section_bg_left.png) bottom left  no-repeat #EEEEEE;
	font-size:12px;
}
#section div{
	background:url(img/section_bg_right.png) right bottom no-repeat;
	padding:10px;
}


Шаг 3: добавляем эффект “toggle” из MooTools

Добавляем ссылку на библиотеку MooTools в раздел <head>

<script type="text/javascript" src="mootools.svn.js"></script>

Затем добавляем следующий код…

<script type="text/javascript">
window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('section');
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
});
</script>

Таким образом, при каждом щелчке на заголовке, панель будет плавно появляться/исчезать.


Смотреть демо.

Скачать туториал.

Источник – woork.blogspot.com

Страница 16 из 20« Первая...«11121314151617181920»

JSToolbox создан на основе WordPress