—»     —»   Изучаем CoffeeScript – Часть 2
  Раздел: Java-Скрипты   Нет комментариев  

Изучаем CoffeeScript – Часть 2

В первой части статьи по изучению CoffeeScript мы рассмотрели основные способности этого инструмента, но давайте будем честными, большую часть времени мы используем библиотеку jQuery, которая помогает нам писать наш javascript. В первой части мы рассказали вам лишь базовый вариант javascript.

Изучаем CoffeeScript – Часть 2

В этой же части мы познакомимся с CoffeeScript, LocalStorage и jQuery для создания простого менеджера контактов, при помощи которого мы сможем сохранять номера телефонов, имена, а также отмечать, является ли человек вашим другом. А при помощи LocalStorage мы сделаем так, что менеджер контактов сохранит ваши контакты даже после обновления страницы.

В демо вы можете посмотреть, что мы будем разрабатывать в сегодняшней статье.

HTML-код

Как видно по демо, наш HTML будет состоять из формы и простого пустого ul, который мы позже заполним именами и номерами:

<form action="#" method="POST">
<label for="name">Name:</label>
<input type="text" name="name" id="name" required autofocus />
<label for="number">Number</label>
<input tpe="tel" name="number" id="number" required />
<label for="friend">Is he a friend?</label>
<input type="checkbox" name="friend" id="friend">
<input type="submit" id="submit" value="Add" />
</form>
<ul id="numbers"></ul>

Несмотря на то, что у этой формы есть метод и действие, позже мы заблокируем стандартное действие при помощи javascript, чтобы предотвратить перезагрузку страницы при подтверждении введенных данных. Вместо этого, мы заполним ненумерованный список numbers тем, что будет введено в форму.

CoffeeScript

Теперь давайте перейдем к лучшей части статьи: поговорим о совместной работе CoffeeScript и jQuery – двух инструментах, которые значительно облегчили для нас процесс разработки javascript.

Но перед разработкой, давайте подумаем над тем, что должно делать это приложение, и разложим все по пунктам:

* Добавлять класс checked, если чекбокс отмечен, и удалять этот класс, если отметка не была выставлена;
* Следить за click-событием по кнопке подтверждения;
* Получать значения номера и имени;
* Помещать эти значения на страницу;
* Добавлять все имена и номера в LocalStorage;
* Удалять все, что было введено в форму;
* Предотвращать подтверждение формы;
* Считывать и отображать все данные, содержащиеся в LocalStorage.

Теперь мы всё выяснили, и можем начинать с самого начала. Чтобы добавлить класс checked, нам нужно проверить, был ли произведен клик, а затем переключить класс между всеми отдельными классами. Мы уже видели, как создавать функции в первой части, посвященной работе с CoffeeScript:

$('#friend').click -> $(this).toggleClass 'checked'

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

$('#submit').click ->
ul = $('#numbers')
number = $('#number').val()
name = $('#name').val()

На данном этапе мы определили нашу функцию и переменные, которые понадобятся нам позже, переменная ul удерживает ненумерованный список, который содержит все имена и номера, а следующие две переменные будут хранить информацию о типах ввода.

В этой части мы берем все имеющиеся у нас значения, и подготавливаем пункт списка для каждого номера, которые у нас есть. Не забывайте, что нам нужно немного иначе все оформить, если контакт является вашим другом, поэтому мы будем проверять класс чекбокса, и в случае необходимости будем использовать другой класс. Для этого мы воспользуемся простым объявлением if, как было описано в первой части:

if $('#friend').hasClass 'checked'
$(ul).prepend '<li class="friend"><span>Name: ' + name + '<br/> Number: ' + number + '</span></li>'
else
$(ul).prepend '<li><span>Name: ' + name + ' <br/>Number: ' + number + '</span></li>'

Основа нашего приложения готова, но если вы перезагрузите страницу, то увидите, что все номера пропали, поэтому нам нужно добавить содержимое номеров в LocalStorage, и давайте назовем их contacts:

localStorage.setItem 'contacts', $(ul).html()

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

После этой строки кода, все наши номера и имена будут помещены в LocalStorage, и теперь нам нужно внести финальный штрих в функцию, сбросив форму и вернув false, чтобы убедиться, что страница не перезагружается:

$("form")[0].reset()
return false

Теперь функция завершена, и все что нам осталось сделать, это проверить, есть ли у нас какие-нибудь данные в LocalStorage с именами контактов. Если такие данные имеются, нам нужно поместить их на страницу:

if localStorage.getItem 'contacts'
$('#numbers').html localStorage.getItem 'contacts'

Здесь мы проверяем и помещаем содержимое этого пункта на страницу. На этом штрихе мы завершаем разработку нашего небольшого менеджера контактов, и хотим представить вам весь использованный код CoffeeScript:

$('#friend').click -> $(this).toggleClass 'checked'

$('#submit').click ->
ul = $('#numbers')
number = $('#number').val()
name = $('#name').val()
if $('#friend').hasClass 'checked'
$(ul).prepend '<li class="friend"><span>Name: ' + name + '<br/> Number: ' + number + '</span></li>'
else
$(ul).prepend '<li><span>Name: ' + name + ' <br/>Number: ' + number + '</span></li>'
localStorage.setItem 'contacts', $(ul).html()
$("form")[0].reset();
return false

if localStorage.getItem 'contacts'
$('#numbers').html localStorage.getItem 'contacts'

Если мы пропустим этот код через компилятор, то получим следующий код javascript:

$('#friend').click(function() {
return $(this).toggleClass('checked');
});

$('#submit').click(function() {
var name, number, ul;
ul = $('#numbers');
number = $('#number').val();
name = $('#name').val();
if ($('#friend').hasClass('checked')) {
$(ul).prepend('<li class="friend"><span>Name: ' + name + '<br/> Number: ' + number + '</span></li>');
} else {
$(ul).prepend('<li><span>Name: ' + name + ' <br/>Number: ' + number + '</span></li>');
}
localStorage.setItem('contacts', $(ul).html());
$("form")[0].reset();
return false;
});

if (localStorage.getItem('contacts')) {
$('#numbers').html(localStorage.getItem('contacts'));
}

Сравнивая два этих результата, мы можем сказать, что в формате CoffeeScript у нас 587 слов и 14 строк, а в javascript-формате у нас получилось 662 слова и 21 строка кода. К тому же, если сравнивать эти два варианта по читабельности, то вариант с CoffeeScript явно больше приятен глазу. Если даже в таком простеньком примере CoffeeScript способ сэкономить 7 строк кода, то представьте, какая экономия будет в масштабных проектах!

В завершение

Надеемся, что данная статья позволила вам лучше познакомиться с CoffeeScript, и понять, насколько этот инструмент способен улучшить процесс разработки кода javascript. Написанный в данной статье код получился более опрятным и простым, нежели код, потребовавшийся бы нам при разработке на javascript. Также надеемся, что вы теперь лучше осознаете всю мощь этого простенького языка вкупе с jQuery, и теперь будете использовать эту связку гораздо чаще в повседневных задачах и проектах.

Используете ли вы CoffeeScript? Вам кажется, что этот инструмент удобнее остальных? Пожалуйста, расскажите нам в комментариях!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, CoffeeScript
Опубликовал Design FactoRy   Прочитано (раз): 4886   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031