JQuery 库中使用的设计模式

JQuery 高度关注 DOM，并围绕它提供了很好的抽象。在这样做的时候，它利用了各种知名的 设计模式，昨天刚刚击中我。一个明显的例子是 室内设计师模式。JQuery 对象围绕常规 DOM 对象提供新的和附加的功能。

例如，DOM 有一个本机 插入前方法，但是没有相应的 insert tAfter 方法。有各种实现 有空来填补这个空白，jQuery 就是提供这种功能的库之一:

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

还有很多其他的修饰模式在 jQuery 中被广泛使用的例子。

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

让这成为一个社区 wiki，因为我相信人们喜欢 jQuery 的各种东西可以追溯到众所周知的设计模式，只是它们不常被称为模式的名字。这个问题没有统一的答案，但是对这些模式进行编目将提供对库本身的有用洞察。

20739 次浏览
小开

如本文关于 YUI: http://yuiblog.com/blog/2007/06/12/module-pattern/所讨论的 Singleton/Module 模式怎么样

我相信 jQuery 在其核心中使用了这种模式，并鼓励插件开发人员使用这种模式。使用这种模式是保持全局名称空间清洁的一种方便而有效的方法，通过帮助开发人员编写干净、封装的代码，这种方法更加有用。

小开

合成模式在 jQuery 中也非常常用。通过与其他库一起工作，我可以看出这种模式并不像乍看上去那么明显。这个模式基本上是说,

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

例如，在处理单个 DOM 元素或一组 DOM 元素时，可以以统一的方式对待这两种元素。

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


$('div').addClass('green');      // a collection of DOM elements
小开
最佳答案

惰性初始模式

$(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);
}
小开

在函数式编程的眼中，jQuery 是一个 Monad。Monad 是一种结构，它将一个对象传递给一个操作，返回修改后的对象并将其传递给下一个操作。就像流水线一样。

维基百科文章很好地涵盖了定义。


提交答案