- - - - - CommonJS супраць AMD супраць RequireJS супраць ES6 - - - - -

Перш чым перайсці на модульны раздзел, калі ласка, праверце маё унікальнае параўнанне: Збор смецця супраць аўтаматычнага падліку спасылак.

Модулі JavaScript ставяцца да невялікіх адзінак незалежнага кода для шматразовага выкарыстання. Яны валодаюць выразнай функцыянальнасцю, што дазваляе іх дадаваць, выдаляць без парушэння працы сістэмы. Здаецца, імітуе тое, як класы выкарыстоўваюцца ў Java альбо Python.

Модулі аўтаномныя. Абнаўленне модуля значна прасцей, калі яго развязваюць з іншымі часткамі кода. Гэта заахвочвае праграміста перажыць праграму значна менш страшнай. Ён вырашае неадназначнасць прасторы імёнаў, а таксама дазваляе ствараць аб'екты ў агульнадаступных прасторах імёнаў, а функцыі ў ім застаюцца прыватнымі. Модулі можна паўторна выкарыстоўваць, выключаючы паўтаральныя часткі кода, эканомячы вялікую колькасць часу.
Да таго, як модулі прыбылі, шаблон модуля выяўлення прывык.

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

У гэтай праграме адкрытыя функцыі падвяргаюцца, а прыватныя ўласцівасці і метады інкапсулююцца.

У адным файле можна вызначыць некалькі модуляў, але недахопы заключаюцца ў тым, што асінхронная загрузка модуляў немагчымая, імпартаваць модулі нельга праграмна.

CommonJS

Яны прыдумалі асобны падыход для ўзаемадзеяння з сістэмай модуляў з выкарыстаннем неабходных ключавых слоў і экспарту. need - гэта функцыя, якая выкарыстоўваецца для імпарту функцый з іншага модуля. экспарт - гэта аб'ект, на якім любая функцыя, пастаўленая ў яго, атрымае экспарт.

// ------ Payment.js ------
var customerStore = requ ('крама / пакупнік'); // Модуль імпарту
// ------ крама / customer.js ------
export = функцыя () {
    вярнуцца customers.get ('крама);
}

У прыведзеным вышэй прыкладзе customerStore імпартуецца ў Payment.js. Функцыя, якая ўсталёўваецца для аб'екта экспарту ў модуль кліента, загружаецца ў файл плацяжоў.

Гэтыя модулі прызначаны для распрацоўкі сервера, і яны з'яўляюцца sinkronous.ie., Файлы загружаюцца адзін за адным у парадку ўнутры файла.

Рэалізацыя NodeJS

На іх моцна ўплывае спецыфікацыя CommonJS. Асноўная розніца ўзнікае ў аб'екце экспарту. Модулі NodeJS выкарыстоўваюць module.exports як аб'ект для экспарту, у той час як CommonJS выкарыстоўвае толькі зменную экспарт.

//payments.js
var customerStore = requ ('крама / пакупнік'); // Модуль імпарту
//store/customer.js
функцыя customerStore () {
    вярнуцца customers.get ('крама);
}
module.exports = customerStore;

Яны таксама маюць сінхронны характар. Параметр перадаецца патрабаванням праверкі імя модуля ў каталогу node_modules. Кругавыя залежнасці падтрымліваюцца, і распрацоўшчык можа лёгка зразумець паняцці. Мінусы - гэта толькі адзін файл у модулі, толькі аб'екты робяцца модулямі, і браўзары не могуць выкарыстоўваць гэтыя модулі непасрэдна без трансляцыі.

Але апошнім часам Browrify, які выкарыстоўваецца для камплектавання кода з модуляў, выкарыстоўвае гэты метад у браўзэры. Webpack таксама апрацоўвае складаныя трубаправоды пераўтварэнняў крыніц, якія ўключаюць модулі CommonJS.

Вызначэнне асінхроннага модуля (AMD)

AMD нарадзіўся, бо CommonJS з самага пачатку не падыходзіў для браўзэраў. Як вынікае з назвы, ён падтрымлівае асінхронную загрузку модуля.

вызначыць (['module1', ', module2'], function (module1, module2) {
  console.log (module1.setName ());
});

Функцыя выклікаецца толькі тады, калі запытаныя модулі загружаюцца. Функцыя define прымае першы аргумент як масіў модуляў залежнасці. Гэтыя модулі загружаюцца ў блакаванні ў фонавым рэжыме, і як толькі загрузка завершана, выконваецца функцыя званка.

Ён прызначаны для выкарыстання ў браўзэрах для паляпшэння часу запуску, і гэтыя модулі могуць быць аб'ектамі, функцыямі, канструктарамі, радкамі, JSON і г.д. Модулі могуць быць падзелены на некалькі файлаў, сумяшчальных для запатрабавання і экспарту, а кругавыя залежнасці падтрымліваюцца як добра.

RequireJS рэалізуе API AMD. Ён загружае простыя файлы JavaScript, а таксама модулі, выкарыстоўваючы простыя тэгі сцэнарыя. Ён уключае ў сябе аптымізацыйны інструмент, які можна запусціць пры разгортванні нашага кода для лепшай прадукцыйнасці.

Гэта адзіны код, неабходны для ўключэння файлаў у RequireJS. Атрыбут data-main вызначае ініцыялізацыю і шукае сцэнарыі і залежнасці.

Як вы, напэўна, заўважылі, ні адзін з вышэйзгаданых модуляў не быў уласцівым JavaScript. Мы паспрабавалі пераймаць модульную сістэму, выкарыстоўваючы шаблон модуля, CommonJS і AMD. На шчасце, ECMAScript 6 прадставіў убудаваныя модулі, якія пераносяць яго ў наступны і апошні раздзел.

Модулі ECMAScript 6 (Родны JavaScript)

ECMAScript 6 a.k.a., ES6 a.ka., ES2015 прапануе магчымасці для імпарту і экспарту модуляў, сумяшчальных як з сінхронным, так і з асінхронным рэжымамі працы.

// ------ lib.js ------
export const sqrt = Math.sqrt;
квадрат экспарту функцый (х) {
    вяртанне х * х;
}
Функцыя экспарту дыягностыкі (х, у) {
    вярнуць sqrt (квадрат (х) + квадрат (у));
}
// ------ main.js ------
import {square, diag} з 'lib';
console.log (квадрат (11)); // 121
console.log (diag (4, 3)); // 5 с

Заява імпарту выкарыстоўваецца для ўводу модуляў у прастору імёнаў. Гэта не дынамічна, яго нельга выкарыстоўваць дзе-небудзь у файле. Гэта супярэчыць патрабаванню і вызначэнню. Заява аб экспарце робіць элементы агульнадаступнымі. Такое статычнае паводзіны прымушае статычныя аналізатары будаваць дрэва залежнасцей, збіраючы файл без запуску кода. Гэта выкарыстоўваецца ў сучасных кадрах JavaScript, такіх як ReactJS, EmberJS і г.д.

Калі вы шукаеце запуск новага модуля або праекта, ES2015 - гэта правільны шлях, і CommonJS / Node застаецца выбарам сервера.

Дзякуй за чытанне.
Калі вам спадабаўся гэты артыкул, не саромейцеся націснуць кнопку "cla", каб дапамагчы іншым знайсці яе.
Сачыце за мной на https://medium.com/@mohanesh