Полный цикл в digital

Модульное программирование в CommonJS

Сделаем модуль functions, который будет предоставлять библиотеку функций для математических операций. Разместим наш модуль в файле functions.js и подключим его к файлу script.js.

Файл с модулем

Давайте сделаем наш файл с модулем и разместим в нем функции:

functions.jsfunction sum(x, y) {
return x + y;
}
function difference(x, y) {
return x - y;
}
function product(x, y) {
return x * y;
}
function quotient(x, y) {
return x / y;
}

Те функции, которые должны быть видны снаружи модуля, необходимо экспортировать. Это делается путем записи функций в специальный объект module.exports:

functions.jsfunction sum(x, y) {
return x + y;
}
function difference(x, y) {
return x - y;
}
function product(x, y) {
return x * y;
}
function quotient(x, y) {
return x / y;
}
module.exports.sum = sum;
module.exports.difference = difference;
module.exports.product = product;
module.exports.quotient = quotient;

Не обязательно записывать отдельные свойства объекта module.exports, можно просто записать в него объект с функциями:

functions.jsfunction sum(x, y) {
return x + y;
}
function difference(x, y) {
return x - y;
}
function product(x, y) {
return x * y;
}
function quotient(x, y) {
return x / y;
}
module.exports = {sum, difference, product, quotient};

А можно записывать в свойства объекта module.exports функции сразу при их создании:

functions.jsmodule.exports.sum = function(x, y) {
return x + y;
}
module.exports.difference = function(x, y) {
return x - y;
}
module.exports.product = function(x, y) {
return x * y;
}
module.exports.quotient = function(x, y) {
return x / y;
}

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

Давайте подключим наш модуль к файлу script.js. Это делается с помощью команды require, параметром которой указывается путь к модулю. При этом путь обязательно начинать с точки, обозначающей текущую папку:

script.jslet math = require("./functions");

После такого подключения в переменной math будет тот самый объект, который мы экспортировали наружу. Давайте воспользуемся подключенными функциями:

script.jslet math = require("./functions");
const x = 10;
const y = 5;
document.getElementById("x").textContent = x;
document.getElementById("y").textContent = y;
document.getElementById("addition").textContent = math.sum(x, y);
document.getElementById("subtraction").textContent = math.difference(x, y);
document.getElementById("multiplication").textContent = math.product(x, y);
document.getElementById("division").textContent = math.quotient(x, y);

При подключении можно выполнить дестуктуризацию объекта и записать наши функции сразу в переменные:

script.jslet {sum} = require("./functions");
const x = 10;
const y = 5;
document.getElementById("x").textContent = x;
document.getElementById("y").textContent = y;
document.getElementById("addition").textContent = sum(x, y);

Сборка модуля

После создания наши файлов мы можем вызвать сборщик Webpack:

npm run build
Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!
Эйч Маркетинг