Чейнинг

или Как сделать код проще, добавив одну строчку

фото: ep_jhu

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

// …
initialize: function(options) {
  return this
    .parseOpts(options)
    .setElement($('.js-labels'))
    .tagsCollectionCreate()
    .tagsCollectionSavable()
    .renderSearch()
    .renderTags()
  ;
},
// …

Многие библиотеки поддерживают чейнинг «из коробки»: jQuery, Backbone, Underscore.

// jQuery
$('.circle')
  .animate({left: '+500px', top: '+250px'}, {duration: 800})
  .animate({
    width: '200px',
    height: '200px',
    borderRadius: "100px"
  }, {duration: 1500})
  .animate({textIndent: 100}, {
    step: function(now,fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)');
    }
  }, {
    duration: 1000,
    easing: 'linear'
  })
;

// Backbone
this.tags
  .setElement($('.js-labels'))
  .on('remove', this.save, this)
  .on('reset', this.save, this)
  .on('add', this.save, this)
;

Как работает чейнинг

Чейнить космически просто: нужно лишь возвращать this в каждом методе цепочки:

{
  // ...
  parseOptions: function(options) {
    if ('string' === typeof options) {
      this.options = {};
      this.options.tags = options;
    } else {
      this.options = options;
    }
    return this;
  },
  // ...
}

Или вот пример с плагином для jQuery:

$.fn.sticky = function () {
  this
    .each(function (el) {
      // make element sticky
    });
  return this;
};

$('.js-header')
  .sticky()
  .fadeIn()
;

Вот такой нехитрый способ одной строчкой сделать код проще.

Подписывайтесь на РСС. Всем добра и штурмовиков.

24.10.2014

Чейнинг

Как работает чейнинг

Похожие статьи: