Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней

Оптимизация JavaScript при помощи RequireJS

numbers

RequireJS – это эффективный способ повышения скорости и качества кода JavaScript, а также его чтения и простоты в обслуживании.

В этой статье мы ознакомим вас с RequireJS и как начать им пользоваться. Мы поговорим о “требующихся файлах”, “определение модуля”, а также коснемся “оптимизации”. Проще говоря, require.js это скрипт-загрузчик, который позволяет вставить ваш JavaScript код в файлы и модули, таким образом управляя зависимостью каждой модели.

Требующиеся файлы

Для начала работы с RequireJS и его Асинхронным Модулем Определения (AMD) нам нужно его скачать, а затем привязать его к require.js файлу в хэдере (head) нашего документа, следующим образом:

<script src="require.js" data-main="main"></script>

Вам наверно интересно, что это за 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 для современного веб мира.

Высоких конверсий!

11-03-2016

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".