jQuery庫中使用的設計模式

jQuery高度專注於DOM並提供了一個很好的抽象概念。在這樣做的時候，它使用了各種衆所周知的，它們昨天剛剛打我。一個明顯的例子是Decorator模式。 jQuery對象在常規DOM對象周圍提供了新的和附加的功能。jQuery庫中使用的設計模式

例如，DOM有一個本地insertBefore方法，但沒有相應的insertAfter方法。有各種實現available填補這一空白，和jQuery是一個這樣的庫，提供了此功能：

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

有jQuery中被大量使用的裝飾圖案的許多其他例子。

設計模式的其他大或小例子，您是否注意到它們是庫本身的一部分？另外，請提供該模式的使用示例。

使之成爲一個社區維基，因爲我相信人們對jQuery的各種喜愛可以追溯到衆所周知的設計模式，只是它們通常不被模式名稱所引用。這個問題沒有一個答案，但編目這些模式將爲圖書館本身提供有用的信息。

來源

2010-09-02 Anurag

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

來源

2010-09-02 21:16:19 BGerrissen

不錯的工作:) ..我認爲'$ .ajax'的Facade模式類似於[Template method]（http://en.wikipedia.org/wiki/Template_method_pattern）模式，因爲我們有基本功能，並且每個額外的方法（如'$ .get'）都會覆蓋基數並使其更具體。 – Anurag 2010-09-02 21:40:46

也許有很多jQuery方法，實際上JavaScript一般可以同時遵循大量的設計模式。這是一般JavaScript的表現力的典型例子，以及函數式編程如何補充面向對象的編程。 =） – BGerrissen 2010-09-02 22:17:13

又如何辛格爾頓/模塊模式，如本文關於YUI中討論：http://yuiblog.com/blog/2007/06/12/module-pattern/

我相信jQuery使用在其核心這一模式，並鼓勵插件開發者使用的模式。使用這種模式是一種方便而有效的方法，可以讓全局名稱空間避免混亂，通過幫助開發人員編寫乾淨的封裝代碼，這種方法更加有用。

來源

2010-09-02 20:47:16 Ender

jQuery確實在其核心中的各個位置使用了模塊模式，並且還建議插件開發人員使用它來處理不重要的插件。偉大的發現:) – Anurag 2010-09-02 20:56:20

Composite模式在jQuery中也很常用。在與其他圖書館合作之後，我可以看到這種模式並不像一見鍾情那麼明顯。該模式基本上說，

一組對象將被視爲一個對象的單個實例相同的方式。

例如，在處理單個DOM元素或一組DOM元素時，可以統一處理兩者。

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

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

來源

2010-09-02 21:16:16 Anurag

在函數編程的眼中，jQuery是一個單子。 Monad是一個將對象傳遞給動作的結構，返回已修改的對象並將其傳遞給下一個動作。像裝配線一樣。

Wikipedia article涵蓋的定義非常好。

來源

2013-10-11 12:59:23 nimrod

我想monad在這裏意味着圖書館的鏈接能力！ – Jebin 2014-10-28 18:14:34

這正是我在這裏描述的。 – nimrod 2014-10-29 03:20:27

jQuery庫中使用的設計模式

回答

相關問題