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

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

Концепцията за модули идва от парадигмата на модулното програмиране. Тази парадигма предлага софтуерът да бъде съставен от отделни, взаимозаменяеми компоненти, наречени „модули“, чрез разбиване на програмните функции в самостоятелни файлове, които могат да работят отделно или свързани в приложение.





MAKEUSEOF ВИДЕО НА ДЕНЯ

Модулът е самостоятелен файл, който капсулира код за прилагане на определена функционалност и насърчава повторната употреба и организация.



Тук ще обхванете модулните системи, използвани в приложенията на 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 .

Забележете, че 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 файл, изпълнява прочетения файл и връща износ обект. The износ обектът съдържа всички налични експорти в модула.

Можете да експортирате променлива, следвайки модулната система 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"); 
};

В кодовия блок по-горе експортирате две именувани функции ( myExport и anotherExport ), като ги прикрепите към износ обект.

По същия начин можете да експортирате функциите така:

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, 
};

В кодовия блок по-горе задавате износ обект на посочените функции. Можете да присвоите само износ обект към нов обект чрез модул обект.

малина pi 3 срещу b+

Вашият код ще изведе грешка, ако се опитате да го направите по следния начин:

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

Има два начина, по които можете да импортирате именувани експорти:

1. Импортирайте всички експортирания като един обект и ги достъпвайте отделно с помощта на нотацията с точка .

Например:

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

2. Деструктуриране на износа от износ обект.

Например:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport();

Едно нещо е общо за всички методи за импортиране, те трябва да бъдат импортирани с помощта на същите имена, с които са били експортирани.

Експортиране по подразбиране

Експортиране по подразбиране е експортиране, идентифицирано с произволно име по ваш избор. Можете да имате само един експорт по подразбиране на модул.

Например:

//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 трябва да зададете Тип да се модул във вашия package.json файл.

Така:

//package.json 
"type":"module"

Можете също така да експортирате променливи, като използвате модулната система 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()

В кодовия блок по-горе, звездичката ( * ) означава „всички“. The като ключовата дума присвоява износ обект на низа, който го следва, в този случай, Фу .

Експортиране по подразбиране

Подобно на експортите по подразбиране в 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 също правят кода ви по-малко податлив на грешки, тъй като всички модули се изпълняват в строг режим по подразбиране.