Константин Громов

Сделайте так, чтобы в html был лишь один ul#slider с набором li, который после использования в любой момент new Slider(element, options), где element, например, document.querySelector("#slider"), а options - объект с настройками: {speed: 500, animated: true...}, преобразовался в полноценный, готовый виджет со всей структурой. Сам вызов new Slider должен возвращать объект с набором функций, которые позволяют управлять слайдером программно (slideTo, slidePrev, slideNext, currentItem и т.д.). И чтобы было побольше опций, в первую очередь круговая прокрутка. Этих задач хватит надолго, а потом уже можно и оптимизировать, ибо будет что.

https://jsfiddle.net/kkwfq2ds. По сути тоже самое, только чище. Но в этом и суть вашего кода: его невозможно читать и в нём много мелких технических недочётов.

Вы обращаетесь к this единожды за весь сценарий в момент вызова counter, который происходит в глобальной области видимости. Проще говоря контекст не теряется, а изначально неверен (this === window). К тому же, в любой случае, вам нужно вызывать counter для каждого элемента отдельно при старте setInterval, чтобы массивы со цветами соответствовали элементам. Как дальнейшее улучшение, можно вместо перевызова counter каждый раз при наведении делать это один раз при первом наведении и сохранять возвращённую функцию в $.fn.data, и в дальнейшем брать её оттуда.

jQuery сохраняет у себя все обработчики навешанные с помощью $.fn.on для подобных случаев и при клонировании переносит их на новые элементы в соответствии с оригиналами. Если хотите всё-таки делать без jQuery, то тоже потребуется писать свою обёртку не только для клонирования, но и для добавления обработчиков.

function bind(elem, event, handler) {
  var events = elem.__events__ || (elem.__events__ = {}),
      currentEvent = events[event] || (events[event] = []);

  elem.addEventListener(event, handler);
  currentEvent.push(handler);
}

function cloneWithEvents(elem) {
  var clone = elem.cloneNode(),
      originalEvents = elem.__events__;

  if (originalEvents) {
    for (var eventName in originalEvents) {
      if (originalEvents.hasOwnProperty(eventName)) {
        var currentEvent = originalEvents[eventName];

        for (var i = 0, l = currentEvent.length; i < l; i++) {
          clone.addEventListener(eventName, currentEvent[i]);
        }
      }
    }
  }

  return clone;
}

Примерно так. Чтобы сделать красивее и для потомков можете глянуть в исходники jQuery как там устроен $.fn.clone, особой сложности нет.

upd. Для корректной работы ещё потребуется функция unbind, написанная по тому же принципу, что и bind.

Событийная модель + промисы обычно предоставляют всё необходимое для структурирования асинхронного кода. У вас же проблема в применении. Такие действия как create/update, например, должны генерировать свои собственные события в колбеке, на которые уже потом будет подписан общий код (и по хорошему там должна быть функция onProcessedData, которая уже внутри себя генерирует соответствующее событие, а не вложенный эмит):

create({}, function() {
  object.emit("create");
  // В триггеры подобных событий, к тому же, лучше передавать
  // дополнительные аргументы, чтобы можно было отличить,
  // что именно создано когда это потребуется
});

update({}, function() {
  object.emit("update");
});

object.on("create update", onProcessedData);

Помимо этого не будет лишним хоть иногда использовать вертикальные отступы и почаще пробелы. И конструктор, для наглядности, стоит описывать в начале объявления класса.

Полиформизм в своём определении опирается только на сами типы данных, а не на то, что они могут и как функционируют. Ответ - нет.

Более того, ваш пример не имеет смысла. Если передаваемая функция не делает ничего кроме манипуляции с аргументами переданными вместе с ней, то она должна выполняться до основной функции и передавать в неё лишь свой результат. Иначе идёт смешение логики.

$.ajax({
  method: "GET",
  url: "/any/path",

  success: function(data, status, xhr) {
    if (!xhr.getResponseHeader("Content-Type").indexOf("image")) {
      console.log("image");
    } else {
      console.log("not image");
    }
  }
});

У вас в this ссылка совершенно не на то, и $.fn.data имеет другое назначение, нежели получение дата-атрибутов. Читайте документацию возможностей прежде чем их использовать.

Максимум можно сделать что-то подобное. Либо замените фиксированную ширину у шапки на 100%, тогда она не будет залезать под скроллбар и не понадобится городить то, что я написал ранее.

// jQuery
$(".ui-state-highlight").each(function() {
  this.outerHTML = this.innerHTML;
});

// Native
var elements = document.querySelectorAll(".ui-state-highlight");

for (var i = 0; i < elements.length; i++) {
  elements[i].outerHTML = elements[i].innerHTML;
}

jsfiddle.net/puebkL1o Стандартная методика изменять состояние модуля добавляя класс на его контейнер, в данном случае модулем является вся страница. Названия классов, само собой, ставьте какие захотите.