Ответы пользователя Сергей delphinpro

Как правильно прочитать каждую строчку данного кода?

Сергей delphinpro @delphinpro Куратор тега JavaScript

frontend developer

Это так называемое универсальное определение модуля (UMD - Universal module definition)

Note. Только это какой-то урезанный umd, здесь нет определения define.amd. Может быть amd и устарел, но тот же webpack при сборке в umd формат пишет полную шапку.

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

Давайте разберем.

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

( function( global, factory ) {

} )(
    typeof window !== "undefined" ? window : this,    // global
    function( window, noGlobal ) { /* код модуля */ } // factory
 );

Анонимка принимает два параметра — глобальный объект (window) и функцию-фабрику. Фабрика является самим модулем, тот самый полезный код, ради которого написан модуль.

Во-вторых, в теле анонимки проверяется метод подключения:

// Если доступен объект module значит используется сборщик CommonJS
  if ( typeof module === "object" && typeof module.exports === "object" ) {
    // Если доступен document
    module.exports = global.document
      // То всё гуд, мы в браузере, нужно выполнить код модуля
      // и вернуть то, что он вернет
      ? factory( global /* это window */ , true )
      // Иначе возвращается функция, которая при необходимости выведет 
      // ошибку если при ее вызове не будет доступен document
      : function( w ) {
        if ( !w.document ) {
          throw new Error( "jQuery requires a window with a document" );
        }
        return factory( w );
      };
  // Модуль просто подключен через тег script
  } else {
    // Выполнить код модуля
    factory( global );
  }

Это стандартный код. Часто он формируется автоматически (например при сборке модуля webpack'ом для дальнейшей публикации в npm). Вам достаточно в общих чертах понимать что он делает и всё — обеспечивает поддержку различных вариантов использования вашего модуля.

Войдите на сайт