Использование понимания объекта jQuery

Мне пришлось перепрыгнуть в jQuery-разработку, не затрачивая слишком много времени на изучение всех связанных основ, поэтому есть одна вещь, которая меня отталкивает совсем немного.

Я вижу два разных способа доступа наших разработчиков к объектам jQuery:

Случай 1:

var container =  $("#containerId");

// Then use it as:
container.hide();

Случай 2:

var container =  $("#containerId");

// Then use it as:
$(container).hide();

Из моих тонких современных знаний, обернув контейнер, как в var obj = $(container), мы получаем объект jQuery obj, с которым мы можем работать.

Но почему же я вижу, что разработчики с перерывами снова обертывают его при использовании как в $(obj).doSomething()?

Изменить: вопрос, предложенный как дубликат, задает вопрос о лучших практиках и хотя похоже, мой вопрос заключается в понимании обертки объекта jQuery.

Ответ 1

Вторая упаковка ничего не делает, как я помню. Поэтому, если может быть селектор, элемент dom или объект jQuery, вы можете просто его обернуть и не заботитесь о том, что это было.

Но если вы знаете, что это объект jquery, вы не должны использовать обертку.

Ответ 2

Когда разработчики разрабатывают функцию, например, в плагине jQuery, которая может получить параметр, который является либо элементом DOM, либо объектом jQuery, либо селектором, то они его используют:

function x(container) {
    container = $(container);
    // use container as a jquery object
}

// these both work:
x("#containerId");
x($("#containerId"));
x(document.getElementById("containerId"));

Ответ 3

Случай 1: С помощью селектора jQuery можно найти элемент dom и вернуть объект jQuery:

var container =  $("#containerId");

// Then use it as:
container.hide();

Случай 2: избыточный/ошибочный (или, возможно, если вы не уверены, что переменная уже является объектом jQuery, но вам это нужно): Используя селектор jQuery, чтобы найти элемент dom и вернуть объект jQuery, передайте его новому объекту jQuery:

var container =  $("#containerId");

// Then use it as:
$(container).hide();

Случай 3: Выберите элемент dom, затем используйте его в конструкторе для нового объекта jQuery (на котором вы затем вызываете hide())

var container =  document.getElementById("#containerId");

// Then use it as:
$(container).hide();

Ответ 4

Короткий ответ: Случай 2 создает объект jQuery из существующего объекта jQuery, что необязательно.

$является псевдонимом функции jQuery Selector. Функция может принимать несколько разных аргументов, например...

Строка: var container = $("#containerId");
Элемент html: var document = $(document);
Элемент jQuery: var container = $($("#containerId"))

В третьем примере 2-й вызов функции "Селектор" работает, но он нелогичен.

Ответ 5

Case 1 всегда предпочтительнее. Всегда используйте кеш и повторно используйте jQuery объекты, если это возможно. Это даст лучшую производительность.

Case 2 - это самый простой способ убедиться, что вы работаете с объектом jQuery. Есть лучшие способы, которые вы можете увидеть в этом сообщении SO. Я бы никогда не рекомендовал выбирать такие объекты. Если бы я ожидал объект jQuery, я бы сделал это вместо этого. например.

function hideContainer(container)
{
    if(!(container instanceof jQuery))
    {
         container =  $("#containerId");
    }

    container.hide();
}

Фактически быстрее выбрать объект снова с помощью строки селектора (вместо использования ссылки на объект), так как ему не нужно обращаться к свойствам объекта, чтобы определить селектор.

Взгляните на эти тестовые примеры jsPerf, и вы увидите, что Case 2 намного медленнее, чем Case 1 (это было 40 % медленнее в моем случае, в Chrome).

Но опять же, я думаю, что Case 2 - это самый простой и быстрый способ гарантировать, что у вас есть объект jQuery; поэтому вы так часто видите.