jQuery库中使用的设计模式

Question

jQuery高度关注DOM,并提供了一个很好的抽象.在这样做的过程中,它利用了昨天刚刚打动我的各种众所周知的设计模式.一个明显的例子是Decorator模式.jQuery对象围绕常规DOM对象提供新的和附加的功能.

例如,DOM具有本机insertBefore方法,但没有相应的insertAfter方法.有各种各样的实现可以填补这个空白,jQuery就是这样一个提供这个功能的库:

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

在jQuery中大量使用了Decorator模式的许多其他示例.

还有哪些其他大小设计模式的例子都是图书馆本身的一部分？另外,请提供模式用法的示例.

将此作为社区维基,因为我相信人们喜欢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(function(){}, obj); // =oP

生成器

$('<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

该复合模式也是jQuery中很常用.与其他图书馆合作后,我可以看到这种模式并不像第一眼看到的那么明显.模式基本上说,

一组对象的处理方式与对象的单个实例相同.

例如,当处理单个DOM元素或一组DOM元素时,两者都可以以统一的方式处理.

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

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

Answer 3

单元/模块模式怎么样,如本文中关于YUI的讨论:http://yuiblog.com/blog/2007/06/12/module-pattern/

我相信jQuery在其核心中使用这种模式,以及鼓励插件开发人员使用该模式.使用这种模式是一种方便有效的方法,可以保持全局命名空间不被混乱,这有助于开发人员编写干净的封装代码.