Модули и пространства имен в JavaScript

1. Шаблоны для структурирования модулей

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

• Пространство имен: модуль верхнего уровня помещается в глобальную переменную. Эта переменная является пространством имен содержимого модуля.
• Хранение содержимого: каждое свойство модуля содержит значение.
• Вложенные модули: один достигает вложенности, помещая модуль в другой.

Наполнение модуля контентом

Подход 1: Объектный литерал.

    var namespace = {
        func: function() { ... },
        value: 123
    };

Подход 2: Присвоение свойств.

    var namespace = {};
    namespace.func = function() { ... };
    namespace.value = 123;

Доступ к контенту в любом из подходов:

    namespace.func();
    console.log(namespace.value + 44);

Оценка:

1. Объект буквальный.
   
   • Pro: элегантный синтаксис.
   • Против: как единственная, иногда очень длинная синтаксическая конструкция, она накладывает ограничения на ее содержимое. Необходимо поддерживать открывающую скобку перед содержимым и закрывающую скобку после содержимого. И нужно помнить, чтобы не добавлять запятую после последнего значения свойства. Это усложняет перемещение контента.
2. Присвоение свойств.
   
   • Con: избыточные повторения идентификатора пространства имен.

Шаблон модуля: личные данные и инициализация

В шаблоне модуля используется выражение функции немедленного вызова (IIFE, [1]), чтобы присоединить среду к данным модуля. Доступ к привязкам внутри этой среды возможен из модуля, но не снаружи. Другое преимущество состоит в том, что IIFE дает вам место для инициализации.

    var namespace = function() {
        // set up private data
        var arr = []; // not visible outside
        for(var i=0; i<4; i++) {
            arr.push(i);
        }
        return {
            // read-only access via getter
            get values() {
                return arr;
            }
        };
    }();
    console.log(namespace.values); // [0,1,2,3]

Комментарии:

• Con: Труднее читать и сложнее понять, что происходит.
• Con: труднее исправить. Время от времени вы можете повторно использовать существующий код, просто немного его исправив. Да, это нарушает инкапсуляцию, но также может быть очень полезно для временных решений. Шаблон модуля делает такое исправление невозможным (что может быть особенностью, в зависимости от вашего вкуса).
• Альтернатива для личных данных: используйте соглашение об именах для частных свойств, например, все свойства, имена которых начинаются с подчеркивания, являются частными.

Вариация: Пространство имен является параметром функции.

    var namespace = {};
    (function(ns) {
        // (set up private data here)
        ns.func = function() { ... };
        ns.value = 123;
    }(namespace));

Вариация: это как идентификатор пространства имен (не может быть назначен случайно).

    var namespace = {};
    (function() {
        // (set up private data here)
        this.func = function() { ... };
        this.value = 123;
    }).call(namespace); // hand in implicit parameter "this"

Ссылаясь на свойства родного брата

Использовать это. Con: скрыто, если вы вкладываете функции (которые включают методы во вложенных объектах).

    var namespace = {
        _value: 123; // private via naming convention
        getValue: function() {
            return this._value;
        }
        anObject: {
            aMethod: function() {
                // "this" does not point to the module here
            }
        }
    }

Глобальный доступ. Минусы: затрудняет переименование пространства имен, многословно для вложенных пространств имен.

    var namespace = {
        _value: 123; // private via naming convention
        getValue: function() {
            return namespace._value;
        }
    }

Пользовательский идентификатор: Шаблон модуля (см. Выше) позволяет использовать пользовательский локальный идентификатор для ссылки на текущий модуль.

• Шаблон модуля с литералом объекта: назначьте объект локальной переменной перед его возвратом.
• Шаблон модуля с параметром: параметр является пользовательским идентификатором.

Частные данные и инициализация для свойств

IFEE может использоваться для прикрепления личных данных и кода инициализации к объекту. Это может сделать то же самое для одного свойства.

    var ns = {
        getValue: function() {
            var arr = []; // not visible outside
            for(var i=0; i<4; i++) {
                arr.push(i);
            }
            return function() { // actual property value
                return arr;
            };
        }()
    };

Продолжайте читать для применения этого образца.

Типы в объектных литералах

Проблема: тип JavaScript определяется в два этапа. Сначала определите конструктор. Во-вторых, настройте прототип конструктора. Эти два шага не могут быть выполнены в объектных литералах. Есть два решения:

• Используйте API наследования, где конструктор и прототип могут быть определены одновременно [4].
• Оберните две части типа в IIFE:

      var ns = {
          Type: function() {
              var constructor = function() {
                  // ...
              };
              constructor.prototype = {
                  // ...
              };
              return constructor; // value of Type
          }()
      };
  

Управление пространствами имен

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

    var namespace = namespace || {};

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

    var topns = topns || {};
    topns.module1 = {
        // content
    }
    topns.module2 = {
        // content
    }

YUI2 использует следующий шаблон для создания вложенных пространств имен.

    YAHOO.namespace("foo.bar");
    YAHOO.foo.bar.doSomething = function() { ... };

2. API для загрузки модулей асинхронно

Как избежать блокировки: содержимое веб-страницы обрабатывается последовательно. Когда встречается тег сценария, который ссылается на файл, происходит два шага:

1. Файл загружен.
2. Файл интерпретируется.

Все браузеры блокируют обработку последующего содержимого до тех пор, пока (2) не будет завершено, потому что все является однопоточным и должно обрабатываться по порядку. Более новые браузеры выполняют некоторые загрузки параллельно, но рендеринг по-прежнему заблокирован [2]. Это излишне задерживает первоначальное отображение страницы. Современные модульные API предоставляют способ обойти это, поддерживая асинхронную загрузку модулей. Обычно использование таких API состоит из двух частей: первая определяет, какие модули вы хотели бы использовать. Во-вторых, один обеспечивает обратный вызов, который вызывается, когда все модули готовы. Целью этого раздела является не полное введение, а скорее представление о том, что возможно в пространстве разработки модулей JavaScript.

2.1. RequireJS