CoffeeScript + jQuery = more fun than ever

Внимание! Оригинал статьи был опубликован в 2011 году!

Когда пару лет назад я только начал работать с jQuery, мне показалось, что я попал в рай для программистов. jQuery намного сокращает объем кода и позволяет с легкостью работать с DOM. Хотя все время появляются новые фреймворки, все лучше подходящие для разработки богатой функциональности на фронтэнде, я больше не могу представить свою жизнь без jQuery. Чувствуете что-то похожее? Круто! 🙂

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

Я написал этот пост, чтобы шире разнести весть о CoffeeScript и показать, насколько хорошо он сочетается с jQuery.

Итерируйте по-взрослому

CoffeeScript предоставляет множество замечательных способов перебора массивов, которые работают с объектами jQuery. Например, одна красивая строка CoffeeScript…

formValues = (elem.value for elem in $('.input'))

…компилируется в такой код Javascript:

var elem, formValues;
formValues = (function() {
  var _i, _len, _ref, _results;
  _ref = $('.input');
  _results = [];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    elem = _ref[_i];
    _results.push(elem.value);
  }
  return _results;
})();

Честно говоря, то, что это работает, поначалу пугает. Но как только вы начнете использовать CoffeeScript и окунетесь в его магическую реальность, вы его полюбите.

Связывайте методы «на лету»

Использование «жирной» стрелки => в коллбэке jQuery экономит время и усилия, избавляя от привязки метода к объекту вручную. Взгляните на этот код CoffeeScript:

object =
  func: -> $('#div').click => @element.css color: 'red'

А теперь на скомпилированный Javascript:

var object;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
object = {
  func: function() {
    return $('#div').click(__bind(function() {
      return this.element.css({
        color: 'red'
      });
    }, this));
  }
};

В данном случае @element ссылается на элемент jQuery, который был назначен объекту в каком-то другом месте кода — например, путем такого присваивания: object.element = $('#some_div').

Каждая функция, определенная с помощью жирной стрелки =>, автоматически связывается с объектом, доступ к которому осуществляется через указатель this. Да, я знаю, что это великолепно.

Вызывайте функции так, как будто на дворе 2011 год

Взгляните на это:

$.post(
  "/posts/update_title"
  new_title: input.val()
  id: something
  -> alert('done')
  'json'
)

С CoffeeScript вы можете легко распределить аргументы методов с длинными сигнатурами наподобие $.post() и $.animate() по нескольким строкам. Запятые и фигурные скобки необязательны. Это упрощает чтение многих вызовов методов jQuery.

Вот другой пример:

$('#thing').animate
  width: '+20px'
  opacity: '0.5'
  2000
  'easeOutQuad'

Красота! Обратите внимание, что если первый аргумент — анонимный объект, вы даже можете опустить скобки вызова метода.

Симпатичные инициализаторы

Когда я начал использовать jQuery, я инициализировал приложения так:

$(document).ready(function() {
  some();
  init();
  calls();
})

Благодаря новой версии jQuery и CoffeeScript этот код делается гораздо лаконичнее:

$ ->
  do some
  do init
  do calls

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

Подробнее узнать о CoffeeScript можно на официальном сайте.

Штефан Барместер (Stefan Buhrmester)

Источник: buhrmi.tumblr.com

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: