18.06.13, 08:12
0 комментарий
  Уроки

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

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

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

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204