пятница, 27 декабря 2013 г.

Важность описания интерфейсов функций

Сегодня, прочитав статью http://habrahabr.ru/post/207390/, удивился тому факту, что автор не сказал ни слова об описании интерфейсов функций. Я просто не мог оставить этот факт без внимания, поскольку лично мне уже набила оскомину проблема отсутствия описания интерфейсов функций в коде.
Если вы пишете на строготипизированном языке, то у вас нет проблем с тем какого типа параметры функция принимает и возвращает. Это все есть прямо в описании функции. 

int addition (int a, int b) {
    return a + b;
}

воскресенье, 15 декабря 2013 г.

javascript best practices

Используйте jQuery

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


Не засоряйте глобальное пространство имен

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

var $a = "Hello world";

И помните: в javascript переменные имеют функциональную область видимости.

пятница, 6 декабря 2013 г.

jQuery draggable с относительным позиционированием

Задача: необходимо иметь диалоговое окно, которое можно перетаскивать и которое при изменении размера окна будет сохранять свое положение относительно центра экрана.
Решение:
Для перетаскивания объектов на javascript уже существует такой замечательный инструмент как jquery.ui.draggable, он очень богат и именно его мне и хотелось бы использовать, но у него перетаскиваемые элементы позиционируются абсолютно. Значит, необходимо выполнить небольшую подмену.
Суть идеи такова: диалоговое окно по умолчанию находится в относительном позиционировании (left: 50%, margin-left: -width/2). Перед началом перетаскивания мы просто переводим относительные координаты в абсолютные и срабатывает стандартный jQuery.ui.draggable со всеми его особенностями. По окончании перетаскивания мы просто возвращаем объекту относительные координаты. 

воскресенье, 1 декабря 2013 г.

Изменение css-свойств для динамически создаваемых элементов

jQuery с легкостью позволяет изменять css-свойства для существующих на странице элементов с помощью метода .css(). Но все изменения сохраняются в атрибуты style элементов. Поэтому все вновь создаваемые элементы получат старые свойства, прописанные в .css-файлах.
Для того, чтобы все изменения css-свойств применялись и для новых элементов мы поступим следующим образом: создадим элемент style с id и будем вносить в него изменения. Для упрощения этого процесса напишем jquery-плагин:

/**
 * Изменить css-правило внутри style-элемента
 * @param {String} selector Селектор для которого необходимо менять правила
 * @param {String} property Свойство, значение которого надо изменить
 * @param {String} value Новое значение
 */
$.fn.style = function(selector, property, value){
   return $(this).each(function(){
       if( $(this).prop('tagName') !== 'STYLE') return;
       $.each(this.sheet.cssRules, function(i, li){
           if(li.selectorText === selector){
               li.style.setProperty(property, value);
           }
       });
   });
};
Мы выбираем по id style-элемент и начинаем перебирать его селекторы. Как только нашли нужный нам селектор, заменяем для него указанное свойство. Следует заметить, что данный метод требует точного совпадения селекторов, определенных в стилях и селекторов элементов, к которым надо применить изменения.

<style id="style_elem">
    .item{
        background: #eee;
    }
</style>

$('#style_elem').style('.item', 'background', '#ccc');
Теперь все вновь создаваемые элементы с классом item будут иметь background с цветом #ccc. Данный метод работает для всех современных браузерах.