Инкапсуляция шаблонов проектирования модулей - PullRequest
Новая
       68

Инкапсуляция шаблонов проектирования модулей

0 голосов
/ 05 февраля 2020

Учитывая этот код в шаблоне проектирования модуля: 

    var HTMLChanger = (function() {
      var contents = 'contents'
    
      var changeHTML = function() {
        var element = document.getElementById('attribute-to-change');
        element.innerHTML = contents;
      }
    
      return {
        callChangeHTML: function() {
          changeHTML();
          console.log(contents);
        }
      };
    
    })();
    
    HTMLChanger.callChangeHTML();       // Outputs: 'contents'
    console.log(HTMLChanger.contents);  // undefined
<div id="attribute-to-change"></div>

У нас есть эта строка: 

console.log(HTMLChanger.contents);  // undefined

А что если бы у нас был код, который дал бы нам другой результат: 

console.log(HTMLChanger.contents);  // 'contents'

В чем выгода предыдущего кода линии и шаблона проектирования модуля, связанного с ним?

1 Ответ

2 голосов
/ 05 февраля 2020

console.log(HTMLChanger.contents); // undefined

Ваша переменная HTMLChanger назначена на возвращаемое значение IIFE (выражение, вызываемое немедленно). Возвращаемое значение здесь: 

  return {
    callChangeHTML: function() {
      changeHTML();
      console.log(contents);
    }
  };

Таким образом, оно установлено для объекта, содержащего одно свойство с именем callChangeHTML. Переменные contents и changeHTML определены только в области действия IIFE и не являются свойствами возвращаемого объекта (в противном случае это отрицательно скажется на назначении этого шаблона, а именно на скрытии деталей реализации ). Код вне IIFE не имеет абсолютно никакого доступа к ним, если вы не добавите в возвращаемый объект больше функций, таких как методы получения и установки. Это будет выглядеть примерно так: 

    var HTMLChanger = (function() {
      var contents = 'contents' //this is just a variable! not a property!
    
      var changeHTML = function() {
        var element = document.getElementById('attribute-to-change');
        element.innerHTML = contents;
      }
    
      return {
        callChangeHTML: function() {
          changeHTML();
          console.log(contents);
        },
        getContents: function() {
          return contents;
        }
      };
    
    })();
    
    HTMLChanger.callChangeHTML();       // Outputs: 'contents'
    console.log(HTMLChanger.getContents());  // Also outputs 'contents'
<div id="attribute-to-change"></div>

В чем преимущество предыдущего кода шаблона линии и конструкции модуля, связанного с ним?

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

...