jQuery « Как работает this в jQuery?

Мне тут оптимизировали мой файл со скриптами вот таким путём:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

var t = $(this);
var priceBox_currentPrice_width = t.find('.priceBox-currentPrice').width();
var priceBox_link_width  = t.find('.priceBox-link').width();
var priceBox_oldPrice_width = t.find('.priceBox-oldPrice').width();
 

Ну и так все зисы.
А есть ли в этом сколько-нибудь смысла?

Мне кажется что выбор элемента через this должен очень быстро работать, он же наверное и так подобным образом вызывается, но это чисто мои мысли, не основанные не на чём ).
Мне интересно мнение того кто в курсе как оно работает :-).
0
jquery

1 ответов

Ну да - обертывание this должно быть очень быстрым - это же не поиск по дереву DOM, по сути вы из прямого линка на объект, создаете объект типа jQuery с ссылкой на тот же объект (той же ссылкой), так что такая оптимизация врядли даст существенный рост скорости.

1

Никакого смысла в этом нет, разве что для удобства при написании кода.

1

судя по моим тестам, такая оптимизация действительно полезна, так как например на моём ноуте операция обёртывания работает довольно медленно (0.5ms). если этот код будет вызываться редко, то тут особо и оптимизировать ничего не нужно, но вот если его придется прогонять сотню раз для генерации мелких объектов, то тогда браузер может нехило повиснуть.

0

Если учитывать что автор скриптом, вроде как собирается обрабатывать ширину колонок при перетаскивании, то:
- первый +: не создаются три объекта jQuery и не привязываются в них методы jQuery, а всего один;
- второй +: после выхода из процедуры освобождается память от одного объекта;
- третий +: ссылка $(this) это jQuery object в ячейке с номером [0] которого лежит this, до создания которого создается jQuery object и проверяется что передано "не NULL ли?";


var jQuery = (function() {           <---- global jQuery

// Define a local copy of jQuery

var jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
--->           return new jQuery.fn.init( selector, context, rootjQuery );   <--- создается новый объект

                ...
                здесь определение пачки переменных и объектов
                ...
jQuery.fn = jQuery.prototype = {
          constructor: jQuery,                                       -----> конструктором выступает local jQuery
    init: function( selector, context, rootjQuery ) {
    var match, elem, ret, doc;

    // Handle $(""), $(null), or $(undefined)
    if ( !selector ) return this;

--->    // Handle $(DOMElement)       <--- это обработчик внутри объекта jQuery;
    if ( selector.nodeType ) {
      this.context = this[0] = selector;
      this.length = 1;
      return this;
    }

    // The body element only exists once, optimize finding it
    if ( selector === "body" && !context && document.body ) {
      this.context = document;
      this[0] = document.body;
      this.selector = selector;
      this.length = 1;
      return this;
    }

                ...
);
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;
 

В общем весело. Мы видим что отличия между this или просто DOMelement-om у jQuery нет!

- четвертый +: его можно дальше применять для еще пачки вызовов в контексте вашего объекта;
- пятый +: в jQuery цепочках его можно элементарно без затрат конвертировать в this выбрав нулевую ячейку;
- шестой +: переменная t может быть использована в замыканиях;
- седьмой +: исходя из вышесказанного плавность перетаскивания границы колонок будет выше, ведь событие будет срабатывать нешуточное количество раз.
- восьмой +: с оглядкой на сказанное выше - лучше весь код писать так, чтобы потом не вылавливать лаги. Не привыкайте писать медленный код!
0