четверг, 20 июня 2013 г.

Несколько вещей, который можно узнать из кода jQuery

1. Передача глобальных аргументов в анонимную самовызывающуюся функцию.

1. Передача функции window сокращает время поиска переменных.
2. Передача функции document позволяет эффективней сжимать код компилятором.
3. Передача undefined защищает от внешнего изменения значения undefined.


// this = window;

undefined = true;

(function(window, document, undefined){

    window.alert();  

    if (foo === undefined) {window.alert.log('OK');}

})(this, this.document /*, undefined */);

Пример компиляции

(function(A, B, C){

    A.alert();  

    if (foo === C) {A.alert.log('OK');}

})(this, this.document /*, undefined */);

2. Вы можете имитировать асинзхронное выполнение функции, разбивая цикл на маленькие порции, используя для этого setTimeout().

// Sync
(function() {
  for(var x = 0; x < 100000; ++x) {console.log(x)}
})()

// ASync
var x = 0;
setTimeout(function() {
   console.log(x++);
   if(x < 100000) setTimeout(arguments.callee, 1);
} ,1)

При вызове таймаута выполняется функция. Если функция работает дольше, чем вызывается следующий таймаут, то может произойти ошибка.
Поэтому в таймауте желательно вызывать самовызывающуюся функцию. Пока такая функция не отработает, следующий таймаут не будет вызван.
Это нас защищает от проблем.

(function startNextTimeout(){
    doStuff(); // Тут мы делаем то, что обычно делаем внутри таймаута.
    setTimeout(startNextTimeout, 100);
)();

Также можно бесконечно обновлять  данные через AJAX.

(function updateData(){
    doStuff();
    $('#update').load('something.php', function(){
        updateData();  // Функция бесконечно вызывает сама себя.
    });
})();

3. Проверка document.ready

function () {
    if (readyList) {
        return;
    }

    readyList = jQuery.Callbacks("once memory");

    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if (document.readyState === "complete") {
        // Handle it asynchronously to allow scripts the opportunity to delay ready
        return setTimeout(jQuery.ready, 1);
    }

    // Mozilla, Opera and webkit nightlies currently support this event
    if (document.addEventListener) {
        // Use the handy event callback
        document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);

        // A fallback to window.onload, that will always work
        window.addEventListener("load", jQuery.ready, false);

        // If IE event model is used
    } else if (document.attachEvent) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", DOMContentLoaded);

        // A fallback to window.onload, that will always work
        window.attachEvent("onload", jQuery.ready);

        // If IE and not a frame
        // continually check to see if the document is ready
        var toplevel = false;

        try {
            toplevel = window.frameElement == null;
        } catch(e) {}

        if (document.documentElement.doScroll && toplevel) {
            doScrollCheck();
        }
    }
}

4. AJAX у jQuery исправляет очень многи браузерные баги, связанные с AJAX.

5. Выборка элементов
$('#id').find('tag.class') происходит быстрее, чем
$('#id tag.class')
потому что второе атоматически через регулярное выражение преобразуется в первое, а это занимает дополнительное время!

6. Замена eval для превращения строки с данными в объект

var data = 'alert("OK")';

(new Function('return ' + data))();

7. Код самой jQuery можно расширять и переписывать, как например метод $.unique(), чтобы он мог обрабатывать обычные массивы.

Комментариев нет:

Отправить комментарий