Статьи

JavaScript: насколько прост слишком прост?

Март 4, 2019

Следующее переиздано из Tech Times # 167 .

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

С другой стороны, JavaScript не так прост в реальном мире, и мы чувствовали, что слишком много других книг были виновны в том, что не предоставили своим читателям инструменты, необходимые для понимания и написания реального кода. Мы не хотели совершать одну и ту же ошибку, «замалчивая» язык, создавая легкую для чтения книгу.

Чтобы показать вам, что я имею в виду, давайте соберем один и тот же пример JavaScript с использованием кода на нескольких уровнях сложности. Пример будет простым: мы предложим пользователю спросить, следует ли открывать ссылки на внешние сайты в новом окне. Однако, как мы увидим, даже такой простой пример может стать очень сложным, если вы позволите!

Простой, но Гадкий

Если бы конечной целью была простота кода, этот пример мог бы быть действительно очень простым: 

<a href="http://example.com/" onclick="
    if (confirm('Open this link in a new window?')) {
      window.open('http://example.com/');
      return false;
    }
">external link</a>

Давайте сделаем небольшую паузу, пока все ветераны JavaScript в аудитории выбивают им глаза.

Хотя этот код, безусловно, будет работать, и его было бы чрезвычайно легко объяснить в книге JavaScript для начинающих, это очень грязное решение проблемы. Код находится в середине содержимого HTML, и его придется повторять для каждой ссылки этого типа на странице. Кроме того, URL-адрес ссылки повторяется в коде JavaScript, что может привести к потере синхронизации.

Все еще слишком просто?

Фрагмент кода, который мы видели выше, считался бы передовым примерно в 1997 году. Давайте посмотрим на более современную альтернативу, которая все еще пытается упростить ситуацию: 

 <a href="http://example.com/" class="ext">external link</a>
<script type="text/javascript">
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    var link = links[i];
    if (link.className == "ext") {
      link.onclick = clickHandler;
    }
  }

  function clickHandler() {
    if (confirm("Open this link in a new window?")) {
      open(this.href);
      return false;
    }
  }

</script>

Вместо того, чтобы добавлять код JavaScript непосредственно к каждой внешней ссылке в документе, эта версия использует один фрагмент кода JavaScript, который обнаруживает все внешние ссылки в документе (те, которые имеют class="ext"clickHandlerclick Эту функцию можно использовать для всех внешних ссылок, поскольку она использует this.href

Многие книги JavaScript, выпущенные за последние несколько лет, довольны улучшениями, которые мы сделали в этой версии скрипта. Код достаточно аккуратный и ведет себя как рекламируется. Что еще может попросить начинающий?

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

Просто лучше

Основные различия между только что увиденным сценарием и видом кода, который веб-профессионалы создают в реальном мире, можно обобщить двумя словами: ненавязчивый сценарий .

Ненавязчивые сценарии — это имя, присваиваемое ряду методов, которые разработчики используют для связывания своего кода JavaScript, чтобы он не мешал другим сценариям, которые могут воспроизводиться на той же странице. Например, сценарий, который мы только что видели, будет мешать любому другому сценарию, который определяет функцию с именем clickHandlerclick

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

Задача, когда вы пишете книгу типа «Простой JavaScript», состоит в том, чтобы показать новичкам, как писать ненавязчивые сценарии, не делая код слишком сложным для начинающего программиста. Вот что мы придумали: 

 var ExternalLinks = {

  init: function() {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
      var link = links[i];
      if (link.className == "ext") {
        Core.addEventListener(
          link, "click", ExternalLinks.clickHandler);
      }
    }
  },

  clickHandler: function(event) {
    if (confirm("Open this link in a new window?")) {
      open(this.href);
      Core.preventDefault(event);
    }
  }

};

Core.start(ExternalLinks);

Весь сценарий связан внутри объекта JavaScript с именем ExternalLinks Сценарий состоит из набора функций, которые определены как методы этого объекта.

Эта структура позволяет вызывать эти функции с одинаковыми именами (например, ExternalLinks.clickHandler

Как только сценарий определен, все начинается с вызова его метода initCore.start(ExternalLinks); ,

Проблема конфликтующих обработчиков событий решается библиотекой функций CoreCore.startCore.addEventListenerCore.preventDefault

Хотя в этом подходе отсутствуют некоторые особенности более сложных альтернатив , он достаточно прост, чтобы новички могли его понять и уверенно писать свои собственные сценарии, следуя той же схеме. Он также предоставляет им более продвинутые языковые функции, такие как объекты, поэтому, когда придет время принять один из более продвинутых стилей кодирования, у них появится хорошая возможность понять пример кода, который они найдут в Интернете.

Используя эту структуру кодирования с самой первой страницы, просто JavaScript избегает обучения начинающих вредных привычек. Вы также не получите ту неловкую главу, которая встречается на странице 100 нескольких других недавних заголовков JavaScript, где автор объясняет, что стиль кода, представленный до этого момента в книге, некорректен, и его следует избегать.

Уникальная книга

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

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

35
Share: