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

    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). Вам достаточно в общих чертах понимать что он делает и всё — обеспечивает поддержку различных вариантов использования вашего модуля.
    Ответ написан
    Комментировать
  • Как реализовать блоки в виде пазла?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Как проще реализовать подобные блоки?

    Простыми div с заливкой и позиционированием, это ж просто черные и белые прямоугольники. Если хотите красоты в коде - то блоками before, after, тегов меньше, суть та же.
    Ответ написан
    Комментировать