41. Использование модульного подхода к программированию в js на примере работы с библиотекой Require.Js.

RequireJS – один из самых популярных файловых/модульных загрузчиков. При создании крупных компонентных проектов без него не обойтись, т.к. он решает основные проблемы таких приложений:

– зависимости между модулями

– засорение глобальной области

RequireJS использует AMD концепцию. Создан для использования в браузере.

По сути работа с RequireJS заключается в использовании 2х методов define и require:

- Метод define служит для описания модулей

define( [moduleName,] dependencies, callback) где moduleName - имя модуля

dependencies - массив зависимостей (callback - тело модуля, в которое передаются dependencies

Для нашего случая будет выглядеть так

define( "unit",

['jQuery'],

function( jQuery ){

return { foo : "bar" };

}

);

Настроить опции RequireJS можно через метод require.config(), например:

require.config({

baseUrl: "/another/path",

paths: { "some": "some/v1.0" },

waitSeconds: 15 });)

Параметр shim позволяет добавить сторонние модули (без метода define) к общей схеме.

requirejs.config({

paths:{

'jquery': https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery'

},

shim: {

'jquery': {

exports: 'jQuery', } }});

require(["util", "jquery"], function(util, $) {

console.log($(document));})

С помощью параметра map мы можем сделать более гибкими связи между модулями, например, новый модуль зависит от более новой версии библиотеки, а старый модуль, но который все равно нужно поддерживать, – использует древнюю версию. Так вот для обоих модулей мы можем прописать одну зависимость на библиотеку, а через map реализовать версионность:

requirejs.config({

map: {

'some/newmodule': { 'foo': 'foo1.2' },

'some/oldmodule': { 'foo': 'foo1.0' }

}

});

42. Менеджер задач (на примере Grunt). Варианты заданий.

Grunt - это планировщик задач. Стоит лишь установить его, и операции будут происходить автоматически, так, что вам про них даже не придётся вспоминать.

В корне док-ма создаем package.json:

{

"name": "example-project",

"version": "0.1.0",

"devDependencies": {

"grunt": "~0.4.1" }}

Представим, что в нашем проекте есть 3 файла JS:

- jquery.js -библиотека, которую мы используем.

- carousel.js- плагин для jQuery, который мы используем.

- global.js - написанный нами файл, где мы настраиваем и вызываем наш плагин.

concat: {

dist: {

src: [

'js/libs/*.js', // Все JS в папке libs

'js/global.js' // Конкретный файл

],

dest: 'js/build/production.js', }}

Файлы объеденены!

43. Назначение и функции пакетных менеджеров Bower и npm.

Проекты часто обрастают сторонними библиотеками, которые нужно выкачивать, распаковывать, подключать в шаблонах и поддерживать их все в актуальном состоянии. Для упрощения этой работы можно использовать Bower. Bower - менеджер assets пакетов, поможет освободить чуточку вашего времени, автоматизируя вышеописанные процедуры

Написан на JS под платформу NodeJS. Что умеет Bower:

-Загрузка пакетов из основного репозитория, GIT репозитория, по ссылке на JS файл;

-Умеет распаковывать архивы;

-Контролирует и исключает повторную загрузку зависимых пакетов;

Почему не npm спросите вы, главным отличием npm от bower - подход к установке зависимостей пакетов. npm устанавливает зависимости для каждого пакета отдельно, в итоге имеем большое дерево пакетов (node_modules/gulp/node_modules/gulp/node_modules/…), где может быть несколько версий одного и того же пакета. В клиентском javascript это недопустимо: нельзя подключить на страницу к примеру, две версии jQuery или любой другой библиотеки. В bover каждый пакет устанавливается один раз (jQuery всегда будет в папке bower_components/jquery, сколько бы пакетов от него не зависело) и в случае конфликта зависимостей, bоver просто не станет устанавливать пакет, не совместимый с уже установленными.

Для работы с Бовером потребуются Node.js и Git.

$ npm install -g bower

Работа с пакетами

Попробуем что-нибудь установить, jQuery:

$ bower install --save jquery # Или bower i -S jquery

Для удаления пакетов используется команда bower uninstall:

$ bower uninstall --save jquery-icheck # Или bower un -S jquery-icheck

Вы можете спокойно удалять папку bower_components или добавить её в ваш.gitignore. Команда bower install (без дополнительных параметров) вернёт всё как было:

$ bower install

Пакетный менеджер npm

npm - это пакетный менеджер node.js. С его помощью можно управлять модулями и зависимостями.

Установка npm

curl https://npmjs.org/install.sh | sh

Обновление npm

npm install npm -g

Прoсмотр И о пакете

npm view hook.io