Импорт и экспорт JavaScript. На реальном примере
Вставка
- Опубліковано 16 чер 2024
- 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 и именованный экспорт.
Спасибо большое за помощь! У Вас талант от Бога объяснять материал!
Если чего-то не знаешь и хочешь краткий, исчерпывающий ответ, то тебе точно сюда! Спасибо за знания!
Большое Вам человеческое спасибо! Перелопатил кучу инфы по модулям, но только тут понял что к чему. Очень доходчиво и понятно.
Поставил на паузу и поставил лайк. Теперь со спокойной душой буду смотреть дальше. Александр, Спасибо Вам огромное!
Отличный урок! Спасибо автору! Ждем новых уроков.
Отличная подача информации! У вас талант.
Алекс Лущенко, ты лучший. когда-нибудь накоплю на твой курс )
Как раз в этой теме сегодня разбирался!) Спасибо Александр!)
Добрый день!
Извините что не по теме! Александр, Вы очень хорошо и понятно объясняете, я восхищаюсь вашими видеоуроками. Хотелось бы увидеть от Вас в ближайшем будущем видео о префиксных и постфиксных инкрементах и декрементах. :)
За видео - лайк! Всегда подробно и понятно. 👍🏻
Это то, чего мне не хватало. Спасибо! Люблю нативный js :) 😊
как же круто вы все рассказываете. огромное спасибо!
Очень круто все объяснил ) Заслуженный лайк)
С самого начала изучения JS пользовался NodeJS и привык к его импорту/экспорту. И пришлось работать не с html-файлами, а с php, которые Node не поддерживает. Облазил десятки тем на форумах, и нигде не увидел момент про указание расширения файла при импорте.
В очередной раз выручили, Александр! Спасибо! Лайк!
спасибо! Очень полезная и понятная инфа)
Хорошо объяснил про работу модульной системы. Начал vue учить, пришлось вернуться к основам js. Спасибо)
Спасибо Вам за все Ваши видео 🙏🙏🙏
Спасибо, очень помогли. Ничего не получалось без Live Server, спасибо за подсказку
Как всегда на высоте инфа , спасибо!!!
Нырнул, что называется, в новые для меня открытия мира JS. Очень интересно было! Могу теперь приступать к практике.
Александр, Вы мой кумир! Получила task написать app на нативном js, не было ни одной идеи как организовать код на голом js без React. После пересмотра урока все стало по полочкам. Спасибо Вам за помощь!💛💙
Получили офер?
просто прекрасно, спасибо большое
как всегда отличный урок, спсибо!!!
классный урок, понятное объяснение
Красавчик! Обьясняешь на уровне!!
Спасибо за видео. Только сел учить js и это видео очень помогло
просто бомба, объяснение проще некуда!
Большое спасибо, очень полезное видео!
Жаль не упомянули про работу с классами и их импорт/экспорт)
спасибо - очень доступно и понятно!
Спасибо за видео, от доков уже голова кружилась, а хотелось оч без вебпака попробовать импорт.
Вчера хотел сделать тоже самое, все начинания разбились об ошибку в консоли.
Просыпаюсь утром и чувствую силу ))
Спасибо
Как всегда профессионально !
хороший канал у вас александр спасибо
Спасибо большое, всё доступно и понятно
A 4to tak mojno bilo????? :))))) Alex da ti prosto krasava! Bolshoe spasibo!!!! Ne mogu otorvatza ot tvoih urokov!
по мне ОН объяснил эту тему как создатель Java...простыми словами..респект
Отличный урок. Если бы ещё в конце добавить деструктуризацию объекта helper_array2.js, вообще была бы сказка.
спасибо за объяснение. все понятно
Спасибо огромное!!! Благодаря вам увидела свою ошибку!!! И все получилось)
очень хороший урок🖤
Супер!!! Спасибо Вам огромное!!!
Очень круто 👍
всё очень понятно! спасибо)
единственное видео на тему модулей в ютубе где до конца все максимально понятно
классс, спасибо, без воды
ухххх!! многоуровневая головоломка = ) интересно, интересно...
Спасибо вам🎉
хорошее обьяснение, спасибо)
как обычно супер, плюсую и жду новых видео, но я немного огорчен что у вас етого описания нету в JS2.0.
Оoo как раз!👍
Просто и понятно 👍
крутяк, спасибо огромное
Лучший !
Спасибо...ОГРОМНОЕ очень помогло $$$$$$
Спасибо большое, помог
Класс, спасибо.
Хорошое видео. Лайк
нереально круто
як завжди топ, дякую!
👍
Дякуй дякуй
@@awenn2015 Дядя, ты это к чему?
спосибо добрый человек
Лайк !!!
👍 отлично
спасибо большое
Спасибо!
спасибо,класс!!
Спасибо
Спасибо большое
Рад что помогло.
Алекс, привет! Есть идея для ролика, как для практики js. У нас есть на сайте в "альбоме" наши любимые картинки, но мы не хотим их отдельно скачивать. Самый верный вариант, т.к. мы разработчики, написать скрипт для этого. Мы берем каждый элемент, проходим циклом, получая его url из img, добавляем в массив, формируем zip и скачиваем)
Как тебе? Ну, это моя реализация, я думаю, ты можешь сделать и лучше
it cool !!THX=)
Алекс, скажи пожалуйста , что лучше использовать modгle export or export default? спасибо!
Хорошо объясните на нативном js.
спасибо
Spasibo
Все супер! Только не Го лив, а го лайф. :)
А можете рассказать, пожалуйста, как правильно, красиво и удобно реализовать подключение модулей с версткой и js кодом к этой верстке по условию. Т.е. если сделал действие 1 - подтянулся файл с версткой 1 и исполнился код js 1, который работает с этой версткой. Если действие 2 - соответственно верстка 2 и код к ней. Зачем это нужно? Хочу для разных устройств выводить разную верстку. но сделать это все как js библиотеку, без бэкенда.
Когда пытался реализовывать сам, получилось только с помощью eval() исполнить код, т.к. при подключении верстки, она сразу отрисовывается. Но при подключении кода уже к отрисованной странице - он не исполняется. А про eval() пишут, что он небезопасный. Кстати, разбор этого момента тоже очень интересен (актуальна ли его небезопасность и как вообще через него могут взломать)
Можете показать на примере чистого js и модулей, а можете например рассказать, как пользоваться какими-нибудь сборщиками из вебпака?
С большим уважением к Вам и Вашим урокам. Смотрим всей семьей и радуемся жизни!
p.s. кстати, если сделаете видео на тему безопасности - тоже будет огромный + в карму, про базовые вещи типа xss
лучший
Можно ещё так экспортировать: export const getValue = helper.getValue, mapArray = helper.mapArray
Бомба
получается с модулями уже нужен вебпак? не запустить просто с помощью хрома?
Спасибо, заполнили пробел в моих знаниях. Как-то так получилось что нативными модулями я не пользовался, а спрашивается почему бы и не использовать при случае? Не обязательно же всюду пихать вебпак
спсб
Алиас разве нельзя использовать при импорте..? Вопрос создания объекта с методами спорный. Вы все равно в одном файле создаёте большой обьект с этими функциями , т. е строк не меньше в файле. Также Дополнительная переменная на обьект , потом ещё на каждый метод опять переменную для экспорта
superhero[i]['power'] - интересный синтаксис. Подскажите, что это, пожалуйста
На скорости 1.5 смотрится отлично
У мене в хромі працює тільки коли прописати файлам розширення mjs , інакше не завантажує, щось там з CORS . Не підскажете чому так?
Если бы вы только понимали как вы помогаете разобраться.... Спасибо!!!!!
Just 'helpers' everyday!
Всетаки в php include намного круче. Там функции везде доступны, из файла 1 можно получить в файле 2, а из файла 2 в файле 1, и это одновременно.
А тут модуль как полностью отдельный скрипт, по сути библиотека.
what is this: let name = require("./modules/test").NAME ? saying please
Я только одно не понял. Если нативны импорты в браузере сработали только, когда был запущен live-сервер, то как этот код будет работать, если его разместить на хостинге? К примеру, на GitHub Pages?
Webpack подключите
@@user-ek5sb4wz2x Тогда к чему это видео, если без сборики Webpack'ом или live-сервера всё равно не работает в браузере? А я то было обрадовался...
@@vovergg , запустите на хостинге, вот вам и сервер, на том же GitHub Pages
Запускаю ровно такой же код на OSPanel, у меня ошибок нет - но кода в файле который делает импорт просто не работает =(
Причем вообще все что есть в файле, даже банальный console.log(123);
как импортировать класс из другого файла?
Все бы хорошо. Но мне требуется прочесть данные из файла.js прямо в скриптах HTML-файла. То есть некие константы, переменные выдернуть из внешнего подключенного файла и использовать их в скриптах index.html. К сожалению, везде, как и здесь, рассказывается об экспорте/импорте между js-модулями. Но никак не напрямую.
export {getValue2 , mapArray , p} = helpers сработает ?
Вопрос, конечно, интересный. Почему бы не попробовать?
export const { getValue2, mapArray, p } = helpers; работает в лучшем виде. Просмотрев ролик в первый раз, сам задумался о деструктуризации объекта.
import и export вызывает SyntaxError: Unexpected token - как это обойти, когда запуск идет не через лайв сервер ?
Сам же и отвечу на вопрос. Так как импорт и экспорт не работает, нужно использовать в js с которого хотите экспортировать например метод написать module.export{ имя метода без скобок}; а в файле в который хотите экспортировать объявить const {имя метода} = require (./путь до файла js из которого импортируете )
Сделай уроки по react native
Очень полезно для начинающих!
По оформлению видео, Александр, большая просьба, не начинайте с тишины. Кажется, что у меня громкость на нуле. Я выкручиваю посильнее, и тут вы начинаете орать.
ООООЧЕНЬ резкий переход!!! Не делайте так. Воткните какой-нибудь звук вначале.
module.exports = сейчас не использоют ?
Это только синтаксис node js.
Вау
коли назви імпротів перекликаються можна ще використовувати "import { map as mapArray} from './..../....'"