Импорт и экспорт JavaScript. На реальном примере

00:00 Начало видео
03:10 Вводим функции
05:40 Выносим функции в файл
07:26 Import Export
09:08 Подключаем модуль
11:05 Type module
13:21 Делаем второй модуль
15:55 Делаем именованный экспорт
19:45 Делаем объект с методами в модуле
22:23 Храним данные в модуле
Курс JS 2.0: itgid.info/course/javascript-2
Методы массивов: itgid.info/course/arraymethod
Курс HTML для JS разработчиков: itgid.info/course/html
Остальные курсы: itgid.info/
Телеграмм канал: t.me/itgid_info
Код: github.com/itgidinfo/import_e...
Импорт и экспорт JavaScript на реальном примере - простыми словами. Создаем модули, делаем default export и именованный экспорт.

[@user-qz8kj3tr8i]

Если чего-то не знаешь и хочешь краткий, исчерпывающий ответ, то тебе точно сюда! Спасибо за знания!

[@user-zs3xt4up8j]

Спасибо большое за помощь! У Вас талант от Бога объяснять материал!

[@user-zb4hz5rt3s]

Спасибо, очень помогли. Ничего не получалось без Live Server, спасибо за подсказку

[@user-nj8cc8px8o]

Большое Вам человеческое спасибо! Перелопатил кучу инфы по модулям, но только тут понял что к чему. Очень доходчиво и понятно.

[@BagaevRoman]

Поставил на паузу и поставил лайк. Теперь со спокойной душой буду смотреть дальше. Александр, Спасибо Вам огромное!

[@user-ig4lq2ts8b]

Алекс Лущенко, ты лучший. когда-нибудь накоплю на твой курс )

[@33mika777]

Это то, чего мне не хватало. Спасибо! Люблю нативный js :) 😊

[@valeriyruss]

Отличный урок! Спасибо автору! Ждем новых уроков.

[@user-th4gy4sz8j]

хороший канал у вас александр спасибо

[@TwoCreativebob]

Отличная подача информации! У вас талант.

[@Ireile]

За видео - лайк! Всегда подробно и понятно. 👍🏻

[@user-xc7my7by4m]

С самого начала изучения JS пользовался NodeJS и привык к его импорту/экспорту. И пришлось работать не с html-файлами, а с php, которые Node не поддерживает. Облазил десятки тем на форумах, и нигде не увидел момент про указание расширения файла при импорте. В очередной раз выручили, Александр! Спасибо! Лайк!

[@katerynatrushko6492]

Александр, Вы мой кумир! Получила task написать app на нативном js, не было ни одной идеи как организовать код на голом js без React. После пересмотра урока все стало по полочкам. Спасибо Вам за помощь!💛💙

[@astkh4381]

Получили офер?

[@M27B_our_victory]

Как раз в этой теме сегодня разбирался!) Спасибо Александр!)

[@raenlin8084]

как же круто вы все рассказываете. огромное спасибо!

[@CuBeAreaFUN]

Спасибо Вам за все Ваши видео 🙏🙏🙏

[@alexkoss9670]

Очень круто все объяснил ) Заслуженный лайк)

[@user-kn9ox6cr3b]

Как всегда на высоте инфа , спасибо!!!

[@Arch_Demon3]

единственное видео на тему модулей в ютубе где до конца все максимально понятно

[@CHITUS]

спасибо! Очень полезная и понятная инфа)

[@VenatorLine]

Добрый день! Извините что не по теме! Александр, Вы очень хорошо и понятно объясняете, я восхищаюсь вашими видеоуроками. Хотелось бы увидеть от Вас в ближайшем будущем видео о префиксных и постфиксных инкрементах и декрементах. :)

[@dreamypioneer3760]

Хорошо объяснил про работу модульной системы. Начал vue учить, пришлось вернуться к основам js. Спасибо)

[@wujustyle9603]

просто прекрасно, спасибо большое

[@DerAleksey]

ухххх!! многоуровневая головоломка = ) интересно, интересно...

[@ondrui]

как всегда отличный урок, спсибо!!!

[@Neiron666]

Красавчик! Обьясняешь на уровне!!

[@user-ll5xx7ef1p]

просто бомба, объяснение проще некуда!

[@AViStudioMoldova]

A 4to tak mojno bilo????? :))))) Alex da ti prosto krasava! Bolshoe spasibo!!!! Ne mogu otorvatza ot tvoih urokov!

[@apexnuts9785]

классный урок, понятное объяснение

[@user-bs5te4fp1w]

Спасибо за видео. Только сел учить js и это видео очень помогло

[@arsenmaximus6372]

по мне ОН объяснил эту тему как создатель Java...простыми словами..респект

[@imdimasan]

Вчера хотел сделать тоже самое, все начинания разбились об ошибку в консоли. Просыпаюсь утром и чувствую силу )) Спасибо

[@ALEKSEY_77737]

спасибо - очень доступно и понятно!

[@alexdenuke]

Как всегда профессионально !

[@therescue1879]

спасибо за объяснение. все понятно

[@user-gy5qb8fh1c]

Спасибо большое, всё доступно и понятно

[@jinke5935]

Нырнул, что называется, в новые для меня открытия мира JS. Очень интересно было! Могу теперь приступать к практике.

[@LmM277]

Спасибо за видео, от доков уже голова кружилась, а хотелось оч без вебпака попробовать импорт.

[@Modestov1998]

Большое спасибо, очень полезное видео! Жаль не упомянули про работу с классами и их импорт/экспорт)

[@kenanhaciyev3759]

классс, спасибо, без воды

[@user-pw7vb2cg6n]

Спасибо вам🎉

[@omnomnom1323]

Спасибо огромное!!! Благодаря вам увидела свою ошибку!!! И все получилось)

[@mikhail9797]

Супер!!! Спасибо Вам огромное!!!

[@OlegGuitar]

всё очень понятно! спасибо)

[@user-vk1kb3xj6b]

Очень круто 👍

[@altynbekbaktybev2152]

очень хороший урок🖤

[@samiroutka]

Спасибо большое, помог

[@tarasshevchuk8477]

Лайк !!!

[@gr1n4h]

спосибо добрый человек

[@user-oi4pi8mu7r]

Просто и понятно 👍

[@Qwertyqwerty-tq3we]

Оoo как раз!👍

[@xxxxxx-kz6yi]

Лучший !

[@arsenmaximus6372]

Спасибо...ОГРОМНОЕ очень помогло $$$$$$

[@romanprokopets3693]

хорошее обьяснение, спасибо)

[@user-hj1eh8dk9p]

Отличный урок. Если бы ещё в конце добавить деструктуризацию объекта helper_array2.js, вообще была бы сказка.

[@sotiva1]

👍 отлично

[@anton-vr5xw]

крутяк, спасибо огромное

[@MrColins710]

як завжди топ, дякую!

[@itgid]

👍

[@awenn2015]

Дякуй дякуй

[@user-zz9ho1lj1p]

@@awenn2015 Дядя, ты это к чему?

[@690doodoo]

it cool !!THX=)

[@user-bm4zd5ln3m]

Класс, спасибо.

[@vlad-zf1ev]

нереально круто

[@NikoLazo]

Хорошое видео. Лайк

[@dimabaradach3022]

спасибо,класс!!

[@sit8988]

спасибо большое

[@famemax8264]

Спасибо

[@27sosite73]

спасибо

[@user-od6fb7rl3k]

Спасибо!

[@web_ingushetiya]

лучший

[@adhambekrajapboyev1426]

Spasibo

[@giorgi_pa]

как обычно супер, плюсую и жду новых видео, но я немного огорчен что у вас етого описания нету в JS2.0.

[@Serewe]

Спасибо большое

[@itgid]

Рад что помогло.

[@user-wf5jn7di4v]

Хорошо объясните на нативном js.

[@romaskhin]

Алекс, скажи пожалуйста , что лучше использовать modгle export or export default? спасибо!

[@olexanderChorny]

Бомба

[@Blackpro]

Алекс, привет! Есть идея для ролика, как для практики js. У нас есть на сайте в "альбоме" наши любимые картинки, но мы не хотим их отдельно скачивать. Самый верный вариант, т.к. мы разработчики, написать скрипт для этого. Мы берем каждый элемент, проходим циклом, получая его url из img, добавляем в массив, формируем zip и скачиваем) Как тебе? Ну, это моя реализация, я думаю, ты можешь сделать и лучше

[@user-ld4oq4oc9y]

На скорости 1.5 смотрится отлично

[@phitrow]

Just 'helpers' everyday!

[@romantyniv5381]

спсб

[@koootyayo]

А можете рассказать, пожалуйста, как правильно, красиво и удобно реализовать подключение модулей с версткой и js кодом к этой верстке по условию. Т.е. если сделал действие 1 - подтянулся файл с версткой 1 и исполнился код js 1, который работает с этой версткой. Если действие 2 - соответственно верстка 2 и код к ней. Зачем это нужно? Хочу для разных устройств выводить разную верстку. но сделать это все как js библиотеку, без бэкенда. Когда пытался реализовывать сам, получилось только с помощью eval() исполнить код, т.к. при подключении верстки, она сразу отрисовывается. Но при подключении кода уже к отрисованной странице - он не исполняется. А про eval() пишут, что он небезопасный. Кстати, разбор этого момента тоже очень интересен (актуальна ли его небезопасность и как вообще через него могут взломать) Можете показать на примере чистого js и модулей, а можете например рассказать, как пользоваться какими-нибудь сборщиками из вебпака? С большим уважением к Вам и Вашим урокам. Смотрим всей семьей и радуемся жизни! p.s. кстати, если сделаете видео на тему безопасности - тоже будет огромный + в карму, про базовые вещи типа xss

