jQuery: что “запрещается” сделать в плоскости JavaScript
Вопрос о лучших практиках jQuery.
Я пишу очень jQuery интенсивная веб-страница. Я плохо знаком с jQuery и замечаю его питание, но поскольку я иду с тяжелым опытом и знаниями JavaScript, мой вопрос: Что должно быть сделано в jQuery и что в плоскости JavaScript.
Например, существуют обратные вызовы, которые отправляют простой Объект DOM как аргумент. Если я использую это или если я переношу его (как $(this)).
Имеет значение, если я делаю это x=y или $ (этот) .attr ("x", y).
4 ответа
Если ваша функция получает объект DOM и вам не нужна никакая функциональность jQuery для этого объекта DOM, то нет необходимости преобразовывать его в объект jQuery. Например, если вы получаете объект checkbox, вы можете исследовать свойство checked без использования jQuery.
Однако если вам нужно перейти к элементу, отличному от checkbox, возможно, стоит преобразовать его:
function yourCallback(cb) {
cb = $(cb);
var sel = $(cb).closest('td').next().find('select');
// For example, update the options in a neighboring select field
...
}
jQuery (как и другие библиотеки) прекрасно сочетается с родным JS. Если вам нужна дополнительная функциональность, дополните соответствующий объект.
Что касается вашего последнего вопроса: Вы можете найти функцию data полезной, чтобы избежать нестандартных атрибутов DOM. Если свойство x в вашем вопросе на самом деле является допустимым атрибутом DOM, вы можете написать либо this.x = y, либо $(this).attr('x', y), IMO это не имеет большого значения. Однако, если x не является атрибутом DOM, используйте
$(this).data('key', value)
Таким образом, вы можете хранить произвольные пары ключ-значение с элементом DOM, где value может быть произвольным примитивным значением или объектом.
Я думаю, это вызов для суждения. Используйте свой здравый смысл.
Например, если у вас на странице 1000 div, вы, вероятно, не захотите заключать его в $ (..)
$('div').click(function() {
this.id = Random.guid(); // instead of $(this).attr('id', Random.guid());
});
Что касается других назначений, если вы понимаете, что делает jQuery, вы можете придерживайтесь его только для единообразия, но помните о проблемах с производительностью, как в приведенном выше примере.
Как упоминает @colinmarc, иногда jQuery стирает различие между атрибутами элемента и свойствами объекта, что может вводить в заблуждение и приводить к ошибкам.
Когда вы используете jQuery, он всегда возвращает экземпляр jQuery, если только вы не используете такую функцию, как val ();
мы используем $ (this) .value вместо this.value, чтобы убедиться, что это является экземпляром jQuery.
если где-то в вашем коде вы установили переменную my_link, которая равна объекту DOM, а не функции jQuery ... в дальнейшем в вашем приложении my_link.val () приведет к ошибке, но при выполнении $ (my_link). val () уверит вас, что функция val будет доступна. поскольку $ () возвращает экземпляр jquery.
Прошу прощения за недоразумение в моем предыдущем посте.
Поскольку объекты jQuery имеют более богатую функциональность, чем узлы JS DOM, если вы находитесь в затруднительном положении, вы можете также использовать jQuery. JQuery настолько легкий, что нет особых причин не использовать объекты jQuery.
Имеет ли значение, сделаю я this.x = y или $ (this) .attr ("x", y).
Собственный код будет немного быстрее, но вы, вероятно, потратите больше времени на другой код - обход или построение DOM. В этом конкретном примере первое более лаконично, поэтому я бы выбрал его. Поскольку jQuery очень легкий, я склонен плавно переключаться туда и обратно.
Вот и другие рекомендации, которым мы следуем:
- Для обратных вызовов, таких как обработчик кликов, вам необходимо следовать API - обычно это узел DOM. Подобный код, который вы пишете, вероятно, также должен содержать узлы DOM. Но если у вас есть список элементов, всегда используйте объект jQuery.
- Для большей части кода я пытаюсь посмотреть, можете ли вы структурировать код как плагин jQuery - применив некоторые преобразования к набору узлов DOM. Если вы сможете это сделать, вы получите некоторые рекомендации по архитектуре плагина.
- Я использую механизм связывания / триггера jQuery, поскольку он довольно гибкий и мало связан.
- Чтобы код оставался ясным, я бы рекомендовал добавлять имена к объектам jQuery со знаком доллара. Например,
var $ this = $ (this);. Хотя на самом деле нет ничего страшного в чрезмерном вызове $ (), в конечном итоге он выглядит неаккуратно, если вы вызываете его слишком часто.
Надеюсь, это поможет.