JSLab – это отличная коллекция JavaScript функций, расширяющих возможности стандартных объектов – Array, Date, String и др.
Например, для объекта Array имеются функции copy (копирование массива), diff (получение разницы массивов), unique (удаление повторяющихся значений) и др.
Есть также возможность составить из всех имеющихся здесь функций собственную библиотеку. Нужно просто нажать на ссылку Create library и выбрать функции, которые хотите добавить.
В предыдущей статье, посвященной оптимизации скриптов (Оптимизация скорости выполнения скриптов JavaScript) я описал 7 методов ускорения работы скриптов. Однако этот список не содержал методов оптимизации циклов, которые могут серьезно влиять на скорость выполнения. Сегодня я восполню этот пробел.
Рассмотрим обычный цикл 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;) {
// тело цикла
}
Это самый быстрый из известных мне циклов. Кроме высокой скорости прохода, он имеет еще и очень компактный код.
Можно заменить циклы 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);
В итоге получаем максимально оптимизированный цикл.
Вместо того, чтобы выполнять одно выражение внутри цикла при каждом его прохождении, можно "развернуть" его, выполняя сразу несколько выражений при одной итерации. Рассмотрим пример:
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.
<h2><span><a href="#" id="toggle">Панель</a></span></h2> <div id="section"> <div> <!-- Содержимое панели --> </div> </div>
Как видите, код очень простой. Вложенный в заголовок <span>, а также <div> внутри открывающейся панели (id=”section”) нужны только для создания закругленных углов.
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;
}
Добавляем ссылку на библиотеку 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
Вы наверно удивитесь, но производить отладку скриптов JavaScript можно при помощи Microsoft Office. Смешно, не правда ли? Тем не менее, в комплект поставки Microsoft Office 2003/XP входит Microsoft Script Editor – прекрасный дебаггер, внешне напоминающий Visual Studio. Он способен производить пошаговый проход, просмотр переменных, редактирование файлов и многое другое, и все это доступно для Internet Explorer 6/7 (и скорее всего для MS Office тоже 
).
Проверка данных форм это чрезвычайно важная процедура для повышения “юзабилити” при работе с формами. В первую очередь потому, что пользователь сразу же получает уведомление в том случае, если какие либо данные введены неверно. Сегодня я расскажу об очень полезном плагине для jQuery, который облегчает задачу проверки введенных данных до минимума. Это jQuery Validation Plugin. Вот некоторые его возможности:
Итак, попробуем скрипт в действии. Допустим, нам необходимо создать простую форму для логина пользователя, в которой есть 3 поля – имя пользователя, пароль и checkbox “запомнить”.
<form name="myForm" id="myForm" action="" method="post" style="margin:20px"> <label for="username">Имя пользователя </label><br/> <input type="text" name="username" value="" /><br/> <label for="password">Пароль</label><br/> <input type="password" name="password" value="" /><br/><br/> <label for="remember">Запомнить меня:</label> <input type="checkbox" name="remember" /><br/><br/> <input type="submit" name="" value="Submit" /> </form>
Для начала нам понадобится подключить библиотеку jQuery и плагин в страницу:
<script src="../lib/jquery.js" type="text/javascript"></script> <script src="../lib/jquery.delegate.js" type="text/javascript"></script> <script src="../jquery.validate.js" type="text/javascript"></script>
Теперь можно вызывать функцию jQuery.validate() которая инициализирует форму. В качестве атрибута в функцию нужно передать объект, содержащий правила (rules) и сообщения об ошибках (messages) для каждого проверяемого поля:
$().ready(function(){
$("#myForm").validate({
rules : {
username : {required : true, minlength: 2},
password : "required"
},
messages : {
username : {
required : "Введите ваше имя",
minlength : "Введите не менее, чем 2 символа."
},
password : "Введите пароль"
}
});
});
Здесь все довольно таки просто. Селектор $(”#myForm”) получает указатель на форму, а функция validate() устанавливает правила для полей в соответствии с полученными данными. Объект rules содержит имя поля и список правил. Если правил несколько, то они должны быть объединены в отдельный объект. Так, для поля пароль просто указано правило “required”, т.е. обязательное поле, в то время как для поля username указан объект содержащий два правила – required и minlength (минимально допустимое количество символов). Структура объекта messages такая же, как и для rules, за исключением того, что вместо атрибутов правил указаны сообщения об ошибках.
Если при отправке формы обнаружены ошибки, то форма не отправляется, а высвечивается сообщение об ошибке в виде тэга <lable> с классом error. Также класс error присваивается элементу input, вызвавшему ошибку. Воспользуемся этим чтобы ярко выделить это поле:
label.error {
color: red;
font-style: italic;
}
input.error {
border: 1px dotted #f00;
}
Таким образом, сообщения об ошибках будут выделены красным курсивом, а рамка поля, вызвавшего ошибку, будет выделена красной прерывистой линией.
Демо этого примера можно посмотреть здесь.