[@user-fx8jc8pp5f]

Все супер! Только не Го лив, а го лайф. :)

[@user-qb4kf8db9h]

Можно ещё так экспортировать: export const getValue = helper.getValue, mapArray = helper.mapArray

[@TalkerTube]

Спасибо, заполнили пробел в моих знаниях. Как-то так получилось что нативными модулями я не пользовался, а спрашивается почему бы и не использовать при случае? Не обязательно же всюду пихать вебпак

[@user-no6lc5yp5i]

получается с модулями уже нужен вебпак? не запустить просто с помощью хрома?

[@user-iu4xu2kx6i]

У мене в хромі працює тільки коли прописати файлам розширення mjs , інакше не завантажує, щось там з CORS . Не підскажете чому так?

[@user-zm5bb8jk9c]

superhero[i]['power'] - интересный синтаксис. Подскажите, что это, пожалуйста

[@flogger2367]

Алиас разве нельзя использовать при импорте..? Вопрос создания объекта с методами спорный. Вы все равно в одном файле создаёте большой обьект с этими функциями , т. е строк не меньше в файле. Также Дополнительная переменная на обьект , потом ещё на каждый метод опять переменную для экспорта

[@valentyn996]

Запускаю ровно такой же код на OSPanel, у меня ошибок нет - но кода в файле который делает импорт просто не работает =( Причем вообще все что есть в файле, даже банальный console.log(123);

[@vovergg]

Я только одно не понял. Если нативны импорты в браузере сработали только, когда был запущен live-сервер, то как этот код будет работать, если его разместить на хостинге? К примеру, на GitHub Pages?

[@user-ek5sb4wz2x]

Webpack подключите

[@vovergg]

@@user-ek5sb4wz2x Тогда к чему это видео, если без сборики Webpack'ом или live-сервера всё равно не работает в браузере? А я то было обрадовался...

[@user-ek5sb4wz2x]

@@vovergg , запустите на хостинге, вот вам и сервер, на том же GitHub Pages

[@user-no6lc5yp5i]

Если бы вы только понимали как вы помогаете разобраться.... Спасибо!!!!!

[@vertalet76crew]

export {getValue2 , mapArray , p} = helpers сработает ?

[@user-hj1eh8dk9p]

Вопрос, конечно, интересный. Почему бы не попробовать?

[@user-hj1eh8dk9p]

export const { getValue2, mapArray, p } = helpers; работает в лучшем виде. Просмотрев ролик в первый раз, сам задумался о деструктуризации объекта.

[@mrslashx]

what is this: let name = require("./modules/test").NAME ? saying please

[@dmitriyv5740]

Всетаки в php include намного круче. Там функции везде доступны, из файла 1 можно получить в файле 2, а из файла 2 в файле 1, и это одновременно. А тут модуль как полностью отдельный скрипт, по сути библиотека.

[@evgeniichikishev2096]

как импортировать класс из другого файла?

[@user-iy9of1ew8c]

import и export вызывает SyntaxError: Unexpected token - как это обойти, когда запуск идет не через лайв сервер ?

[@user-iy9of1ew8c]

Сам же и отвечу на вопрос. Так как импорт и экспорт не работает, нужно использовать в js с которого хотите экспортировать например метод написать module.export{ имя метода без скобок}; а в файле в который хотите экспортировать объявить const {имя метода} = require (./путь до файла js из которого импортируете )

[@ScherzoStudio]

Все бы хорошо. Но мне требуется прочесть данные из файла.js прямо в скриптах HTML-файла. То есть некие константы, переменные выдернуть из внешнего подключенного файла и использовать их в скриптах index.html. К сожалению, везде, как и здесь, рассказывается об экспорте/импорте между js-модулями. Но никак не напрямую.

[@user-zv6gp9vc8f]

Вау

[@user-nw3nt9kq6m]

Очень полезно для начинающих! По оформлению видео, Александр, большая просьба, не начинайте с тишины. Кажется, что у меня громкость на нуле. Я выкручиваю посильнее, и тут вы начинаете орать. ООООЧЕНЬ резкий переход!!! Не делайте так. Воткните какой-нибудь звук вначале.

[@m1rable283]

module.exports = сейчас не использоют ?

[@user-ek5sb4wz2x]

Это только синтаксис node js.

[@vruyrsaribekyan3379]

Сделай уроки по react native

[@andykud63]

+