Сравнение методов require() и import() в JavaScript
Прежде чем остановиться на отдельных характеристиках методов, дадим каждому из них определение.
require()
В контексте Node.js require() — это встроенная функция для включения внешних модулей, которые существуют в отдельных файлах. Оператор require() читает файл JavaScript, выполняет его, а затем возвращает экспортированный объект. Он позволяет добавлять встроенные модули NodeJS, те, что разработаны сообществом, а также локальные модули.
var myVar = require('http'); //to use built-in modules
var myVar2 = require('./myLocaModule'); //to use local modules
import()
Операторы import() и export() используются для ссылки на модуль ES. Другие модули с такими типами файлов, как .json , нельзя импортировать с помощью этих операторов. Их можно использовать только в модулях ES, а спецификатором этого оператора может быть либо относительный путь типа URL, либо имя пакета. Оператор import также нельзя использовать во встроенных скриптах, если только такой скрипт не относится к типу module . Динамический импорт можно применять для скриптов, тип которых не является module .
var myVac = import("module-name");
Сравнение require() и import()
1. require() можно вызвать из любого места
Обычно операторы import() и require() вызываются в начале файла. Но вы можете вызвать require() из любого места кода, в то время как операторы import() могут быть определены только в начале. Определение оператора import() в другом месте приведет к ошибке или автоматическому сдвигу в начало файла.
2. require() может быть вызван условно
Оператор require() можно вызывать условно в отличие от import() . Взгляните на приведенный ниже код:
//require
if(user.id == 1) const getBlogTitle = require(‘./blogDetails.js’);>//import
if(. ) <
import . ; // Ошибка, не разрешается!
>
<
import . ; // Ошибка, мы не можем поместить импорт ни в один блок.
>
3. Модули ES можно вызывать динамически
Существует способ динамического вызова импорта, который отличается от условного, но может помочь в решении проблем асинхронной загрузки.
//Динамический импорт
let = await import('./say.js');
hi(); // Hello!
bye(); // Bye!//ИЛИlet say = await import('./say.js');
say.hi(); // Hello!
say.bye(); // Bye!
4. Операторы import() я вляются асинхронными
Операторы require() вызываются синхронно один за другим, в то время как import() вызываются асинхронно, и, как известно, работают лучше, чем require() в крупномасштабных приложениях.
- Напишите свой первый микросервис на JavaScript
- TypeScript: основы
- 5 способов уменьшения размера пакетов JavaScript
Понимание require() в Node.js
Node.js это асинхронная JavaScript бибилиотека для построения серверных приложений, которые используют конвенцию CommonJS. Весь этот синтаксис, модули поначалу достаточно запутали меня. Но давайте все-таки попытаемся разобраться.
В этой статье будет использоваться Node.js v0.5.8-pre. Поехали!
Для начала давайте определим пару функций, работающих с окружностями (вероятно вы их уже встречали на страницах документации):
exports.area = function ( r ) return PI * r * r
>
exports.circumference = function ( r ) return 2 * PI * r
>
* This source code was highlighted with Source Code Highlighter .
Отлично. Теперь попробуем использовать их в node. Запускаем консоль командой node и подключаем наш файл circle.js. Обратите внимание, что в пути указан относительный путь. Расширение можно не указывать, node подразумевает, что это будет js файл. Первый раз у вас скорее всего получится что-то типа этого:
node> require(‘./circle’)
< area: [Function], circumference: [Function] >
node> area
ReferenceError: area is not defined
at EventEmitter.anonymous (eval at readline (/usr/local/lib/node/libraries/repl.js:48:9))
at EventEmitter.readline (/usr/local/lib/node/libraries/repl.js:48:19)
at node.js:845:9
Что же произошло?
Давайте разбираться. Имея опыт работы с другими объектными языками, я привык использовать методы, которые я предварительно определил. Но с CommonJS модулями не все так просто. Давайте посмотрим, как можно использовать наш модуль:
Отлично. Результат уже лучше. Однако если попробовать следующее:
node> circle.PI
node>
Мы получим “ничего”. Ведь мы корректно вызвали атрибут circle, но ничего не получили. Поначалу это может несколько сбить с толку. Собственно как и меня по началу. Если заглянуть в документацию, то там есть что посмотреть по этому поводу.
To export an object, add to the special exports object. (Alternatively, one can use this instead of exports.)
Мы можем переписать наш модуль следующим образом:
this .area = function ( r ) return PI * r * r
>
this .circumference = function ( r ) return 2 * PI * r
>
* This source code was highlighted with Source Code Highlighter .
“Причем здесь this?” — спросите вы. Да при том, что это и есть наш объект. Мы можем представить наш модуль в следующем виде:
this .area = function ( r ) return PI * r * r
>
this .circumference = function ( r ) return 2 * PI * r
>
>
* This source code was highlighted with Source Code Highlighter .
Знакомо? Это обычный JavaScript-объект. Таким образом модули в Node.js не более, чем привычные нам объекты, определенные в короткой форме. То есть по сути мы объявляем лишь тело объекта. Теперь мы имеем представление об CommonJS модулях.
Вывод
Файлы модулей являются ничем иным, как обычными обектами. В файле мы определяем непосредственно тело модуля. В CommonJS модулях, если выхотите что-то сделать доступным из вне, необходимо использовать export. На самом деле можно получить доступ к PI (в примерах выше), но это неправильный подход. Используя глобальную область видимости мы просто рискуем переопределить уже существующие атрибуты или методы. А потом сиди и отлавливай баги. Экспортируем только публичные методы, все остальное оставляем внутри черного ящика. Export — это крайне удобный и практичный подход.
От переводчика
Это скорее вольная интерпритация записи Джеймса, нежели полноценный перевод. Оригинал поста уже порядком устарел и я попытался внести некоторые корректировки. Сам я в поисках новых технологий и горизонтов вышел на node.js и пытаюсь его понять, а так же понять причины его бурно растущей популярности. Так и решил поделиться с общественностью некоторыми результатами кропотливого постижения шаг зашагом.
- node.js
- CommonJS
- javascript framework
Оптимизация JavaScript при помощи RequireJS
RequireJS – это эффективный способ повышения скорости и качества кода JavaScript, а также его чтения и простоты в обслуживании.
В этой статье мы ознакомим вас с RequireJS и как начать им пользоваться. Мы поговорим о “требующихся файлах”, “определение модуля”, а также коснемся “оптимизации”. Проще говоря, require.js это скрипт-загрузчик, который позволяет вставить ваш JavaScript код в файлы и модули, таким образом управляя зависимостью каждой модели.
Требующиеся файлы
Для начала работы с RequireJS и его Асинхронным Модулем Определения (AMD) нам нужно его скачать, а затем привязать его к require.js файлу в хэдере (head) нашего документа, следующим образом:
Вам наверно интересно, что это за data-main атрибут. Так вот, использование RequireJS означает, что при вызове require в начале (head) вашего документа, вы также связываетесь с основным файлом вашего приложения JavaScript, Атрибут data-main является ссылкой на основной файл JavaScript для вашего приложения, в данном случае main.js. (Заметим, что RequireJS автоматически добавляет .js в конце имени файла.)
В main.js файле нужно разместить конфигурации для RequireJS, загрузить модули и определить базовый путь использования при требование (requiring) файлов.
Функция “Require”
RequireJS использует простую функции require для загрузки скриптов, в следующем примере RequireJS загружает jQuery:
require(["jquery"], function($) < return $(‘#mydiv”).html(‘Привет! Это сообщение от RequireJS!”); >);
Одна из лучших вещей в RequireJS является то, что он хорошо читаем. Если вы посмотрите на этот код, то вы увидите, что сначала require берет файл с именем jquery.js и передает анонимную функции с jQuery $ в качестве параметра. Когда это будет сделано, вы можете свободно использовать все jQuery кода, которые пожелаете.
Обычно у вас не будет jQuery библиотеки в файле jquery.js, как и с большинством плагинов и структур. Мы загружаем их с GitHub или Google CDN, а для этого нам нужно настроить путь, чтобы они указывали в нужное место:
require.config( < paths: < "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" >>);
Это означает, вы можете потребовать (require) jQuery через Google и использовать его без проблем.
Определение модуля
Использование AMD шаблона означает, что наш код может быть структурирован в модули; эти модули – просто кусочки кода, которые делают что-то в нашем приложении. Вы можете разместить две строки кода в модуле или 100, всё зависит от того, что вы хотите, чтобы модуль делал.
Для определения модуля используем такой код:
define(function () < function add (x,y) < return x + y; >>);
В этом примере мы создали простую функцию добавить (add) без зависимостей, но если этой функции необходимо, чтоб JQuery работал должным образом, функция определение (define) будет структурирована следующим образом:
define([‘jquery’], function () < function place(mydiv) < return $(mydiv).html(‘Мой пример текста’); >>);
Используя этот синтаксис мы говорим JavaScript пойти взять jQuery, а затем запустить код, чтобы jQuery был доступен при необходимости.
Оптимизация
Как вы видите, RequireJS является отличным инструментом для организации файлов в модули и загрузки только необходимого. Недостатком является то, что слишком много файлов JavaScript приводят к ухудшению времени загрузки, поэтому RequireJS включает в себя оптимизатор для сбора данных из всех файлов и размещение их в одном минимизированом файле.
В целом, RequireJS является одним из лучших способов организовать и оптимизировать ваш JavaScript для современного веб мира.
Require js что это
RequireJS — библиотека JavaScript для загрузки файлов и модулей. Она совместима со всеми популярными браузерами — IE, Firefox, Safari, Chrome и Opera, в том числе и достаточно старых версий. Кроме того, RequireJS можно использовать в веб-приложениях на node.js. Задача модульного загрузчика скриптов — увеличить скорость, и улучшить качество кода.
3 причины почему вашему проекту нужен RequireJS
Как показывает аналитика, среднестатистический пользователь не будет ждать загрузки дольше 3-х секунд. Особенно если прорисовывается не первая страница. RequireJS один из инструментов для ускорения загрузки страниц. Благодаря ему JavaScript подгружается в фоновом режиме, асинхронно.
Если бы каждый файл с кодом javascript из которых состоит ваш сайт или веб-приложение, загружался последовательно, это бы заняло невероятно много времени. В том числе потому, что четкие зависимости между файлами заставили бы браузер обрабатывать их в четком порядке. Даже если не принимать во внимание скорость, такое решение очень сложно реализовать и поддерживать его стабильность. RequireJS позволяет реализовать асинхронную загрузку, без потерь отклика страниц, а также управлять зависимостями. Писать и поддерживать модульный код намного проще. Он будет чище и понятнее, а главное лучше работать.
RequireJS нужен для разделения кода javascript на файлы и модули, а также управления зависимостями между ними. Дополнительный этап загрузки скрипта позволяет загружать страницы не только быстрее, но и качественнее, более контролируемо. Например, первыми будут подтягиваться самые важные элементы.
Заключение
RequireJS — это обязательная front-end библиотека для любого достаточно масштабного проекта. Его задача сделать легче и проще загрузку других файлов и модулей JavaScript. Использование RequireJS сделает код более читабельным и структурированным, а главное — ускорит загрузку даже тяжелых страниц. Хотя у этой библиотеки есть аналоги и получить тот же результат можно если запрограммировать нужные зависимости вручную, RequireJS все равно остается самым популярным решением, позволяющим быстро получить максимально качественный результат.
Разработка веб сайтов
Разработка веб сайтов
Бизнес знает свои потребности, а мы — как их реализовать.
Создаем и разрабатываем устойчивые корпоративные сайты и резвые промо-лендинги. Разрабатываем web сервисы. Наши продукты выдерживают огромную нагрузку и надёжно служат клиентам.