Каква е целта и WebPACK SystemJS? Какво означава това, AMD, UMD или CommonJS? Как да се отнасят един към друг и защо да ги използвам?

Какво е модул?

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

Защо модули?

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

• абстрактен код. прехвърляне на функционалността на библиотеки на трети страни, така че не е нужно да се разберат всички тънкостите на тяхното изпълнение;
• капсулиране на код. то крие в модула, ако не искате да я промените;
• повторно използване на код. премахва необходимостта да пиша едно и също нещо отново и отново;
• управлявате zavismosti. Лесно е да се промени в зависимост без да се налага да се пренапише кода ни.

Моделите на модули в ES5

Прибл. Транс. Старши-Noveo софтуерни компании казват, че си спомня как е било, те взеха на пътя на работа, без модулите за първите опити да ги запишете себе си, а след това използвайте постиженията на други хора ... Но всички системи, изброени по-долу, те знаят от първа ръка. О, имаше моменти!

За да се даде представа за външния вид на тези модели, нека да разгледаме две от тях: веднага нарича функция (Незабавно извиква функция Expressions) и идентификационен модул (Разкриване модул) на.

Веднага нарича функция (Веднага Сложен Функция експресия или IIFE)

Функциите на стаите в скоби го прави функционален израз:

Функционално изразяване ни връща, за да функционира, така че след това можем да се отнасят към него:

Незабавно наречени функции ни позволяват да:

• напълно капсулиране на кода в IIFE, така че не е нужно да се разбере как работи IIFE код;
• дефинират променливи вътре IIFE, така че те не се претрупва глобалния обхват (променливи, декларирани в рамките IIFE, остават в рамките на затворената израз).

Въпреки това, те не ни дават механизъм за управление на зависимостта а.

Модулът за откриване модел (Разкриване Модул)

Модулът за модел за откриване на подобен на IIFE, но тук ние присвоите върнатата стойност на променлива:

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

Сега можем да се обърнем към модула за API чрез променливата:

Вместо Сингълтън модул може да действа и като функция конструктор:

за достъп до външна API

Модулът за откриване модел осигурява същите предимства като IIFE, но отново не дава възможност да управлявате зависимости.

формати модули

Модул формат - този синтаксис се използва, за да го определи.

Ето и някои от най-известните и широко използвани:

• Asynchronous Модул Definition (Asynchronous Модул Определяне или AMD);
• CommonJS;
• Universal определение модул (Universal Модул Определяне или UMD);
• System.register;
• модул формат ES6.

Нека да разгледаме всеки един от тях, така че можете да ги разпознае в синтаксиса.

Asynchronous Module Definition (AMD)

AMD е форматът, използван в браузърите и се използва за определяне на модулите определят функцията:

CommonJS формат

CommonJS формат, използван в Node.js и използва за определяне на зависимостта и изискват module.exports и модули:

Универсална дефиниция модул (UMD)

UMD формат може да се използва както в браузъра и в Node.js.

System.registerA

System.register формат е проектиран да поддържа ES6 модули синтаксис ES5:

Формат ES6 модули

Той използва знак износ за износ на API публичен модул:

и знак за внос на частите, че износът модула:

Можем дори да зададете псевдоним на вноса с помощта на:

или изтеглите целия модул наведнъж:

Форматът също така поддържа експорт по подразбиране:

които могат да бъдат внесени, например, както следва:

Можете да експортирате не само функция, но и всичко, което искате:

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

Можем да използваме модули ES6 формат днес, но това ще изисква компилатор като Бабел, който ще се изрази в формат нашия код ES5 като AMD или CommonJS, преди кодът се изпълнява в браузъра.

товарачи единици

модулът за зареждане интерпретира и зарежда модула писмено в определен формат.

Модулът за зареждане се стартира в Времетраене:

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

Ако отворите раздела "мрежа" в конзолата на вашия браузър, ще видите, че много от файловете са свалени по заявка модулът за зареждане.

Ето някои популярни програми за:

• RequireJS: модулът за зареждане на AMD формат;
• SystemJS: модулът за зареждане на AMD формати, CommonJS, UMD и System.register формат.

колекционерски модули

Collector модул замества модул товарач. Въпреки това, за разлика от модула за товарач, модулът за колектор е започнало в събранието:

• стартирате модула колектор, за да създадете по време на монтажа на файла пакет (например bundle.js);
• и да заредите пакета в браузъра.

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

Чифт популярните монтажници:

• Browserify: колектор за CommonJS модули;
• WebPACK: колекционерски модули за AMD, CommonJS, ES6.

резюмиране

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

Модул формат - синтаксис, който се използва за определяне на модули. В миналото е имало различни формати: AMD, CommonJS, UMD и System.register родния модули формат се появява в ES6.

интерпретира товарач модул и натоварванията на модула писмено в определен формат, време за изпълнение (в браузъра). Чести - RequireJS и SystemJS.

Collector модул замества товарач модули и създава пакет, който съдържа всички кода в събранието. Известни примери - Browserify и WebPACK.

Голям ден и програми с удоволствие!