Марейн Хавербек - Выразительный JavaScript

вызывают функции deleteTalk и addComment непосредственно для действий, необходимых для удаления темы или добавления комментария. Это будет нужно для построения URL, которые ссылаются на темы с заданным именем, для которых мы определяем вспомогательную функцию talkURL.

function talkURL(title) {

  return "talks/" + encodeURIComponent(title);

}

Функция deleteTalk запускает запрос DELETE и сообщает об ошибке в случае неудачи.

function deleteTalk(title) {

  request({pathname: talkURL(title), method: "DELETE"},

          reportError);

}

Для добавления комментария нужно построить его представление в формате JSON и отправить его как часть POST-запроса.

function addComment(title, comment) {

  var comment = {author: nameField.value, message: comment};

  request({pathname: talkURL(title) + "/comments",

           body: JSON.stringify(comment),

           method: "POST"},

          reportError);

}

Переменная nameField, используемая для установки свойства комментария author, ссылается на поле <input> вверху страницы, которое позволяет пользователю задать его имя. Мы также подключаем это поле к localStorage, чтобы его не приходилось заполнять каждый раз при перезагрузке страницы.

var nameField = document.querySelector("#name");

nameField.value = localStorage.getItem("name") || "";

nameField.addEventListener("change", function() {

  localStorage.setItem("name", nameField.value);

});

Форма внизу страницы для создания новой темы получает обработчик событий "submit". Этот обработчик запрещает действие по умолчанию (что привело бы к перезагрузке страницы), очищает форму и запускает PUT-запрос для создания темы.

var talkForm = document.querySelector("#newtalk");

talkForm.addEventListener("submit", function(event) {

  event.preventDefault();

  request({pathname: talkURL(talkForm.elements.title.value),

           method: "PUT",

           body: JSON.stringify({

             presenter: nameField.value,

             summary: talkForm.elements.summary.value

           })}, reportError);

  talkForm.reset();

});

Обнаружение изменений

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

Учитывая созданную на сервере систему и то, как мы определили displayTalks для обработки изменений тем, которые уже есть на странице, сам механизм длинных запросов оказывается неожиданно простым.

function waitForChanges() {

  request({pathname: "talks?changesSince=" + lastServerTime},

          function(error, response) {

    if (error) {

      setTimeout(waitForChanges, 2500);

      console.error(error.stack);

    } else {

      response = JSON.parse(response);

      displayTalks(response.talks);

      lastServerTime = response.serverTime;

      waitForChanges();

    }

  });

}

Эта функция вызывается однажды, когда программа запускается, и затем продолжает вызывать себя, чтобы убедиться, что запросы всегда работают. Когда запрос не удаётся, мы не вызываем reportError, чтобы не раздражать пользователя всплывающим окном каждый раз при проблеме соединения с сервером. Вместо этого ошибка выводится в консоль (для облегчения отладки), и делается следующая попытка через 2,5 секунды.

Когда запрос удаётся, на экран выводятся новые данные, и lastServerTime обновляется, чтобы отражать тот факт, что мы получили данные в соответствии с этим новым моментом времени. Запрос сразу стартует заново, и ждёт следующего обновления.

Если вы запустите сервер, и откроете два окна браузера с адресом localhost:8000, вы увидите, что действия, выполняемые вами в одном окне, моментально отображаются в другом.

Упражнения

Следующие упражнения заключаются в изменении системы, описанной в этой главе. Для работы над ними, убедитесь, что вы скачали код и установили Node.js.

Сохранение состояния на диск

Сервер держит все данные в памяти. Если он упадёт или перезапустится, все темы и комментарии будут потеряны.

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

Обнуление полей комментариев

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