Шаблон проектирования MVC в ванильном JavaScript

Чтобы проверить это, мы можем убедиться, что элемент обновляется и изменяет состояние:

 var ElementMock = function ElementMock() {
  this.innerHTML = null;
};

// Stub functions, so we can pass the test
ElementMock.prototype.querySelector = function querySelector() { };
ElementMock.prototype.addEventListener = function addEventListener() { };
ElementMock.prototype.focus = function focus() { };

// Arrange
var elementMock = new ElementMock();

var view = new PenguinView(elementMock);

var viewModel = {
  name: 'Chinstrap',
  imageUrl: 'http://chinstrap1.jpg',
  size: '5.0kg (m), 4.8kg (f)',
  favoriteFood: 'krill',
  previousIndex: 1,
  nextIndex: 2
};

// Act
view.render(viewModel);

// Assert
assert(elementMock.innerHTML.indexOf(viewModel.name) > 0);
assert(elementMock.innerHTML.indexOf(viewModel.imageUrl) > 0);
assert(elementMock.innerHTML.indexOf(viewModel.size) > 0);
assert(elementMock.innerHTML.indexOf(viewModel.favoriteFood) > 0);
assert(elementMock.innerHTML.indexOf(viewModel.previousIndex) > 0);
assert(elementMock.innerHTML.indexOf(viewModel.nextIndex) > 0);

Это о решает все большие проблемы, меняя состояние и проводку событий. Но откуда поступают данные?

Модель

В MVC все заботятся о модели Ajax. Например:

 var PenguinModel = function PenguinModel(XMLHttpRequest) {
  this.XMLHttpRequest = XMLHttpRequest;
};

Обратите внимание, что модуль XMLHttpRequest Это способ сообщить коллегам-программистам, какие компоненты необходимы для этой модели. Если модели требуется больше, чем простой Ajax, вы можете сигнализировать об этом несколькими модулями. Кроме того, с помощью модульных тестов я могу вводить макеты, которые имеют тот же контракт, что и оригинальный модуль.

Время, чтобы получить пингвина на основе индекса:

 PenguinModel.prototype.getPenguin = function getPenguin(index, fn) {
  var oReq = new this.XMLHttpRequest();

  oReq.onload = function onLoad(e) {
    var ajaxResponse = JSON.parse(e.currentTarget.responseText);
    // The index must be an integer type, else this fails
    var penguin = ajaxResponse[index];

    penguin.index = index;
    penguin.count = ajaxResponse.length;

    fn(penguin);
  };

  oReq.open('GET', 'https://codepen.io/beautifulcoder/pen/vmOOLr.js', true);
  oReq.send();
};

Это указывает на конечную точку и получает данные с сервера. Мы можем проверить это, высмеивая данные с помощью модульного теста:

 var LIST_OF_PENGUINS = '[{"name":"Emperor","imageUrl":"http://imageUrl",' +
  '"size":"36.7kg (m), 28.4kg (f)","favoriteFood":"fish and squid"}]';

var XMLHttpRequestMock = function XMLHttpRequestMock() {
  // The system under test must set this, else the test fails
  this.onload = null;
};

XMLHttpRequestMock.prototype.open = function open(method, url, async) {
  // Internal checks, system under test must have a method and url endpoint
  assert(method);
  assert(url);
  // If Ajax is not async, you’re doing it wrong 🙂
  assert.strictEqual(async, true);
};

XMLHttpRequestMock.prototype.send = function send() {
  // Callback on this object simulates an Ajax request
  this.onload({ currentTarget: { responseText: LIST_OF_PENGUINS } });
};

// Arrange
var penguinModel = new PenguinModel(XMLHttpRequestMock);

// Act
penguinModel.getPenguin(0, function onPenguinData(penguinData) {

  // Assert
  assert.strictEqual(penguinData.name, 'Emperor');
  assert(penguinData.imageUrl);
  assert.strictEqual(penguinData.size, '36.7kg (m), 28.4kg (f)');
  assert.strictEqual(penguinData.favoriteFood, 'fish and squid');
  assert.strictEqual(penguinData.index, 0);
  assert.strictEqual(penguinData.count, 1);
});

Как видите, модель заботится только о необработанных данных. Это означает работу с объектами Ajax и JavaScript. Если вы не уверены в Ajax в ванильном JavaScript , есть статья с дополнительной информацией.

Модульные тесты

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

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

Не стесняйтесь осматривать весь набор юнит-тестов . Я думаю, что это поможет вам понять этот шаблон дизайна. Каждый тест для конкретного случая использования; думать об этом как о гранулированных проблемах. Модульные тесты помогут вам обдумать каждую проблему кодирования в отдельности и решить эту проблему. Такое разделение функциональных проблем в MVC оживает с каждым модульным тестом.

Заглядывая вперед

Демонстрация пингвинов имеет только жизнеспособную концепцию, чтобы показать, насколько полезной может быть MVC. Но есть много улучшений, которые можно повторить:

• Добавить экран со списком всех пингвинов
• Добавьте события клавиатуры, чтобы вы могли пролистывать пингвинов, добавьте также
• SVG-диаграмма для визуализации данных, выбора любой точки данных, например размера пингвина

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

Вывод

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

В программировании идея состоит в том, чтобы оставаться рядом с проблемой под рукой, устраняя при этом бесполезность. Искусство программирования раскрывает одну проблему за раз. В MVC это означает одну функциональную проблему за раз.

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

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

Эта статья была рецензирована Vildan Softic . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!