Модульное программирование в 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