От создателя: в предлагаемой статье будут рассмотрены разные методы того, как импортировать и экспортировать файлы в ES6.
До того, как возник ES6, мы употребляли несколько тегов скриптов в одном файле HTML для импорта различных файлов JavaScript, к примеру:
| 123 |
Итак, если б у нас была переменная с этим же именованием в различных файлах JavaScript, это привело бы к конфликту (Конфли?кт — наиболее острый способ разрешения противоречий в интересах, обычно сопровождающийся негативными эмоциями, выходящий за рамки правил и норм) имен, и ожидаемое вами значение не было бы фактическим значением, которое вы получили.
ES6 поправил эту делему с концепцией модулей. Любой файл JavaScript, который мы пишем в ES6, именуется модулем. Переменные и функции, которые мы объявляем в любом файле, недосягаемы для остальных файлов, пока мы специально не экспортируем их из этого файла и не импортируем в иной файл.
Таковым образом, функции и переменные, определенные в файле, являются приватными для всякого файла и не могут быть доступны вне файла, пока мы не экспортируем их. Есть два типа экспорта:
Именованный экспорт: в одном файле быть может несколько именованных экспортов.
Экспорт по умолчанию: в одном файле быть может лишь один экспорт по умолчанию.
Именованный экспорт в JavaScript
Чтоб экспортировать отдельное значение как именованный экспорт, мы экспортируем его последующим образом:
JavaScript export const temp = «This is some dummy text»;
| 1 | export const temp = «This is some dummy text»; |
Если у нас есть несколько объектов для экспорта, мы можем написать оператор экспорта в отдельной строке, а не перед объявлением переменной. В фигурных скобках указываем, что необходимо экспортировать.
JavaScript const temp1 = «This is some dummy text1»;
const temp2 = «This is some dummy text2»;
export { temp1, temp2 };
| 1234 | const temp1 = «This is some dummy text1»;const temp2 = «This is some dummy text2»; export { temp1, temp2 }; |
Направьте внимание, что синтаксис экспорта не является синтаксисом объектного литерала. Итак, в ES6 для экспорта чего-либо мы не можем употреблять такие пары ключ-значение:
JavaScript // This is invalid syntax of export in ES6
export { key1: value1, key2: value2 }
| 123 | // This is invalid syntax of export in ES6 export { key1: value1, key2: value2 } |
Чтоб импортировать то, что мы экспортировали как именованный экспорт, мы используем последующий синтаксис:
JavaScript import { temp1, temp2 } from ‘./filename’;
| 1 | import { temp1, temp2 } from ‘./filename’; |
Направьте внимание, что при импорте чего-либо из файла нам не надо добавлять расширение .js к названии файла, так как оно считается по умолчанию.
JavaScript // import from functions.js file from current directory
import { temp1, temp2 } from ‘./functions’;
// import from functions.js file from parent of current directory
import { temp1 } from ‘../functions’;
| 12345 | // import from functions.js file from current directory import { temp1, temp2 } from ‘./functions’; // import from functions.js file from parent of current directoryimport { temp1 } from ‘../functions’; |
Вот демонстрация Code Sandbox.
Необходимо подчеркнуть, что имя, применяемое при экспорте, обязано совпадать с именованием, которое мы используем при импорте. Итак, если вы экспортируете как:
JavaScript // constants.js
export const PI = 3.14159;
| 12 | // constants.jsexport const PI = 3.14159; |
тогда при импорте вы должны употреблять то же имя, что и при экспорте:
JavaScript import { PI } from ‘./constants’;
| 1 | import { PI } from ‘./constants’; |
Вы не сможете употреблять другое имя:
JavaScript import { PiValue } from ‘./constants’; // This will throw an error
| 1 | import { PiValue } from ‘./constants’; // This will throw an error |
Но если у вас уже есть переменная с этим же именованием, что и у экспортируемой переменной, вы сможете употреблять синтаксис переименования при импорте последующим образом:
JavaScript import { PI as PIValue } from ‘./constants’;
| 1 | import { PI as PIValue } from ‘./constants’; |
Тут мы переименовали PI в PIValue, потому сейчас мы не можем употреблять имя переменной PI. Заместо этого мы должны употреблять переменную PIValue, чтоб получить экспортированное значение PI. Мы также можем употреблять синтаксис переименования во время экспорта:
JavaScript // constants.js
const PI = 3.14159;
export { PI as PIValue };
| 1234 | // constants.jsconst PI = 3.14159; export { PI as PIValue }; |
то при импорте мы должны употреблять PIValue:
JavaScript import { PIValue } from ‘./constants’;
| 1 | import { PIValue } from ‘./constants’; |
Чтоб экспортировать что-либо как именованный экспорт, мы должны поначалу его объявить.
JavaScript export ‘hello’; // this will result in error export const greeting = ‘hello’; // this will work export { name: ‘David’ }; // This will result in error
export const object = { name: ‘David’ }; // This will work
| 1234 | export ‘hello’; // this will result in errorexport const greeting = ‘hello’; // this will workexport { name: ‘David’ }; // This will result in errorexport const object = { name: ‘David’ }; // This will work |
Порядок, в каком мы импортируем несколько именованных экспортов, не важен. Посмотрите на файл validations.js:
JavaScript // utils/validations.js
const isValidEmail = function(email) { if (/^[^@ ]+@[^@ ]+.[^@ .]{2,}$/.test(email)) { return «email is valid»; } else { return «email is invalid»; }
};
const isValidPhone = function(phone) { if (/^[(]d{3}[)]sd{3}-d{4}$/.test(phone)) { return «phone number is valid»; } else { return «phone number is invalid»; }
};
function isEmpty(value) { if (/^s*$/.test(value)) { return «string is empty or contains only spaces»; } else { return «string is not empty and does not contain spaces»; }
}
export { isValidEmail, isValidPhone, isEmpty };
| 123456789101112131415161718192021222324252627 | // utils/validations.js const isValidEmail = function(email) { if (/^[^@ ]+@[^@ ]+.[^@ .]{2,}$/.test(email)) { return «email is valid»; } else { return «email is invalid»; }}; const isValidPhone = function(phone) { if (/^[(]d{3}[)]sd{3}-d{4}$/.test(phone)) { return «phone number is valid»; } else { return «phone number is invalid»; }}; function isEmpty(value) { if (/^s*$/.test(value)) { return «string is empty or contains only spaces»; } else { return «string is not empty and does not contain spaces»; } } export { isValidEmail, isValidPhone, isEmpty }; |
WorpdRess спасет от закрытия поисковик по картинкам СС Search
и в index.js мы используем эти функции, как показано ниже:
JavaScript // index.js
import { isEmpty, isValidEmail } from «./utils/validations»;
console.log(«isEmpty:», isEmpty(«abcd»)); // isEmpty: string is not empty and does not contain spaces
console.log(«isValidEmail:», isValidEmail(«abc@11gmail.com»)); // isValidEmail: email is valid
console.log(«isValidEmail:», isValidEmail(«ab@c@11gmail.com»)); // isValidEmail: email is invalid
| 12345678 | // index.jsimport { isEmpty, isValidEmail } from «./utils/validations»; console.log(«isEmpty:», isEmpty(«abcd»)); // isEmpty: string is not empty and does not contain spaces console.log(«isValidEmail:», isValidEmail(«abc@11gmail.com»)); // isValidEmail: email is valid console.log(«isValidEmail:», isValidEmail(«ab@c@11gmail.com»)); // isValidEmail: email is invalid |
Вот демонстрация Code Sandbox.
Видите ли, мы можем импортировать лишь нужные экспортированные значения и в любом порядке, потому нам не надо инспектировать, в котором порядке мы экспортировали в иной файл. В этом красота именованного экспорта.
Экспорт в JavaScript по умолчанию
Как я произнес ранее, в одном файле быть может не наиболее 1-го экспорта по умолчанию. Но вы сможете соединить несколько именованных экспортов и один экспорт по умолчанию в одном файле.
Чтоб объявить экспорт по умолчанию, мы добавляем ключевое слово по умолчанию перед главным словом экспорта последующим образом:
JavaScript //constants.js
const name = ‘David’;
export default name;
| 1234 | //constants.jsconst name = ‘David’; export default name; |
Чтоб импортировать экспорт по умолчанию, мы не добавляем фигурные скобки, как это было в именованном экспорте, к примеру:
JavaScript import name from ‘./constants’;
| 1 | import name from ‘./constants’; |
Если у нас есть несколько именованных экспортов и один экспорт по умолчанию, к примеру:
JavaScript // constants.js export const PI = 3.14159;
export const AGE = 30;
const NAME = «David»;
export default NAME;
| 1234567 | // constants.jsexport const PI = 3.14159; export const AGE = 30; const NAME = «David»; export default NAME; |
потом, чтоб импортировать все в одной строке, нам необходимо употреблять экспортируемую переменную по умолчанию лишь перед фигурной скобкой.
JavaScript // NAME is default export and PI and AGE are named exports here
import NAME, { PI, AGE } from ‘./constants’;
| 123 | // NAME is default export and PI and AGE are named exports here import NAME, { PI, AGE } from ‘./constants’; |
Одна из особенностей экспорта по умолчанию состоит в том, что мы можем поменять имя экспортируемой переменной во время импорта:
JavaScript // constants.js
const AGE = 30;
export default AGE;
| 1234 | // constants.jsconst AGE = 30; export default AGE; |
А в другом файле мы можем употреблять другое имя при импорте
JavaScript import myAge from ‘./constants’;
console.log(myAge); // 30
| 123 | import myAge from ‘./constants’; console.log(myAge); // 30 |
Тут мы изменили имя экспортируемой переменной по умолчанию с AGE на myAge. Это работает, поэтому что по умолчанию быть может лишь один экспорт, потому вы сможете именовать его как желаете.
Еще одна вещь, на которую следует направить внимание при экспорте по умолчанию, состоит в том, что ключевое слово export default не может предшествовать объявлению переменной:
JavaScript // constants.js
export default const AGE = 30; // This is an error and will not work
3 способа заменить все вхождения строки в JavaScript
| 12 | // constants.jsexport default const AGE = 30; // This is an error and will not work |
потому мы должны употреблять ключевое слово export default для экспорта в отдельной строке, к примеру:
JavaScript // constants.js
const AGE = 30;
export default AGE;
| 1234 | // constants.js const AGE = 30; export default AGE; |
Но мы можем экспортировать значение по умолчанию, не объявляя переменную последующим образом:
JavaScript //constants.js export default { name: «Billy», age: 40
};
| 12345 | //constants.jsexport default { name: «Billy», age: 40}; |
а в другом файле мы можем написать вот так:
JavaScript import user from ‘./constants’;
console.log(user.name); // Billy
console.log(user.age); // 40
| 1234 | import user from ‘./constants’; console.log(user.name); // Billy console.log(user.age); // 40 |
Существует очередной метод импорта всех переменных, экспортированных в файл, с внедрением последующего синтаксиса:
JavaScript import * as constants from ‘./constants’;
| 1 | import * as constants from ‘./constants’; |
Тут мы импортируем весь имеющийся у нас именованный экспорт и экспорт по умолчанию из constants.js и сохраняем его в переменной constants. Итак, constants сейчас станет объектом.
JavaScript // constants.js export const USERNAME = «David»; export default { name: «Billy», age: 40
};
| 123456 | // constants.jsexport const USERNAME = «David»;export default { name: «Billy», age: 40}; |
А в другом файле мы используем его, как показано ниже:
JavaScript // test.js
import * as constants from ‘./constants’;
console.log(constants.USERNAME); // David console.log(constants.default); // { name: «Billy», age: 40 }
console.log(constants.default.age); // 40
| 123456 | // test.jsimport * as constants from ‘./constants’; console.log(constants.USERNAME); // Davidconsole.log(constants.default); // { name: «Billy», age: 40 }console.log(constants.default.age); // 40 |
Вот демонстрация Code Sandbox.
Если вы не желаете экспортировать в отдельные строчки для экспорта по умолчанию и именованного экспорта, вы сможете соединить его, как показано ниже:
JavaScript // constants.js const PI = 3.14159; const AGE = 30; const USERNAME = «David»; const USER = { name: «Billy», age: 40
};
export { PI, AGE, USERNAME, USER as default };
| 12345678910 | // constants.jsconst PI = 3.14159; const AGE = 30;const USERNAME = «David»;const USER = { name: «Billy», age: 40 }; export { PI, AGE, USERNAME, USER as default }; |
Тут мы экспортируем USER как экспорт по умолчанию, а остальные как именованный экспорт. В другом файле вы сможете употреблять это так:
JavaScript import USER, { PI, AGE, USERNAME } from «./constants»;
| 1 | import USER, { PI, AGE, USERNAME } from «./constants»; |
Вот демонстрация Code Sandbox.
Заключение
В ES6 данные, объявленные в одном файле, недосягаемы для другого файла, пока они не будут экспортированы из этого файла и импортированы в иной файл.
Если у нас есть один параметр в файле для экспорта, к примеру, объявление класса, мы используем экспорт по умолчанию, в неприятном случае мы используем именованный экспорт. Мы также можем соединить экспорт по умолчанию и именованный экспорт в один файл.
Создатель: Yogesh Chavan
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Yandex.Дзен
Источник
Вам также может понравиться