jQuery прояснение моментов

Axaj

$.ajax('/url/to/server/script', {
  ...
  dataType: 'json', // сразу попытаться распарсить ответ как json(по умолчанию jQuery делает анализ)
  contentType: 'application/json', //jQuery устанавливает соответствующий хттп заголовок, на основании которого сервер может принимать решение в каком формате отвечать
  context: someWidgetEl, //в колбеках this будет ссылаться на указанный обьект 
  data: $('form').serialize(), //так мы собираем значение полей с формы в джейсон
  
});

Utilities

each vs map

$.each runs the function for each item in the array, but returns the original array unchanged.
$.map runs the function for each item in the array and creates a new array from the returned results.

> var cities = ['Paris', 'London', 'Orlando'];
> $.each(cities, function(index, city) {
   var result = city + " " + index;
   console.log(result);
});
  Paris 0
  London 1
  Orlando 2
< ["Paris", "London", "Orlando"]
> $.map(cities, function(city, index) {
    var result = city + " " + index;
    console.log(result);
    return result;
});
  Paris 0
  London 1
  Orlando 2
< ["Paris 0", "London 1", "Orlando 2"]

.detach()

.detach() removes an element from the DOM, preserving all data and events. This is useful to minimize DOM insertions with multiple html elements. То есть если нужно изменить где-то сектор дом-дерева, то лучше его сначала отсоединить от общего дерева, а после завершения присоединить обратно, так измения будут применены быстрее, потому что не нужно после каждого изменения проганять браузеру все дом-дерево, чтобы понять как поточное изменение повлияло на каждый елемент всего

Advanced Events

Namespacing Events

Этот функционал помогает нам не запоминать ссылки на хендлеры, которые мы привязали к сегменту дом, чтобы потом как-то управлять этими обработчиками. Мы привязываем к названиям событий постфиксы и можем потом удалить конкретный обработчик, а не все, например, клики.

Также это помогает привязать множество разных событий одного виджета, а потом одним вызовом отвязать все его обработчики по завершению времени жизни виджета.

el.on('click.mywidget', someHandler);
el.on('click.theirwidget', someOtherHandler);
...
el.on('mouseleave.mywidget', hdlr);
...

el.off('click.theirwidget');//отключить только конкретный обработчик по событию клик
el.off('.mywidget');//отключить все обработки со всех событий указанной области имен

Кастомные события

el.on('show.price', someHandler);
...
el.trigger('show.price');
...

Plugins

Структура:

$.fn.priceify = function(options){//настройки плагина для конкретного применения
  this.each(function(){//если у нас в селектор попало множесто дом-елементов -- обработать нужно каждый
    var settings = $.extends({ //получаем настройки конкретной инстанции путем мердже дефотных и перегруженых
      set1: 'default1',
      set2: 'default2',
      ...
    }, options);
    //logic with events and so on
  });
};