Введение

Современные фреймворки JavaScript, такие как Angular, Vue и т. Д., Имеют встроенный механизм для структурирования кода JavaScript. Когда эти фреймворки не используются, мы можем использовать простые методы для структурирования нашего JavaScript. В этом посте я покажу вам один из них, используя шаблон модуля «Раскрытие».

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

Зачем структурировать код JavaScript

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

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

  • Преобразование кода в объекты многократного использования.
  • Переменная / функции, взятые из глобального пространства имен
  • Выставлять только публичных участников
  • «Более чистый» способ разоблачить публичных членов

Выявление структуры модуля

Вот пример разновидности стандартного формата и структуры паттерна раскрывающего модуля.

Начальная настройка

Прежде чем мы углубимся в код JavaScript, давайте поговорим о начальной настройке среды разработки. Я использую очень простой проект JavaScript для демонстрации, у него просто одна HTML-страница, несколько стилей CSS и базовый сервер разработки. Для получения дополнительной информации, пожалуйста, проверьте сообщение: Basic Front-end Dev. Настройка среды . Это станет отправной точкой для нашего движения вперед.

На данный момент у меня есть HTML и пустой файл app.js.

Код JavaScript приложения

Начнем с самого приложения. Следуя структуре, упомянутой выше, вот оболочка для нашего приложения.

var app = function () { 
  //private members //public API return { 
  }; 
}();

Теперь давайте добавим в наше приложение некоторые функции:

var app = function () { 
 //private members 
  title = 'Structure JavaScript';
   displayTitle = function(){ 
     alert(this.title); 
   } 
  displaySite = function(){ 
    alert('site info...'); 
   } 
     //public API return { 
         title:title, 
         displayTitle: displayTitle 
      }; 
}();

Здесь я добавил одно свойство title и две функции displayTitle () и displaySite (). Затем в разделе общедоступного API я показал свойство title и одну функцию. Обратите внимание, что я не раскрыл функцию displaySite, и это иллюстрирует частные функции, которые не должны быть доступны извне этого блока кода.

Затем я добавил следующий код в document.ready в index.html, как показано ниже:

<script> $(document).ready(function () { 
    console.log(app.title); 
    app.displayTitle(); 
    app.displaySite();//this will not work 
   }); 
</script>

Теперь, если вы запустите команду npm start и перейдете на страницу браузера, вы увидите, что первые две строки работают, а третья строка app.displaySite () не работает, что и ожидается.

Итак, это общая идея этого паттерна. Это помогает нам организовать наш код JavaScript, не загрязняя глобальное пространство имен.

Затем давайте посмотрим, как мы можем использовать этот шаблон для объединения вызовов AJAX.

Объединение вызовов AJAX

Чтобы исключить разрозненные вызовы Ajax по всему коду, мы можем использовать выявление шаблона модуля для объединения вызовов Ajax.

Разработчики могут создать сценарий службы данных и использовать обещания Ajax для сценариев успеха и неудач с помощью обратных вызовов.

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

ajaxService будет низкоуровневой деталью реализации и будет обрабатывать все типы вызовов ajax. В то время как Data-Services будет использовать ajaxService для выполнения операций, связанных с данными.

Реализация ajaxService

Вот простая реализация ajaxService (ajaxService.js). У него есть только один метод, который принимает некоторые входные данные и возвращает обещание, которое вызывающий код затем может использовать для выполнения вызовов ajax.

Реализация DataService

Я создал еще один файл JavaScript с именем dataService.js со следующим кодом:

Он также использует шаблон модуля раскрытия, и код прост. эта служба внутренне использует ajaxService. Обратите внимание, что я использую общедоступный тестовый сервер в Интернете и делаю к нему вызовы ajax. Вы можете использовать свой собственный REST API, заменив конечные точки (URL-адреса).

Обновление кода App.js

Я создал новые методы в файле app.js, и эти методы используют dataService для своих операций.

Загрузочный файл приложения

Я также сослался на эти файлы JavaScript на странице index.html и обновил функцию готов, как показано ниже:

и вот консольный вывод этих операций:

Резюме

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

Первоначально опубликовано на https://hexquote.com 20 апреля 2021 г.