jQuery 库中使用的设计模式

Posted 2023-03-31

【中文标题】jQuery 库中使用的设计模式

【英文标题】：Design Patterns used in the jQuery library

【发布时间】：2011-04-07 13:25:07

【问题描述】：

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

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

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

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

您还注意到图书馆本身包含哪些其他设计模式示例，无论大小？另外，请提供该模式的使用示例。

将其设为社区 wiki，因为我相信人们对 jQuery 的喜爱可以追溯到众所周知的设计模式，只是它们通常不被模式名称所指。这个问题没有一个答案，但对这些模式进行分类将有助于深入了解图书馆本身。

【参考方案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);

【讨论】：

那里做得很好 :) .. 我认为 $.ajax 的 Facade 模式类似于 Template method 模式，因为我们具有基本功能，并且每个附加方法（例如 $.get）都会覆盖基本并生成它更具体。

是的，很多 jQuery 方法，实际上 javascript 通常可以同时遵守无数的设计模式。它是一般 JavaScript 表达能力以及函数式编程如何补充面向对象编程的一个典型例子。 =)

【参考方案2】：

Composite 模式在 jQuery 中也很常用。与其他库一起工作后，我可以看到这种模式并不像第一眼看上去那么明显。该模式基本上是这样说的，

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

例如，在处理单个 DOM 元素或一组 DOM 元素时，可以统一处理。

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

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

【参考方案3】：

Singleton/Module 模式怎么样，正如这篇关于 YUI 的文章中所讨论的那样：http://yuiblog.com/blog/2007/06/12/module-pattern/

我相信 jQuery 在其核心中使用了这种模式，并鼓励插件开发人员使用这种模式。使用这种模式是保持全局命名空间整洁的一种方便且有效的方式，它有助于开发人员编写干净的封装代码。

【讨论】：

jQuery 确实在其核心的各个地方都使用了模块模式，并且还向插件开发人员推荐了它，而不是琐碎的插件。很棒的发现:)

【参考方案4】：

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

Wikipedia article 很好地涵盖了定义。

【讨论】：

我觉得这里的monad是指库的链接能力！

这正是我在这里所描述的。