Техно-мир

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

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

HTML-код

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

 Name:
 
 Number 
 
 Is he a friend? 
 
 
 
 

Несмотря на то, что у этой формы есть метод и действие, позже мы заблокируем стандартное действие при помощи 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 '

' 
else
 $(ul).prepend '

'

Основа нашего приложения готова, но если вы перезагрузите страницу, то увидите, что все номера пропали, поэтому нам нужно добавить содержимое номеров в 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 '

' 
 else
 $(ul).prepend '

' 
 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('

');
 } else {
 $(ul).prepend('

');
 }
 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? Вам кажется, что этот инструмент удобнее остальных? Пожалуйста, расскажите нам в комментариях!