Pilot.js: profiling (1000 iterations)

 1660ms, 587492 calls:  jQuery.Deferred + jQuery.Events
 1170ms, 378492 calls:  MyDeferred + jQuery.Events
 470ms,  169288 calls:   MyDeferred + MyEventEmitter

jQuery.FileAPI — v0.1.0

jQuery plugin для FileAPI, умеет:

  1. Грузить сразу много файлов, либо по одному
  2. Загружать изображения и обрабатывать их на клиенте (например кроп)
  3. Гибкие настройки (их очень много)
  4. Это очень крутая штука

Demo — rubaxa.github.io/jquery.fileapi/
GitHub — https://github.com/RubaXa/jquery.fileapi/

Возможностей и правду много, посмотрите примеры, вам понравится.

P.S. Есть возможность сделать снимок с помощью WebCamera, кадрировать, повернуть и  всё это на клиенте, с поддержкой старых браузеров, а результат загрузить на сервер.

jQuery extension, add support `classList`.

GitHub — https://gist.github.com/RubaXa/5575339
jsPerf — http://jsperf.com/classlist-jquery/2

jQuery extension, add support `scrollstart` and `scrollend` events.

/**
 * @flags
 * $.isScrolled; // boolean
 *
 * @binding
 * $(window).bind('scrollstart scrollend', function (evt){
 *     if( evt.type == 'scrollstart' ){
 *         // logic
 *     }
 * });
 */
https://gist.github.com/RubaXa/5569075

Все проще, чем кажется

function foo(el/**Mixed*/){

    if( el && el.jquery ){

        // это jQuery коллекция

        el = el[0];

    }

   /*__*/

}

jQuery: memory leaks

Думаю, для многих не секрет, что при назначении обработчика события, в `jQuery.cache` добавляется ссылка на этот элемент. И если вовремя не снять слушателя, это приведет к утечке памяти.

Чаще всего, такая проблема возникает, если работать с DOM напрямую, минуя методы jQuery, например, используя innerHTML.         

<div id=”layout”>
        <button>click me</button>
</div>

<script>
        // Вешаем обработчик
        $(‘button’).click(function (){
                    // Загружаем какой-то html
                    $.get(‘/layout’, function (content){
                                // Заменяем текущие содержание на новое
                                $(‘#layout’).prop(‘innerHTML’, content );
                    });

});

</script>

В примере содержимое `#layout` заменяется и ссылка на элемент `button` «застревает» в `jQuery.cache`. Если перед заменой, вызвать `$(‘#layout’).empty()`, то утечки не будет.

Причина использования `innerHTML` в медленной работе jQuery методов. Случается, что при вызове $.fn.html/append (и подобных), браузер подвисает намертво.

Однако использование методов jQuery, для работы с DOM, не гарантирует, что утечки не будет.

Проблемы можно получить даже в достаточно просто коде:

$(new Image)
.attr(“src”, “http://domain.com/fail.png”)
.one(“load”, function (){ /*__*/ })

;

На первый взгляд, код безопасен, но происходит ошибка и событие `load` не отрабатывает — код “потек”.

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

Чтобы избежать таких ситуаций, я разработал маленькую утилиту, которая следит за объектом `jQuery.cache` и элементами, находящимися в нем. Если элемент не находиться в DOM, то он считается “утёкшим”.

Утилита содержит всего четыре метода:

• $.leaks.get() — получить список “утёкших” элементов;
• $.leaks.watch() — начать слежение за утечками, если они возникают в console будет выведено количество “утёкших” элементов (“jQuery leaks: XX”);
• $.leaks.unwatch() — остановить слежение;
• $.leaks.remove() — удалить “утечки” (вызов `$.clearData($.leaks.get())`).

Надеюсь данная утилита будет вам полезна.

Исходник — jquery.leaks.js

jQuery: Global EventEmitter

// Подписываемся
$(document).on('my-event-name', function (evt, arg1, arg2, etc){
    console.log('foo:', arg1);
    console.log('bar:', arg2);
    console.log('etc:', etc);
});


// Испускаем
$.event.trigger('my-event-name', 'FOO', 'BAR', 'QUX');