jquery库中使用的设计模式

Anurag • 5 年前 • 886 次点击

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

例如,DOM有一个本机 insertBefore 方法,但没有相应的InsertAfter方法。有各种实现 available 为了填补这个空白,jquery就是这样一个库,它提供了以下功能:

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

在jquery中,还有许多其他的装饰模式被大量使用的例子。

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

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

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/31645

886 次点击

文章 [ 4 ] | 最新文章 5 年前

• 1 楼

nimrod 10 年前

在函数编程中,jquery是一个monad。monad是一种结构,它将一个对象传递给一个动作,返回修改后的对象并将其传递给下一个动作。就像流水线一样。

这个 Wikipedia article 很好地涵盖了定义。

• 2 楼

Ender 13 年前

如本文中关于yui的讨论所述,单例/模块模式如何: http://yuiblog.com/blog/2007/06/12/module-pattern/

我相信jquery在其核心中使用了这个模式,并且鼓励插件开发人员使用这个模式。使用此模式是保持全局命名空间不混乱的一种方便而有效的方法,通过帮助开发人员编写干净的、封装的代码,这将进一步有用。

• 3 楼

Anurag 13 年前

这个 Composite 模式在jquery中也非常常用。在与其他库一起工作之后,我可以看到这种模式如何不像第一眼看到的那样明显。模式基本上说,

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

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

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

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

• 4 楼

BGerrissen 12 年前

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

登录后回复