jquery库中使用的设计模式

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

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

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

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

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

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

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

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

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

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