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

Question

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

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

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

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

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

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

Answer 1

Ленивая инициализация:

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

Адаптер или упаковщик

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

Фасад

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

Наблюдатель

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

Итератор

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

Стратегия

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

Proxy

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

Builder

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

Прототип

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

Грузоподъемность

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

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

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

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