Install project

Клонуємо

$ git clone https://github.com/mendeleev/require-js-learning.git

Встановлюємо необхідні модулі та бібліотеки:

$ npm install -g bower
$ npm install -g requirejs

$ cd your_path/require-js-learning
$ bower install

Запускаємо оптимізатор (певна річ перш ніж його запустити, потрібно зробити всі необхідні налаштування для збірки)

$ r.js -o your_path/build.js

Troubleshooting

При спробі витягнути і прочитати файл з проекту може виникати така помилка:

Loading local file via ajax doesn't work in Chrome browser (security restrictions) (tested in Version 49.0.2623.87)
Error - "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."

Тому проект краще запускати використовуючи локальний сервер. Найпростіший і найшвидший спосіб використати модуль http-server, який можна встановити із npm репозиторію.

$ npm install -g http-server

Запускається дуже просто.

$ cd project_path
$ http-server ./

Starting up http-server, serving ./
Available on:
  http:127.0.0.1:8081
  http:10.1.18.139:8081
Hit CTRL-C to stop the server

У моєму випадку проект піднявся за адресою http://127.0.0.1:8081 та http://10.1.18.139:8081, у вас скоріш за все буде інша. Відкриваємо проект за цією адресою і проблема зникне.

Requirements

• не використовуємо EcmaScript 6, стараємось щоб проект працював у максимальній кількості браузерів

"RequireJS & JQuery" home task

Домашнє завдання по лекції "RequireJS & JQuery" Minions Clicker

Суть завдання

Отже в нас є прототип веб-додатку, який демонструє як саме це повинно працювати. Тепер з цього потрібно зробити більш робочий і динамічний проект. Перш за все це підвантаження даних. На реальному проекті, дані постійно змінюються і нам потрібно підготуватись до того, щоб інформація яку ми відображаємо була актуальною. Припустимо, що дані нам повинен віддавати якийсь backend, розробкою якого займається програміст John. Але ми не можемо і не повинні чекати поки John розбереться зі своєю частиною роботи, тому розробку клієнтської частини ми виконуємо незалежно.

Формат даних

Початковий формат даних які ми очікуємо, відомий, а тому ми можемо створити звичайний .json файл, і заповнити його будь-якими тестовими даними, який буде лежати прямо в проекті.

[
	{
		"id":1,
		"title": "Cake",
		"image": "Minion-Cake-icon.png",
		"count": 0
	},
	{
		"id":2,
		"title": "Curious",
		"image": "Minion-Curious-icon.png",
		"count": 0
	}
]

Завантаження даних

На щастя, JQuery однаково добре вміє витягувати дані, і з бекенду, і з файлу. Тому, нам цілком достатньо буде функції $.ajax(), почитати про яку можна тут. Також не варто забувати, що в секції Ajax є й інші корисні штуки, які можливо підійдуть краще.

$.ajax({
	url: "files/data.json",
	dataType: "json",
	success: function(data) {
		//do smth
	},
	error: function(error) {
		//houston we have a problem
	}
});

Також нагадаю, що ця штука повертає проміс і замість success/error можна використовувати .then() чи .done()

function getData() {
	return $.ajax({
		url: "files/data.json",
		dataType: "json"
	});
}

getData().done(function(data) {
	//do smth
}, function(error) {
	//do smth if error
});

Візуалізація

Приступаємо до мабуть найцікавішої частини, а саме, відмальовки отриманих даних. Тут нам знадобляться такі розділи як:

• Селектори (selectors)
• Бродяги (traversing)
• Маніпуляції (manipulations)
• Події (events)

За допомогою JQuery можна не лише тягнути елементи зі сторінки, але можна також створювати нові. Наприклад:

var $headline = $("<h1>Hello, World!</h1>")
$("body").append($headline)

Шаблон

На даному етапі в нас є верстка галереї, в якій знаходиться шаблон для одного елементу:

<li class="item">
	<img src="images/Minion-Curious-icon.png" alt="Curious" />
	<span class="counter">0</span>
</li>

Всі елементи складаються в контейнер:

<ul class="gallery"></ul>

Модулі

Для того, щоб нам було зручно підтримувати і тестувати написаний код, розкладаємо все на модулі за допомогою бібліотеки RequireJS.

Build

Отже, все готово, залишається тільки оптимізувати написані модулі, щоб весь код був мініфікований і можна було його використовувати в production версії. Детальніше можна почитати про це тут.

Також для прикладу я накидав певну структуру і налаштував збірку. Щоб подивитись як це виглядає потрібно переключитись на гілку build. Але для кращого засвоєння і щоб розібратись як працює цей механізм, дуже добре буде почати все з нуля, а сюди інколи підглядати якщо будуть виникати якісь нерозуміння.

$ git checkout build

Збереження даних

Ми створили функціонал, перевірили, зібрали, оновили сторінку і тут халепа, лічильники позбивались на нуль. Тому потрібно результати кліків десь зберігати, наприклад в localStorage.

Matherials

Про всяк випадок залишу тут всі матеріали, які були задіяні під час лекції:

• Презентація
• Приклади:
  • багаторівневий список
  • вимикач
  • фільтр
• Документація:
  • офіційний сайт JQuery
  • офіційний сайт RequireJS
  • збірка документацій | Devdocs
• Література/Курси:
  • книга «JQuery для початківців»,
  • онлайн курс RequireJS