Я использую слишком много JQuery? Когда я пересекаю черту?

Question

В последнее время я часто использую jQuery и JavaScript, часто для того, чтобы делать то же самое, что и до CSS.

Например, я чередую цвет строк таблицы или создаю эффекты наведения кнопок и ссылок, используя JavaScript / jQuery. Это приемлемо? Или я должен продолжать использовать CSS для таких вещей?

Итак, настоящий вопрос: Когда я использую слишком много jQuery? Как я могу понять, когда я пересекаю черту?

Answer 1

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

jQuery, безусловно, не следует использовать в качестве замены CSS - подумайте о пользователях, у которых отключен JavaScript.

Я знаю, что это изображение используется слишком часто, но кто-то должен был добавить его сюда:

Изображение предоставлено - bobince .

Answer 2

Я не думаю, что здесь есть «линия», я думаю, что есть некоторые простые вещи и некоторые серые области, которые вы должны сбалансировать, что вы хотите. Расширенные функции, производительность, совместимость - все это треугольник, трудно сделать все 3 как можно лучше одновременно.

Если CSS может сделать это, конечно, сделайте это в CSS. Если это не может быть сделано в CSS, используйте jQuery, но не используйте jQuery там, где накладные расходы не нужны, например, $(this).attr("id") обычно может быть this.id, многие вещи доступны строго в DOM и все еще в кросс-браузерном режиме.

Когда вы используете это слишком много? Когда он не необходим , иногда вам нужен jQuery для кросс-браузерных селекторов CCS3, иногда вы используете уже доступный селектор CSS и помещаете его в таблицу стилей . Есть сотни других примеров, но если вы можете обойтись без кроссбраузерной чистоты без него, тогда нет нужды, такие вещи, как исчезновение, не являются тривиальными. Если вам вообще нужно включить jQuery, нет никаких причин не использовать .fadeIn(), если у вас есть (код включен, зачем его дублировать?)

JavaScript против JavaScript

Как сказано в комментариях здесь, ваш сайт должен предлагать все основные функции без JavaScript , это обычно не проблема, например. захват клика и загрузка контента через AJAX ... если вы его не захватываете, они выполняют полную перезагрузку страницы, это простой возврат к стандартному поведению. Тем не менее, все "навороты"? Это точно, но я не думаю, что вам стоит отклониться назад, чтобы предложить all функциональность без JavaScript. Пользователь выключил его, он не получает ничего особенного, это нормально ... посмотрите на SO в качестве примера, отключите javascript, отключите множество несущественных функций , вы можете просматривать все отлично , но комментирование, голосование, в основном действия не обязательно доступны без JavaScript.

Answer 3

Если вы отключите java-скрипт в своем браузере и ваш сайт / приложение не будет работать или работать без него, то у вас возникла проблема.

JS великолепен, но он никогда не должен мешать пользователю использовать что-то, что вы создали, ЕСЛИ оно отключено.

Answer 4

Если это что-то, что легко выполнимо в CSS, тогда бросьте jQuery и сделайте это в CSS. Таким образом, вам не нужно зависеть от выполнения javascript для внешнего вида вашего приложения.

Answer 5

Вы используете слишком много jQuery, если можете установить один атрибут класса вместо множества атрибутов стиля. Например:

/** Select 400 rows and change the background colour **/
$('#table tr').css('backgroundColor', 'blue');

Вместо:

/** jQuery **/
$('#table').addClass('blueRows');

/** CSS **/
#table tr.blueRows {
    background-color: blue;
}

Чтобы избежать стилизации jQuery, вы также можете установить класс для тела, чтобы было проще стилизовать его с помощью CSS для браузеров с поддержкой Javascript:

/** jQuery **/
$(document).addClass('JS-enabled');

/** CSS **/
body #table tr{
    background: #FFF;
}

body.JS-enabled #table tr {
    background: blue;
}

Answer 6

Например, я чередую цвет строк таблицы или создаю эффекты наведения кнопок и ссылок, используя JavaScript / jQuery. Это приемлемо? Или я должен продолжать использовать CSS для такого рода вещей?

Действительно, это зависит от поддержки вашего браузера. Вы можете сделать зебра на столах просто с помощью этого кода:

table.classname tr:nth-child(even) td {
  background-color: #ddd;
}

Но это не работает в Internet Explorer вообще (хотя это должно произойти в следующей версии 9). Так что, если вам нужно, чтобы все выглядело одинаково в разных браузерах, используйте вместо этого jQuery.

Для эффектов наведения ссылок, если вы подразумеваете изменение цвета и т. Д., А не причудливую анимацию, определенно использует CSS , поскольку это поддерживается везде.

Answer 7

Хорошо, не отмечайте меня как тролля ...

Если ваше веб-приложение не работает в среде, где JavaScript не включен или не совместим с JQuery, тогда просто выберите то, что вам проще всего. Нет никакой пользы в том, чтобы иметь визуальную поддержку для приложения, если оно вообще не работает.

То есть, если вы хотите, чтобы он работал позже без поддержки JavaScript, вам следует попытаться использовать css. Но если вы не планируете поддержку без JavaScript, и она работает, выбирайте то, что проще для вас

Answer 8

jQuery чаще всего применяется после загрузки документа. Я думаю, что если вы можете достичь того же с простым CSS, то CSS - это путь. Меньшая нагрузка на браузер, и если у кого-то не включен jQuery, по крайней мере, есть еще (какой-то) стиль из-за CSS.