Разница между навязчивым и ненавязчивым JavaScript

В чем разница между навязчивым и ненавязчивым javascript - на простом английском. Краткость ценится. Короткие примеры также приветствуются.

Источник

6 ответов

Решение

Я больше не одобряю это, поскольку это было в силе в 2011 году, но, возможно, не в 2018 году и в последующий период.

Разделение проблем. Ваш HTML и CSS не привязаны к вашему JS-коду. Ваш код JS не встроен в какой-либо элемент HTML. Ваш код не имеет одной большой функции (или не функции) для всего. У вас есть короткие, краткие функции.

Modular. Это происходит, когда вы правильно разделяете проблемы. Например, ваша удивительная анимация холста не должна знать, как работают векторы, чтобы нарисовать прямоугольник.

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

Не строите горы мусора, когда вам нужно сделать что-то маленькое. Люди бесконечно усложняют свой код, переизбирая элементы DOM, обманывая семантический HTML и добавляя туда пронумерованные идентификаторы, и другие странные вещи, которые происходят из-за того, что они не понимают модель документа или какую-то другую технологию - поэтому они полагаются на "магические" слои абстракции, которые замедляют все до скорости мусора и приносят в горы наверху.

Источник

Никакой javascript в разметке не является ненавязчивым:

<div id="informationHeader">Information</div>

навязчивый:

<div onclick="alert('obstrusive')">Information</div>
Источник
  1. Разделение HTML и JavaScript (определите свой JavaScript во внешних файлах JavaScript)
  2. Изящная деградация (важные части страницы по-прежнему работают с отключенным JavaScript).

Для многословного объяснения, посетите страницу Википедии на эту тему.

Источник

Чтобы расширить ответ Майка: использование поведения UJS добавлено "позже".

<div id="info">Information</div>

... etc ...

// In an included JS file etc, jQueryish.
$(function() {
    $("#info").click(function() { alert("unobtrusive!"); }
});

UJS может также подразумевать легкую деградацию (мой любимый вид), например, другое средство, чтобы добраться до #info нажмите функциональность, возможно, предоставив эквивалентную ссылку. Другими словами, что происходит, если нет JavaScript, или я использую программу чтения с экрана и т. Д.

Источник

ненавязчивый - "не навязчивый; незаметный, неутешительный или скрытный".

навязчивый - "иметь или демонстрировать склонность к навязчивости, например, навязывая свое мнение или мнение другим".

навязчиво - "толкать (что-то) вперед или на человека, особенно без ордера или приглашения"

Итак, говоря о навязывании своего мнения, на мой взгляд, наиболее важной частью ненавязчивого JavaScript является то, что с точки зрения пользователя он не мешает. То есть сайт все равно будет работать, если JavaScript отключен настройками браузера. С включенным JavaScript или без него сайт будет по-прежнему доступен для людей, использующих программы чтения с экрана, клавиатуру без мыши и другие инструменты специальных возможностей. Возможно (возможно) сайт не будет таким "модным" для таких пользователей, но все равно будет работать.

Если вы думаете о "прогрессивном улучшении", то основная функциональность вашего сайта будет работать для всех, независимо от того, как они к ней обращаются. Затем для пользователей с включенным JavaScript и CSS (большинство пользователей) вы расширяете его с помощью большего количества интерактивных элементов.

Другой ключевой "ненавязчивый" фактор - это "разделение интересов" - то, о чем заботятся программисты, а не пользователи, но это может помочь предотвратить навязывание сторонам JavaScript опыта пользователя. С точки зрения программиста, избегание встроенного скрипта, как правило, делает разметку намного красивее и проще в обслуживании. Обычно намного проще отлаживать сценарий, который не разбросан по множеству встроенных обработчиков событий.

Источник

Даже если вы не работаете с ruby ​​on rails, эти первые несколько абзацев все равно предлагают отличное объяснение преимуществ ненавязчивого javascript.

Вот краткое изложение:

  • Организация: основная часть вашего javascript-кода будет отделена от HTML и CSS, поэтому вы точно знаете, где его найти.
  • DRY/Эффективность: поскольку javascript хранится за пределами какой-либо конкретной страницы вашего сайта, его легко повторно использовать на многих страницах. Другими словами, вам не нужно копировать/вставлять один и тот же код во множество разных мест (по крайней мере, далеко не так часто, как в противном случае).
  • Пользовательский интерфейс: поскольку ваш код может быть перемещен в другие файлы, они могут храниться в кеше на стороне клиента и загружаться только один раз (на первой странице вашего сайта), вместо того, чтобы получать javascript при каждой загрузке страницы на вашем сайте.
  • Простота минимизации, конкатенации: поскольку ваш javascript не будет разбросан внутри HTML, будет очень легко уменьшить размер его файла с помощью инструментов, которые минимизируют и объединяют ваш javascript. Меньшие файлы javascript означают более быструю загрузку страниц.
    • Обфускация: вы можете не заботиться об этом, но, как правило, минимизация и объединение javascript значительно усложнит чтение, поэтому, если вы не хотите, чтобы люди просматривали ваш javascript и выясняли, что он делает, и видели имена ваших функций и переменные, которые помогут.
  • Удобство обслуживания: если вы используете фреймворк, он, вероятно, установит соглашения о том, где хранить файлы javascript, поэтому, если кто-то еще работает над вашим приложением или если вы работаете над чьим-то еще, вы сможете делать обоснованные предположения, как туда, где находится определенный код javascript
Источник
Другие вопросы по тегам