Книга «Front-end. Клиентская разработка для профессионалов. Node.js, ES6, REST»

    image В книге рассмотрены все важнейшие навыки работы с JavaScript, HTML5 и CSS3, требующиеся разработчику, чтобы преуспеть в создании современного клиентского кода. Изучая эту книгу, вы напишете четыре веб-приложения. Каждому приложению посвящена отдельная часть книги, а каждая глава добавляет в создаваемое приложение новые функциональные возможности. Создание этих четырех веб-приложений даст вам возможность изучить все технологии, требуемые для создания клиентской части.

    Ottergram. Наш первый проект посвящен веб-фотогалерее. Создание Ottergram научит вас основам программирования для браузеров с помощью языка разметки HTML, таблиц стилей CSS и языка программирования JavaScript. Вы вручную создадите пользовательский интерфейс и узнаете, как браузер загружает и визуализирует контент.

    CoffeeRun. Частично форма заказа кофе, частично — список заказов. CoffeeRun познакомит вас с множеством методов языка программирования JavaScript, включая написание модульного кода, использование преимуществ замыканий и взаимодействие с удаленным сервером с помощью технологии Ajax.

    Далее под катом...

    Chattrbox. Часть, описывающая приложение Chattrbox, — самая короткая, и это приложение больше всего отличается от остальных. В нем будет использоваться язык программирования JavaScript для создания системы общения в Интернете, включая написание сервера чата с помощью платформы Node.js, а также браузерного клиента для чата.

    Tracker. Последний проект использует Ember.js — один из самых функциональных фреймворков для разработки клиентской части. Мы напишем приложение для каталогизации случаев наблюдения редких, экзотических и мифических существ. По ходу дела вы узнаете, как использовать возможности богатейшей экосистемы, лежащей в основе фреймворка Ember.js.

    По мере создания этих приложений вы познакомитесь с множеством инструментов, включая:

    — Текстовый редактор Atom и некоторые полезные плагины для работы с кодом;
    — Источники документации, например Mozilla Developer Network;
    — Командную строку с использованием приложения терминала OS X или командной строки Windows;
    — Утилиту browser-sync;
    — Инструменты разработчика браузера Google Chrome (Google Chrome’s Developer Tools);
    — Файл normalize.css;
    — Фреймворк Bootstrap;
    — Библиотеки jQuery, crypto-js и moment;
    — Платформу Node.js, систему управления пакетами Node (npm) и модуль nodemon;
    — Протокол WebSockets и модуль wscat;
    — Компилятор Babel и модули Babelify, Browserify и Watchify;
    — Фреймворк Ember.js и такие дополнения к нему, как интерфейс командной строки Ember CLI, плагин для Chrome Ember Inspector, дополнение Ember CLI Mirage и шаблонизатор Handlebars;
    — Систему управления пакетами Bower;
    — Систему управления пакетами Homebrew;
    — Утилиту Watchman.

    Отрывок. Организация цикла по массиву миниатюр


    Связывание миниатюр с кодом обработки событий будет быстрым и несложным делом. Мы напишем функцию, которая станет отправной точкой всей логики Ottergram. В других языках программирования, в отличие от JavaScript, есть встроенный механизм запуска приложения. Но не волнуйтесь — его достаточно легко можно реализовать вручную.

    Начнем с добавления функции initializeEvents в конец файла main.js. Этот метод свяжет воедино все шаги по превращению Ottergram в интерактивное приложение. Во-первых, он получит массив миниатюр. Далее он пройдет в цикле по массиву, добавляя обработчик нажатий для каждой из них. После написания этой функции мы добавим вызов функции initializeEvents в самый конец файла main.js для ее запуска.

    В теле нашей новой функции добавьте вызов функции getThumbnailsArray и присвойте результат (массив миниатюр) переменной thumbnails:

    ...
    function getThumbnailsArray() {
       ...
    }
    function initializeEvents() {
       'use strict';
       var thumbnails = getThumbnailsArray();
    }

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

    Добавьте вызов метода thumbnails.forEach в файл main.js и передайте его функции addThumbClickHandler в качестве обратного вызова.

    ...
    function initializeEvents() {
       'use strict';
       var thumbnails = getThumbnailsArray();
       thumbnails.forEach(addThumbClickHandler);
    }

    Обратите внимание, что вы передаете в качестве обратного вызова поименованную функцию. Как вы прочтете далее, это не всегда хорошее решение. Однако в данном случае оно сработает как надо, поскольку функции addThumbClickHandler требуется только та информация, которая будет ей передаваться, когда ее будет вызывать метод forEach, — элемент массива thumbnails.

    Наконец, чтобы увидеть все это в действии, добавьте вызов функции initializeEvents в самый конец файла main.js:

    ...
    function initializeEvents() {
       'use strict';
       var thumbnails = getThumbnailsArray();
       thumbnails.forEach(addThumbClickHandler);
    }
    
    initializeEvents();

    Помните, браузер выполняет код по мере чтения каждой строки вашего JavaScript. На протяжении большей части файла main.js он просто выполняет объявления переменных и функций. Но когда он дойдет до строки initializeEvents();, он выполнит эту функцию. Сохраните и вернитесь в браузер. Нажмите на несколько различных миниатюр и полюбуйтесь на плоды своих трудов (рис. 6.28).

    image

    Откиньтесь на спинку кресла, расслабьтесь и наслаждайтесь щелчками на фото выдр! Вы немало потрудились и усвоили много нового во время создания интерактивного слоя нашего сайта. В следующей главе мы завершим создание Ottergram, добавив для пущей красоты визуальные эффекты.

    Серебряное упражнение: взлом ссылок


    DevTools браузера Chrome предоставляют немало возможностей для развлечений с посещаемыми страницами. Следующее упражнение будет заключаться в том, чтобы поменять все ссылки на странице результатов поиска так, чтобы они вели в никуда.

    Зайдите в вашу любимую поисковую систему и выполните поиск по ключевому слову выдры. Откройте консоль DevTools. Используя написанные для Ottergram функции в качестве образца, подключите прослушиватели событий ко всем ссылкам и отключите имеющуюся по умолчанию функциональность перехода по щелчку кнопкой мыши.

    Золотое упражнение: случайные выдры


    Напишите функцию для изменения атрибута data-image-url случайно выбранной миниатюры выдры так, чтобы увеличенное изображение более не соответствовало миниатюре. Используйте URL изображения по вашему выбору (хотя можно отыскать неплохое путем поиска в Интернете по слову tacocat). В качестве дополнительного упражнения напишите функцию, возвращающую миниатюрам выдр исходные значения атрибута data-image-url и меняющую одну из них, выбранную случайным образом.

    Для самых любознательных: строгий режим


    Что такое строгий режим и для чего он существует? Он был создан в качестве более «чистого» режима JavaScript, позволяет перехватывать определенные виды ошибок программирования (например, опечатки в именах переменных), удерживая разработчиков от использования некоторых подверженных ошибкам частей языка и отключая возможности языка, которые попросту явно неудачны.

    У строгого режима есть немало преимуществ:

    • Заставляет использовать ключевое слово var
    • Не требует использования операторов with
    • Ограничивает способы использования функции eval
    • Рассматривает дублирующиеся имена параметров функций как синтаксическую ошибку

    Все это можно получить всего лишь за счет размещения директивы 'use strict' наверху функции. В качестве бонуса директива 'use strict' игнорируется не поддерживающими ее старыми версиями браузеров (эти браузеры просто рассматривают эту директиву как строку).
    Прочесть больше о строгом режиме можно на MDN по адресу.

    » Более подробно с книгой можно ознакомиться на сайте издательства
    » Оглавление
    » Отрывок

    Для Хаброжителей скидка 20% по купону — Front-end
    • +16
    • 13,1k
    • 8
    Поделиться публикацией
    Похожие публикации
    Комментарии 8
    • 0
      Лично я бы не стал читать книгу, чей автор называет методы во множественном числе initializeEvents…
      Остается гадать, чего он ещё не знает?
      • +6
        А что не так с названием функции? Я лично ничего не слышал о соглашении не называть методы во множественном числе.
        • +2
          Не то скопировал, я вот о чем — getThumbnailsArray
          Зачем писать во множественном числе, если название заканчивается на Array?
          Да и так повелось, что указываются тип возвращаемого значения. getElementAll возвращает массив.
          По этой логике функция initializeEvents должна возвращать объект-хеш.
          • 0

            Как по мне это немного странная логика. Я понимаю почему get возвращает данные, но как связан initialize с возвращаемым объектом — для меня загадка

      • 0
        Питер как всегда радует нормальной профильной лит-рой! Спасибо вам!
        • 0

          Почему что ни обложка, то страх и ужас?

          • 0
            Что мешает издательству использовать в электронных версиях книг цветные иллюстрации и цветную подсветку синтаксиса? Не верится что при верстке сразу используют ч/б изображения.

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое