Оффтоп Digital Skynet
92

Использование ECMAScript для модульных компонентов в JavaScript

JavaScript модули теперь поддерживаются браузером. Раньше для этого использовали webpack, что было не очень удобно.

В закладки

Итак, в этой статье вы узнаете больше о JavaScript модулях и как их использовать в веб-приложениях.

Офис "Digital Skynet"

Что такое JavaScript модули и почему лучше использовать их вместо классических скриптов?

Модули JavaScript позволяют нам встраивать один в файл в другой с использованием методов import и export. Они также позволяют создавать модульные компоненты, которые могут быть повторно использованы.

Мы получаем много преимуществ, используя JavaScript модули:

  • Разделение приложения на модули: создание приложения с помощью модулей делает его более эффективным и повышает производительность. Благодаря использованию модулей, вы сможете применять lazy load и избавиться от ненужного кода в вашем приложении.
  • Использование Strict mode по умолчанию: Да, Strict mode включен по умолчанию в модулях JavaScript.
  • Использование метода defer по умолчанию.
  • Это означает, что ваш HTML-код загружается параллельно с JavaScript. Таким образом, вам больше не нужно добавлять атрибут defer в свой script тег, когда вы используете ECMAScript.
  • Модули импортируются динамически
  • С JavaScript модулями вы можете настроить загрузку своих модулей, запустив динамическую функцию, которая импортирует модуль в случае необходимости. Это предполагает, что при посещение пользователем сайта вы подгружаете profile модуль только когда пользователь авторизировался.

usermodule.js

profile.js

Как использовать модули

Теперь рассмотрим способы использования JavaScript модулей. Для использования модуля просто укажите атрибут type в script теге модуля, который реализует ваш основной JavaScript файл. Теперь вы можете использовать import и export методы для импорта ваших модулей.

И внутри main.js вы можете импортировать и экспортировать модули:

Использование метода export в profile.js:

Как показано в примере выше, использовать модули ECMAScript легко.

Когда вы задаете type в модуле, браузер автоматически рассматривает его как модуль JavaScript.

Еще вы можете установить .mjs-расширение файлу, чтобы браузер мог идентифицировать модуль. Но это не принесет никаких улучшений.

Поддержка браузера

Кажется, что только современные браузеры поддерживают JavaScript модули. Но все хорошо, если вы используете нормальный браузеры, такие как Chrome, Edge и Firefox

Заключение

JavaScript модули - отличный способ повысить производительность вашего приложения. Они позволяют использовать много вещей, которые сделают приложение более функциональным, такие как динамическая загрузка модулей и lazy loading. Главное, что он поддерживается браузером.

Перевод статьи How to use ECMAScript modules to build modular components in JavaScript от Digital Skynet :)

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Digital Skynet", "author_type": "self", "tags": [], "comments": 2, "likes": 2, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 44132, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 44132, "author_id": 187179, "diff_limit": 1000, "urls": {"diff":"\/comments\/44132\/get","add":"\/comments\/44132\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/44132"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

2 комментария 2 комм.

Популярные

По порядку

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления