<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Введение в JavaScript модули. Часть 2

Введение в JavaScript модули. Часть 2

Эта статья является продолжением предыдущей статьи, которая находится здесь.

Существует несколько популярных конкурирующих форматов определения модулей в JavaScript. К ним относятся:

  • CommonJS - module.exports, применяется синтаксис, используемый в Node.js
  • Асинхронное определение модуля (AMD)
  • Универсальное определение модуля (UMD).

Но в ES6 (ES2015) был предложен единый стандарт модуля.

Все, что находится внутри модуля ES6, является закрытым по умолчанию и работает в строгом режиме (нет необходимости использовать директиву 'use strict'). Все, что должно быть доступно для внешнего использования помечается с использованием ключевого слова export:

  // lib.js
  export const PI = 3.1415926;

  export function sum(...args) {
   log('сумма', args);
   return args.reduce((num, tot) => tot + num);
  }

  export function mult(...args) {
    log('умножение', args);
    return args.reduce((num, tot) => tot * num);
  }

  // закрытая функция
  function log(...msg) {
    console.log(...msg);
  }

В качестве альтернативы первому варианту можно использовать один оператор экспорта. Например:

  // lib.js
  const PI = 3.1415926;

  function sum(...args) {
   log('сумма', args);
   return args.reduce((num, tot) => tot + num);
  }

  function mult(...args) {
   log('умножение', args);
   return args.reduce((num, tot) => tot * num);
  }

  // закрытая функция
  function log(...msg) {
   console.log(...msg);
  }

  export { PI, sum, mult }; // экспортируем для внешнего использования

Затем используется инструкция import для извлечения элементов из модуля в другой скрипт или модуль:

  // main.js
  import { sum } from './lib.js';

  console.log( sum(1,2,3,4) ); // 10

В этом случае lib.js находится в той же папке, что и main.js. Разрешается использовать как абсолютные ссылки на файлы (начинающиеся с /), так и относительные ссылки (начинающиеся с ./ или ../), а также полные URL-адреса.

Одновременно можно импортировать несколько элементов:

  import { sum, mult } from './lib.js';

  console.log( sum(1,2,3,4) ); // 10
  console.log( mult(1,2,3,4) ); // 24

При импорте название импортируемой функции может быть изменено для разрешения конфликтов имен:

 import { sum as addAll, mult as multiplyAll } from './lib.js';

  console.log( addAll(1,2,3,4) ); // 10
  console.log( multiplyAll(1,2,3,4) ); // 24

Наконец, все публичные элементы можно импортировать за раз используя знак*:

 import * as lib from './lib.js';

  console.log( lib.PI ); // 3.1415926
  console.log( lib.add(1,2,3,4) ); // 10
  console.log( lib.mult(1,2,3,4) ); // 24

Использование модулей ES6 в браузерах

Во время написания данной статьи модули ES6 поддерживались в браузерах на основе хромиума (v63 +), Safari 11+ и Edge 16+. Поддержка в Firefox начнется с версии 60.

Сценарии, которые используют модули, должны быть загружены путем установки атрибута type = "module" в теге <script>. Например:

  <script type="module" src="./main.js"></script>

или:

  <script type="module">
   import { something } from './somewhere.js';
   // ...
  </script>

Модули парсятся только один раз, независимо от того, сколько раз они используются на странице или в других модулях.

Файлы модулей должны иметь MIME-тип application/javascript.

Обычно тег <script> может извлекать скрипты c других доменов (сайтов), но модули извлекаются на основе принципа совместноого использования ресурсов между разными источниками (CORS). Поэтому модули на разных доменах должны устанавливать соответствующий HTTP-заголовок, например Access-Control-Allow-Origin: *.

Наконец, модули не будут отправлять файлы cookie или другие учетные данные d заголовках, если в тег <script> не будет добавлен атрибут crossorigin = "use-credentials", и ответ не будет содержать заголовок Access-Control-Allow-Credentials: true.

На этом все, а в последующих статьях мы продолжим говорить о применении модулей в JavaScript.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

komron02 komron02 25.07.2018 07:51:52

здравствуйте у меня такой вопрос а как сделать так чтобы когда вставили ссылку на какую нибудь файл сайт сам скачивал файл

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.