Modules

IIFE

"Немедленно вызываемая функция – это синтаксическая конструкция, позволяющая вызвать функцию немедленно, в точке ее определения." "Шаблоны" Стоян Стефанов

Широко используются в библиотеках, плагинах для браузеров, при создании модулей.

В JavaScript только функции образуют собственные области видимости внутри блока.

Любая переменная, объявленная с помощью инструкций const, а также let и const, внутри функции, становится локальной переменной, невидимой за пределами функции.

В режиме 'use strict' переменная без инструкций будет являться ошибкой.

Синтаксис IIFE

Только для Function Expression, не для Function Declaration.

Два вида записи: (function(){}()) или (function(){})()


(function () {
  return 'Hello';
}());

или более предпочтительный


(function () {
  return 'Hello';
})();

Передача параметров


(function (hi) {
  return hi;
})('Hello');

Присвоение результата


const sum =
(function (a, b) {
  return a + b;
})(2, 3);
5

при присвоении можно обойтись и без скобок


const sum = 
function (a, b) {
  return a + b;
}(2, 3);
5

Плагин: использование пользовательских настроек

Плагин - это программа для работа на различных сайтах. Эта программа должна быть изолирована от других JS программ, а также иметь возможность получить настройки, отличные от начальных.

Все вышеперечисленное можно сделать с помощью IIFE и Object.assign


(function (userSetting) {
  const defaultSetting
  = {
    data
  };
  const setting
    = userSetting
      ? Object.assign (
          defaultSetting,
          userSetting
        )
      : defaultSetting;
    use setting
})(userSetting);

Тестирование работы модуля настроек

 
const res = (
    function(userSetting) {
  const defaultSetting = {
    name: "Homer"
  };
  const setting
    = userSetting
      ? Object.assign(
          defaultSetting,
          userSetting
        )
      : defaultSetting;
  return setting;
})({ name: "Bart" });

console.log(res.name);
Bart

Работа вне браузера


(function (global) {
  gloabl
})(this);

Модули CommonJS

Простой API для работы js на стороне сервера - используется в NodeJS и, как следствие, в npm и gulp

Работа с модулями CommonJS предполагает что код программы располагается в отдельных файлах. Каждый такой файл синтаксически оформлен как модуль CommonJS. Название файла принято делать таким же, как и экспортируемое свойство. Модуль может получать данные по требованию из других модулей и отдавать данные по требованию в другой модуль. Подробнее о модулях можно прочесть в отрывке из книги "Выразительный JS"

Базовый синтаксис:

функция require для загрузки данных в модуль
объект exports для передачи данных из модуля

файл main.js


const hello
  = require('./hello');
hello.world();

файл hello.js


эта константа
    не доступна
    вне модуля

const msg = 'Hello World';

экспортируем
    функцию с выводом
    константы

exports.world
  = function() {
  console.log(msg);
}

Проверка файлов в директории node_modules

Если указать в require название файла без пути, то NodeJS будет осуществлять поиск по имени файла в директории node_modules и всех ее поддиректориях.

файл main.js


const hello
  = require('./hello');
const data
  = require('text');

hello.world(data.text);

файл node_modules/text.js


exports.text
  = 'Hello World';

файл hello.js


exports.world
  = function(msg) {
     console.log(msg);
}

NPM

Для хранения и подключения готовых решений в виде модулей NodeJS использует менеджер пакетов npm. Список подключаемых модулей вашего проекта должен находиться в файле package.json, а сами модули будут загружаться в директорию node_modules из библиотеки npm.

Для создания, загрузки и управления модулями npm в проект существует два менеджера пакетов: yarn и npm Yarn быстрее и имеет лучшую функциональность. Все команды npm имеют аналоги в yarn. Но исторически в документации приводят пример использования на основе npm.

npm init или yarn init - команда для создания файла package.json

npm install --save name или yarn add --save name это команда для добавления модуля в проект. В файле package.json будет записано имя пакета name в свойство dependencies. Это свойство подключает модули во время работы приложения. В директорию node_modules будет загружены модуль и все необходимые для работы этого модуля зависимости, т.е. другие модули.

npm install --save-dev name или yarn add --dev name это команда для добавления модуля в проект. В файле package.json будет записано имя пакета name в свойство devDependencies. Это свойство подключает модули только на время разработки приложения. В директорию node_modules будет загружены модуль и все необходимые для работы этого модуля зависимости, т.е. другие модули.

Для команды npm install --save-dev name существует краткая запись npm i -D name

npm install или yarn install - это способ загрузить модули в проект в директорию node_modules при наличии готового файла package.json. Т.е. при размещении проекта в репозитории git не в коем случае не надо размещать директорию node_modules. Достаточно наличия файл package.json.

Глобальное подключение модуля требует флага -g или --global для npm. Для yarn требуется префикс global

Обновление пакетов до последней версии, соответствующей диапазону из package.json вместо установки точных версий из yarn.lock или package-lock.json осуществляется командами yarn upgrade и набором команд для npm


rm -rf node_modules
npm install

Удаление пакета для yarn это yarn remove name, а для npm это npm uninstall name

Gulp

Gulp использует npm пакеты и применяет их для обработки заданных файлов. Т.е. Gulp является сборщиком проекта.

Работа с gulp

Установка пакет можно (но не обязательно) установить глобально:

npm i -g gulp

В корне проекта, рядом с файлом package.json необходимо создать файл gulpfile.js

touch gulpfile.js

или

echo > gulpfile.js

Вызов команды gulp в терминале

gulp

приведет к обращению к файлу gulpfile.js и выполнению метода gulp.task('default', callback) Отсутствие метода default вызывает ошибку. Это точка входа в программу.

"Hello World" в gulpfile.js

 
'use strict';
const gulp = require('gulp');
gulp.task('default', function () {
    console.log('Hello Gulp');
});

Метод gulp.task позволяет задать произвольное имя, например 'greet'. Запуск именно этого метода возможен по команде

gulp greet

Запуск именованного метода

 
'use strict';
const gulp = require('gulp');
gulp.task('default', function () {
    console.log('Hello Gulp');
});
gulp.task('greet', function () {
    console.log('Wellcome User');
});

Для автоматического запуска именованных task следует разместить эти имена в массив, а сам массив поместить вторым аргументом gulp.task('default',[name1, name2])

Автоматический запуск именованного метода

 
'use strict';
const gulp = require('gulp');
gulp.task('greet',
  function () {
    console.log(
      'Wellcome User'
    );
});
gulp.task(
    'default',
    ['greet']
);

Работа с файлами

Gulp создан для получения файла, применения к нему различных методов task и размещения результата в новый файл.

Об описании путей к файлам

Для описания всех файлов с расширением .html в директории /html надо записать


 './html/*.html'

Для описания всех файлов с расширением .html в директории /html и любых поддиректориях надо записать


 './html/**/*.html'

Для указания исходного файла и описания директории размещения (если такой директории нет, то будет создана) используются методы gulp: gulp.src(path) и gulp.dest(path). Метод pipe() указывает последовательность выполнения (подобно then в промисах) над копией файла из gulp.src.

Копирование файла

 
'use strict';
const gulp
= require('gulp');

gulp.task('copy',
  function () {
    return gulp.src(
      'src/file.html'
    )
    .pipe(
      gulp.dest(
          'build/'
    ));
});

gulp.task(
  'default',
  ['copy']
);

Подключение модуля npm в gulp

Модули для npm для работы с методом gulp.task как правило нуждаются в некоторой обработке. Поэтому надо искать модули npm именно для gulp. На странице документации к модулю описывают способ подключения модуля в файл gulpfile.js .

Подключим модуль gulp-concat


yarn add --dev gulp-concat

Добавим в файл gulpfile.js gulp-concat

 
'use strict';
const gulp
= require('gulp');
const concat
  = require('gulp-concat');

gulp.task(
  'concat',
  function () {
    return gulp.src(
      './src/js/**/*.js'
      )
      .pipe(
        concat('all.js')
      )
      .pipe(
        gulp.dest(
          'build/js'
    ));
 });

gulp.task(
  'default',
  ['concat']
);

Модули ES6 - работа в браузерах

Три правила для работы модулей


<script type="module" ...


src="./app.js"

или


src="/app.js"

или


src="../app.js"

или


src="http://app.js"

но не src="app.js"


import * from "./main.js"

1-й вариант синтаксиса import/export


file log.js
export function log () {};
file main.js
import {log} from './log.js';

2-й вариант синтаксиса import/export


file log.js
export default function log () {};
file main.js
import log from './log.js';

Пример работы модулей

Репозиторий файлов с модулями

caniuse.com/#search=modules