Category Archives: javascript
Самый хороший способ подгрузки яваскриптов – тегом script
Использовали мы на проекте одну лебедевскую библиотеку — include.js. Умеет она интересные вещи, вроде последовательной загрузки зависимых библиотек в нужном порядке. Нужно в яваскрипте написать js.include( ‘my/coolwiidget’ );. Работает она, если на пальцах, следующим образом: делается ajax-запрос, которым грузится текст нужного скрипта, потом ищутся в тексте все js.include, делается их подгрузка, после чего делается eval …
Фреймворки для создания MVC-подобной архитектуры на javascript
Выбирал между backbone (habrahabr.ru/blogs/javascript/118782/) и knockout (http://habrahabr.ru/blogs/javascript/121926/). Для выбора полезно почитать stackoverflow.com/questions/5112899/knockout-js-vs-backbone-js-vs. В итоге выбрал knockout — менее монструозный и лично мне показался понятнее, к тому же не навязывает REST и не требует дополнительных библиотек. Он реализует паттерн MVVM, который, думаю, больше подходит для клиентской части web-приложения, чем MVC. На сайте есть подробные доки и …
Lazy load баннеров
Сегодня из-за очередных проблем с sol.adbureau.net было решено реализовать ленивую загрузку баннеров. Начальное решение было использовать iframe, но идея была не очень удачной, т. к. могут быть проблемы с подсчётом кликов, да и модные картинки, увеличивающиеся при наведении, будут вести себя странно. А как этот iframe смотрится в разных браузерах — это вообще сказка) В …
Проблемы рендеринга страниц в Firefox
Имеем флеш-плеер. На некоторых страницах при нажатии на кнопку «плэй» в плеере происходит перезагрузка flash-плеера. После долгих и мучительных разбирательств выяснилось следующее: Flash-player при смене статуса (play/pause) меняет фавикон на сайте следующим кодом: $(«link[rel=’shortcut icon’]»).remove(); $(«head»).append(«<link rel=’shortcut icon’ href='» + link + «‘ />»); Меняет на всех страницах, а перезагрузка плеера происходит только на некоторых, …
Как бороться с повторным добавлением обработчика события в jQuery
Нужно было навешивать и снимать обработчик клика динамически, при этом не затронув чужие обработчики, а их на элементе несколько, каждый ставится своим виджетом. Мой jQuery-ui-виджет навешивает клик только если его ещё нет. Для этого сделан отдельный метод: _bindClick: function() { var me = this; var $me = $( me.element ); // боремся с повторным навешиванием …
Работа с событиями в jQuery 1.7
В jQuery 1.7 добавили .on() и .off() для единообразия работы с событиями. bind, live и delegate могли вести себя непредсказуемо при использовании вместе. Например, $(document).unbind(‘click’) убирал все live(‘click’)-события со всего документа. Новое API событий .on() and .off() призвано как-то унифицировать систему создания обработчиков событий: Старое API Новое API $(elems).bind(events, fn) $(elems).on(events, fn) $(elems).bind(events, { mydata: 42 }, …
Что такое IIFE
IIFE (Immediately-Invoked Function Expression, «iffy») — немедленно выполняемый функтор. Если не ругаться, то это функция, которая выполняется сразу после объявления. Примеры: (function(){ /* code */ }()); (function(){ /* code */ })(); !function(){ /* code */ }(); // facebook style Очень удобны тем, что не захламляют глобальное пространство переменных, могут использоваться для создания замыканий и т. …
Очередь на js
Нужно было сделать простенькую очередь, чтобы добавить много колбэков, а потом выполнить последний из очереди по таймауту, отсчитываемому от времени последнего добавления. Очередь получилась простенькая (за полчаса много и не сделаешь). Использование: //опциональное время в милисекундах — таймаут от последнего события var queue = queueFactory( 5000 ); // у меня дёргается скрипт по определённому событию, …
jQuery.deferred
В jQuery 1.5 была полностью переработана модель асинхронных запросов. Теперь они возвращают deferred-объект, содержащий promise-объект, который содержит методы, позволяющие узнать состояние запроса или навесить дополнительные обработчики. promise-Объект содержит методы then, done, fail, isResolved и isRejected. Суть нового подхода состоит в следующем: $.when($.ajax(«/page1.php»), $.ajax(«/page2.php»)).done(function(a1, a2){ // a1 и a2 — аргументы, отвечающие соответственно за запросы к …
jQuery.delegate
jQuery.delegate и jQuery.undelegate появились в jQuery 1.4.2. Это аналоги .live и .die(). У .live и .die() есть проблемы с, к примеру, вложенными объектами, с встраиванием в цепочки и много ещё. Синтаксис .delegate отличается от .live и, соответственно, .click и т.п. Пример использования: // Using .live() $(«table»).each(function(){ $(«td», this).live(«hover», function(){ $(this).toggleClass(«hover»); }); }); // Using .die() …