javascript - jQuery 库中使用的设计模式

Question

jQuery 高度关注 DOM 并围绕它提供了很好的抽象。在这样做的过程中，它利用了各种众所周知的 design patterns昨天刚刚击中了我。一个明显的例子是 Decorator图案。 jQuery 对象围绕常规 DOM 对象提供了新的和附加的功能。

例如，DOM 有一个原生的 insertBefore方法，但没有相应的 insertAfter 方法。有多种实现 available来填补这一空白，而 jQuery 就是提供此功能的此类库之一:

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

装饰器模式在 jQuery 中被大量使用的例子还有很多。

您还注意到哪些其他设计模式示例(无论大小)是库本身的一部分？另外，请提供该模式的用法示例。

使它成为一个社区 wiki，因为我相信人们喜欢 jQuery 的各种东西都可以追溯到众所周知的设计模式，只是它们通常不被模式名称引用。这个问题没有唯一的答案，但对这些模式进行分类将提供对库本身的有用见解。

Answer 1

Lazy Initialization:

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

Adapter or wrapper

$('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's 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);
}