Шаблоны проектирования, используемые в библиотеке jQuery

jQuery очень сфокусирован на DOM и обеспечивает хорошую абстракцию вокруг него. При этом он использует различные хорошо известные шаблоны проектирования, которые только что ударили меня вчера. Одним из очевидных примеров может служить шаблон Decorator. Объект jQuery предоставляет новые и дополнительные функции вокруг обычного объекта DOM.

Например, DOM имеет собственный метод insertBefore, но нет соответствующего метода insertAfter. Существуют различные варианты , чтобы заполнить этот пробел, а jQuery - одна из таких библиотек, которая предоставляет эту функциональность:

$(selector).after(..)
$(selector).insertAfter(..)

Есть много других примеров шаблона Decorator, которые сильно используются в jQuery.

Какие другие примеры, большие или малые, шаблоны дизайна вы заметили, которые являются частью самой библиотеки? Кроме того, пожалуйста, укажите пример использования шаблона.

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

Ответ 1

Lazy Initialization:

$(document).ready(function(){
    $('div.app').myPlugin();
});

Адаптер или обертка

$('div').css({
    opacity: .1 // opacity in modern browsers, filter in IE.
});

Facade

// higher level interfaces (facades) for $.ajax();
$.getJSON();
$.get();
$.getScript();
$.post();

Observer

// jQuery utilizes it own event system implementation on top of DOM events.
$('div').click(function(){})
$('div').trigger('click', function(){})

Iterator

$.each(function(){});
$('div').each(function(){});

Strategy

$('div').toggle(function(){}, function(){});

Proxy

$.proxy(function(){}, obj); // =oP

Builder

$('<div class="hello">world</div>');

Prototype

// this feels like cheating...
$.fn.plugin = function(){}
$('div').plugin();

Flyweight

// CONFIG is shared
$.fn.plugin = function(CONFIG){
     CONFIG = $.extend({
         content: 'Hello world!'
     }, CONFIG);
     this.html(CONFIG.content);
}

Ответ 2

Шаблон Composite также очень часто используется в jQuery. Поработав с другими библиотеками, я вижу, как эта картина не так очевидна, как кажется на первый взгляд. Шаблон в основном говорит, что

группа объектов должна обрабатываться так же, как один экземпляр объекта.

Например, при работе с одним элементом DOM или группой элементов DOM оба могут обрабатываться единообразно.

$('#someDiv').addClass('green'); // a single DOM element

$('div').addClass('green');      // a collection of DOM elements

Ответ 3

Как насчет шаблона Singleton/Module, как обсуждалось в этой статье о YUI: http://yuiblog.com/blog/2007/06/12/module-pattern/

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

Ответ 4

В глазах функционального программирования jQuery является монадой. Монада - это структура, которая передает объект в действие, возвращает измененный объект и передает его следующему действию. Как конвейер.

Статья в Википедии очень хорошо описывает это определение.