Введение в модульные системы в JavaScript

Введение в модульные системы в JavaScript

Концепция модулей исходит из парадигмы модульного программирования. Эта парадигма предполагает, что программное обеспечение должно состоять из отдельных взаимозаменяемых компонентов, называемых «модулями», путем разбиения программных функций на автономные файлы, которые могут работать отдельно или вместе в приложении.





СДЕЛАТЬ ВИДЕО ДНЯ

Модуль — это автономный файл, который инкапсулирует код для реализации определенных функций и обеспечения возможности повторного использования и организации.



Здесь вы познакомитесь с модульными системами, используемыми в приложениях JavaScript, включая модульный шаблон, модульную систему CommonJS, используемую в большинстве приложений Node.js, и модульную систему ES6.





Шаблон модуля

До появления нативных модулей JavaScript шаблон проектирования модулей использовался как модульная система для ограничения переменных и функций одним файлом.

Это было реализовано с использованием немедленно вызываемых функциональных выражений, широко известных как IIFE. IIFE — это функция, не допускающая повторного использования, которая запускается сразу после создания.



Вот основная структура IIFE:

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})();

Блок кода выше описывает IIFE, используемые в трех различных контекстах.



IIFE использовались потому, что переменные, объявленные внутри функции, привязаны к функции, что делает их доступными только внутри функции, и поскольку функции позволяют вам возвращать данные (делая их общедоступными).

Например:



const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar");

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

Блок кода выше содержит IIFE. IIFE содержит функцию, которую он делает доступной, возвращая ее. Все переменные, объявленные в IIFE, защищены от глобальной области видимости. Таким образом, метод ( сказатьИмя ) доступен только через публичную функцию, callSayName .

сколько данных использует youtube tv

Обратите внимание, что IIFE сохраняется в переменной, фу . Это связано с тем, что без переменной, указывающей на ее расположение в памяти, переменные будут недоступны после запуска скрипта. Эта закономерность возможна из-за Закрытие JavaScript .

Модульная система CommonJS

Модульная система CommonJS — это формат модуля, определенный группой CommonJS для решения проблем с областью действия JavaScript путем выполнения каждого модуля в его пространстве имен.

Модульная система CommonJS работает, заставляя модули явно экспортировать переменные, которые они хотят предоставить другим модулям.

Эта модульная система была создана для серверный JavaScript (Node.js) и поэтому не поддерживается по умолчанию в браузерах.

Чтобы внедрить модули CommonJS в свой проект, вы должны сначала инициализировать NPM в своем приложении, выполнив:

npm init -y

Переменные, экспортированные в соответствии с модульной системой CommonJS, можно импортировать следующим образом:

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module");

Модули импортируются в CommonJS с помощью требовать оператор, который читает файл JavaScript, выполняет прочитанный файл и возвращает экспорт объект. экспорт объект содержит все доступные экспорты в модуле.

Вы можете экспортировать переменную в соответствии с модульной системой CommonJS, используя либо именованный экспорт, либо экспорт по умолчанию.

Именованные экспорты

Именованные экспорты — это экспорты, идентифицируемые по присвоенным им именам. Именованные экспорты допускают несколько экспортов на модуль, в отличие от экспорта по умолчанию.

Например:

//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

В приведенном выше блоке кода вы экспортируете две именованные функции ( мой экспорт а также другойЭкспорт ), присоединив их к экспорт объект.

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

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
};

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

Ваш код выдаст ошибку, если вы попытаетесь сделать это следующим образом:

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
};

Есть два способа импортировать именованные экспорты:

1. Импортируйте все экспорты как один объект и получайте к ним доступ по отдельности, используя запись через точку .

Например:

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

2. Деструктурировать экспорт из экспорт объект.

Например:

Ф15Ф3002А15ЭА46742К18Б3КФФК46БД44Б4599А4

Одна вещь является общей для всех методов импорта, они должны быть импортированы с использованием тех же имен, с которыми они были экспортированы.

Экспорт по умолчанию

Экспорт по умолчанию — это экспорт, идентифицируемый любым именем по вашему выбору. У вас может быть только один экспорт по умолчанию для каждого модуля.

Например:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo;

В приведенном выше блоке кода вы экспортируете класс ( Фу ), переназначив экспорт возражать против этого.

Импорт экспортов по умолчанию аналогичен импорту именованных экспортов, за исключением того, что для их импорта можно использовать любое имя по вашему выбору.

Например:

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar();

В приведенном выше блоке кода экспорт по умолчанию был назван Бар , хотя вы можете использовать любое имя по вашему выбору.

Модульная система ES6

Модульная система ECMAScript Harmony, широко известная как модули ES6, является официальной модульной системой JavaScript.

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

В браузерах необходимо указать тип в качестве модуль в теге импорта сценария.

найти, кому принадлежит номер телефона

Вот так:

//index.html 
<script src="./app.js" type="module"></script>

В Node.js вы должны установить тип к модуль в твоей пакет.json файл.

Вот так:

ЭБ764Ф110195Д89А7ДБ99Б41836А5372022БЕ38Д

Вы также можете экспортировать переменные с помощью системы модулей ES6, используя либо именованный экспорт, либо экспорт по умолчанию.

Именованные экспорты

Подобно именованному импорту в модулях CommonJS, они идентифицируются по присвоенным им именам и допускают множественный экспорт для каждого модуля.

Например:

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

В модульной системе ES6 именованные экспорты экспортируются путем добавления к переменной префикса экспорт ключевое слово.

Именованные экспорты можно импортировать в другой модуль в ES6 теми же способами, что и в CommonJS:

  • Деструктуризация необходимого экспорта из экспорт объект.
  • Импорт всех экспортов как единого объекта и доступ к ним по отдельности с использованием точечной нотации.

Вот пример деструктуризации:

//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport()

Вот пример импорта всего объекта:

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport()

В блоке кода выше звездочка ( * ) означает «все». в качестве ключевое слово назначает экспорт объект на строку, которая следует за ним, в этом случае, фу .

Экспорт по умолчанию

Подобно экспорту по умолчанию в CommonJS, они идентифицируются любым именем по вашему выбору, и вы можете иметь только один экспорт по умолчанию для каждого модуля.

Например:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Экспорт по умолчанию создается путем добавления дефолт ключевое слово после экспорт ключевое слово, за которым следует имя экспорта.

Импорт экспортов по умолчанию аналогичен импорту именованных экспортов, за исключением того, что для их импорта можно использовать любое имя по вашему выбору.

Например:

//otherModule.js 
import Bar from "./main.js";

Смешанный экспорт

Стандарт модуля ES6 позволяет вам иметь экспорты по умолчанию и именованные экспорты в одном модуле, в отличие от CommonJS.

Например:

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Важность модулей

Разделение кода на модули не только упрощает его чтение, но и делает его более удобным для повторного использования и сопровождения. Модули в JavaScript также делают ваш код менее подверженным ошибкам, поскольку по умолчанию все модули выполняются в строгом режиме.