- - - - - CommonJS срещу AMD срещу RequireJS срещу ES6 модули - - - - -

Преди да стъпя в модулния раздел, любезно проверете моето уникално сравнение, Събиране на боклук срещу Автоматично преброяване на референтни данни

JavaScript модулите се отнасят до малки единици независим код за многократна употреба. Те имат отлична функционалност, което позволява да се добавят, премахват, без да се нарушава системата. Изглежда, че имитира как се използват класове в Java или Python.

Модулите са самостоятелни. Актуализирането на модул е ​​много по-лесно, ако е отделено от други части от кода. Това насърчава програмиста да премине през програмата много по-малко плашещо. Той решава неяснотата в пространството на имената и позволява създаването на обекти в публично достъпни пространства от имена, докато функциите в него остават частни. Модулите могат да бъдат използвани повторно, елиминирайки дублиращи се части от кода, като по този начин се спести огромно време.
Преди да пристигнат модулите, моделът за разкриване на модул се използва.

var revealingModule = (функция () {
    var privateVar = "Бен Томас";
    функция setNameFn (strName) {
        privateVar = strName;
    }
връщане {
        setName: setNameFn,
    };
}) ();
revealingModule.setName ("Пол Адамс");

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

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

CommonJS

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

// ------ плащания.js ------
var customerStore = изисквам ('магазин / клиент'); // модул за импортиране
// ------ магазин / customer.js ------
export = функция () {
    върнете клиентите.get ('магазин);
}

В горния пример, customerStore се импортира в Payment.js. Функцията, която е зададена на обекта за експортиране в клиентския модул, се зарежда във файл за плащания.

Тези модули са дизайнерски за разработка на сървъри и това са синхронно.ie., Като файловете се зареждат един по един в ред във файла.

Въвеждане на NodeJS

Те са силно повлияни от спецификацията на CommonJS. Основната разлика възниква в обекта за износ. NodeJS модулите използват module.exports като обект за експорт, докато CommonJS използва само променливата за експортиране.

//payments.js
var customerStore = изисквам ('магазин / клиент'); // модул за импортиране
//store/customer.js
функция customerStore () {
    върнете клиентите.get ('магазин);
}
module.exports = customerStore;

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

Но наскоро Browrify, използван за свързване на код от модулите, използва този метод в браузъра. Webpack също така обработва сложни тръбопроводи за трансформации на източници, които включват модули CommonJS.

Определение на асинхронен модул (AMD)

AMD се роди, тъй като CommonJS не беше подходящ за браузърите в началото. Както подсказва името, той поддържа асинхронно зареждане на модули.

Определете (['module1', ', module2'], функция (module1, module2) {
  console.log (module1.setName ());
});

Функцията се извиква само когато заявените модули приключат с зареждането. Функцията define приема първия аргумент като масив от модули за зависимост. Тези модули се зареждат без блокиране във фонов режим и след като зареждането приключи, функцията за обратно извикване се изпълнява.

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

RequireJS внедрява AMD API. Той зарежда обикновените JavaScript файлове, както и модулите, като използва обикновени маркери за скрипт. Той включва инструмент за оптимизиране, който може да се стартира, докато разгръщаме нашия код за по-добра производителност.

Това е единственият код, необходим за включване на файлове в RequireJS. Атрибутът data-main определя инициализацията и търси скриптове и зависимости.

Както вероятно сте забелязали, никой от горепосочените модули не е роден от JavaScript. Опитахме се да подражаваме на модулна система, използвайки модела на модела, CommonJS и AMD. За щастие ECMAScript 6 са въвели вградени модули, които го пренасят до следващия и последния раздел.

ECMAScript 6 модула (Native JavaScript)

ECMAScript 6 a.k.a., ES6 a.ka., ES2015 предлага възможности за импортиране и експортиране на модули, съвместими както с синхронни, така и с асинхронни режими на работа.

// ------ lib.js ------
export const sqrt = Math.sqrt;
функция за износ квадрат (x) {
    връщане x * x;
}
функция за експортиране диагноза (x, y) {
    връщане sqrt (квадрат (x) + квадрат (y));
}
// ------ main.js ------
import {square, diag} от 'lib';
console.log (квадрат (11)); // 121
console.log (diag (4, 3)); // 5

Операторът за импортиране се използва за въвеждане на модули в пространството от имена. Не е динамичен, не може да се използва навсякъде във файла. Това е в контраст с изискването и дефинирането. Декларацията за износ прави елементите публично достояние. Това статично поведение кара статичните анализатори да изграждат дървото на зависимостите, докато групират файла без да изпълняват код. Това се използва от съвременни JavaScript рамки като ReactJS, EmberJS и др. Недостатъкът е, че той не е напълно реализиран в браузърите и изисква транспилатор като Babel, за да се представи в неподдържаните браузъри.

Ако търсите стартиране на нов модул или проект, ES2015 е правилният път и CommonJS / Node остава изборът за сървъра.

Благодаря за четенето.
Ако ви хареса тази статия, не се колебайте да натиснете този бутон p, за да помогнете на другите да го намерят.
Следвайте ме на https://medium.com/@mohanesh