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

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

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

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

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

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

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

4 77
javascript jquery design-patterns

4 ответа:

Отложенная Инициализация:

$(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(function(){}, obj); // =oP

Строитель

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

прототип

// 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);
}
90

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

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

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

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

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

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

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

5

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

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

2