Блог Вячеслава Волкова

Большинство людей счастливы настолько, насколько они решили быть счастливыми.

— Авраам Линкольн

Раздел блога / JavaScript

Сборка backbone+requirejs проекта с помощью grunt

Моей основной задачей в последнее время является создание одностраничных javascript приложений. В основном я использую фреймворк Backbone и requirejs. Обычно публикация приложения была простым действием "svn update" но из-за этого возникала куча проблем, начиная с несжатых файлов стилей, огромного количества js файлов и заканчивая кэшированием файлов браузером.

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

Не буду вдаваться в описание этого сборщика, в Интернете есть достаточное количество уже информации. Расскажу о том, как он помогает решать непосредственно мои задачи.

Узнать больше »

Сортировка DOM элементов с jQuery

Очень часто может возникнуть ситуация когда необходима сортировка html элементов в DOM с помощью javascript.

Для решения данной задачи можно воспользоваться встроенной функцией sort.

Например, у нас есть вот такой неупорядоченный список.
<button class="sort-elements">Сортировать</button>

<div class="sorting">
    <ul class="elements">
        <li>Элементы</li>
        <li>Для</li>
        <li>Проверки</li>
        <li>Сортировки</li>
        <li>На</li>
        <li>jQuery</li>
    </ul>
</div>

Для его сортировки можно использовать следующий метод
$('.sort-elements').click(function(){
    var $elements = $('.elements li');
    var $target = $('.sorting ul');
    
    $elements.sort(function (a, b) {
        var an = $(a).text(),
            bn = $(b).text();
        
        if (an && bn) {
            return an.toUpperCase().localeCompare(bn.toUpperCase());
        }
        
        return 0;
    });
    
    $elements.detach().appendTo($target);
});

Или вот здесь можно посмотреть рабочий пример сортировки.

Передача JSON объекта в iframe или в новое окно через postMessage

Передача информации между родительским окном и iframe на странице или дочерним окном стала возможна благодаря новым возможностям HTML5. Теперь запросто можно отправить JSON объект, например, в открытый iframe на другом домене. Это стало возможным благодаря window.postMessage. Узнать больше »

Пишем плагин-виджет для WordPress и публикуем в репозитории

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

Создание виджета ничем не отличается от написания плагина для Wordpress, которую я писал в предыдущей статье. Но в этот раз, я хотел бы рассказать не только о том, как написать свой виджет, но о том, как добавить плагин в репозиторий Wordpress. Узнать больше »

Лови moment.js или удобная библиотека для работы со временем на JavaScript

Работа с датой в javascript для разработчиков в том виде, в котором она реализована, порой предоставляется не совсем удобной. Для того, что бы отформатировать дату в нужном формате приходится использовать множество функций объекта Date. Например, куда проще с этим делом обстоит в языке PHP в котором с помощью функции date можно форматировать дату в нужный формат. В JavaScript же нам понадобиться использовать методы объекта, например, getFullYeargetHours или им подобные, да и еще проверять что бы у числа были впереди идущие нули.

Все это порождает огромное количество кода с разными проверками. Чтобы этого избежать хочу порекомендовать вам одну из удобных (на мой взгляд) библиотек для работы со временем на JavaScript. Это - moment.js.

Данная библиотека предоставляет не только удобные функции для форматирования даты, но и различные возможности для операций над временем и главное - ее можно использовать вместе с node.js, что позволит вам сократить время разработки ваших приложений. Кроме того, библиотека имеет множественную локализацию включая русскую. Скачать последнюю версию библиотеки вы всегда сможете на GitHub. Дальше рассмотрим несколько основных возможностей библиотеки. Узнать больше »

Как отсортировать json объект на javascript

Благодаря встроенной в javascript функции sort можно очень просто сортировать массивы
[1, 3, 9, 2].sort(function(a,b){return a-b;});
  // Returns: [1, 2, 3, 9]

UPD: Стоить заметить, что для сортировки числовых значений надо задать функциональный литерал иначе функция сортирует массив как строковые значения.

Но как быть, когда нам пришел json объект с произвольными данными и нам надо отсортировать его по какому-то из значений, например, "цене товара" или "времени добавления" ?

Для этого в javascript в функцию sort можно передать функцию сортировки. Вот пример, как можно сортировать json объект на javascript
[
  { name: "Клиент 1", price: 2000 },
  { name: "Клиент 2", price: 1000 },
  { name: "Клиент 5", price: 1200 },
  { name: "Клиент 3", price: 3000  }
].sort(function(obj1, obj2) {
  // Сортировка по возрастанию
  return obj1.price-obj2.price;
});

Для обратной сортировки можно поменять местами первый и второй объект
[
  { name: "Клиент 1", price: 2000 },
  { name: "Клиент 2", price: 1000 },
  { name: "Клиент 5", price: 1200 },
  { name: "Клиент 3", price: 3000  }
].sort(function(obj1, obj2) {
  // Сортировка по убыванию
  return obj2.price-obj1.price;
});

UPD: Сортировка массива объектов по строкам
[
  { name: "Бананы", price: 2000 },
  { name: "Сливы", price: 1000 },
  { name: "Тыква", price: 1200 },
  { name: "Ананасы", price: 3000  }
].sort(function(obj1, obj2) {
  if (obj1.name < obj2.name) return -1;
  if (obj1.name > obj2.name) return 1;
  return 0;
});

jQuery outerHTML или как получить html содержимое jQuery объекта

Очень часто мы создаем html объекты в jQuery и еще чаще нам необходимо получать готовую строку html его содержимого. Но возникает небольшая проблема, что при вызове метода html() мы получаем не все содержимое, а дочернего элемента. Что бы избежать этого и получать весь нужный html напишем небольшой плагин для jQuery. Узнать больше »

Как заблокировать выделение текста на странице

Иногда нам не хочется, что бы пользователь мог выделять текст на каком-то элементе страницы, для такой блокировки можно воспользоваться следующим javascript кодом написанным для библиотеки jQuery в виде плагина
(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

Теперь можем заблокировать выделение текста на всей странице повесив обработчик на тег body
// Отключаем выделение мышью
$('body').disableSelection();

HTML5 Local Storage

Могу предположить, что уже многие слышали у новых возможностях html5. Одной из такой является localStorage. Говоря простыми словами - это клиент-сайд база данных, которая позволяет сохранять данных в форме "ключ - значение". Это достаточно удобно для сохранения временных данных пользователей.

На данный момент эта возможность поддерживается большинством современных браузеров: Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+, Chrome 4+, Opera 10.6+. Далее я хотел бы рассказать как использовать это небольшое удобство для ваших проектов.

Узнать больше »
Страница 1 из 212