javascript jQuery 库中使用的设计模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3631039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Design Patterns used in the jQuery library
提问by Anurag
jQuery is highly focused on the DOM and provides a nice abstraction around it. In doing so, it makes use of various well known design patternswhich just hit me yesterday. One obvious example would be the Decoratorpattern. The jQuery object provides new and additional functionality around a regular DOM object.
jQuery 高度关注 DOM，并提供了一个很好的抽象。在这样做时，它利用了昨天刚刚击中我的各种众所周知的设计模式。一个明显的例子是装饰者模式。jQuery 对象围绕常规 DOM 对象提供新的和附加的功能。
For example, the DOM has a native insertBeforemethod but there is no corresponding insertAfter method. There are various implementations availableto fill this gap, and jQuery is one such library that provides this functionality:
例如，DOM 有一个原生的insertBefore方法，但没有对应的 insertAfter 方法。有多种实现可用于填补这一空白，jQuery 就是一个提供此功能的库：
$(selector).after(..)
$(selector).insertAfter(..)
There are many other examples of the Decorator pattern being heavily used in jQuery.
jQuery 中大量使用装饰器模式的例子还有很多。
What other examples, big or small, of design patterns have you noticed that are part of the library itself? Also, please provide an example of the usage of the pattern.
您还注意到哪些其他设计模式示例，无论大小，都是库本身的一部分？另外，请提供一个使用模式的例子。
Making this a community wiki as I believe that various things people love about jQuery can be traced back to well known design patterns, just that they are not commonly referred to by the pattern's name. There is no one answer to this question, but cataloging these patterns will provide a useful insight into the library itself.
把它作为一个社区维基，因为我相信人们喜欢 jQuery 的各种事情都可以追溯到众所周知的设计模式，只是它们通常不以模式名称来指代。这个问题没有一个答案，但对这些模式进行编目将提供对图书馆本身的有用洞察。
回答by BGerrissen
$(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);
}
回答by Anurag
The Compositepattern is also very commonly used in jQuery. Having worked with other libraries, I can see how this pattern is not so obvious as it looks at first sight. The pattern basically says that,
该复合模式也是jQuery中很常用。与其他库合作后，我可以看出这种模式并不像乍一看那么明显。该模式基本上是说，
a group of objects are to be treated in the same way as a single instance of an object.
一组对象的处理方式与对象的单个实例相同。
For example, when dealing with a single DOM element or a group of DOM elements, both can be treated in a uniform manner.
例如，在处理单个 DOM 元素或一组 DOM 元素时，可以统一处理两者。
$('#someDiv').addClass('green'); // a single DOM element
$('div').addClass('green'); // a collection of DOM elements
回答by Ender
How about the Singleton/Module pattern, as discussed in this article about YUI: http://yuiblog.com/blog/2007/06/12/module-pattern/
单例/模块模式如何，正如这篇关于 YUI 的文章中所讨论的：http: //yuiblog.com/blog/2007/06/12/module-pattern/
I believe jQuery uses this pattern in its core, as well as encouraging plug-in developers to use the pattern. Using this pattern is a handy and efficient way of keeping the global namespace clear of clutter, which is further useful by assisting developers in writing clean, encapsulated code.
我相信 jQuery 在其核心使用这种模式，同时也鼓励插件开发者使用这种模式。使用此模式是保持全局命名空间整洁的一种方便且有效的方法，通过帮助开发人员编写干净、封装的代码，这进一步有用。
回答by nimrod
In the eyes of functional programming, jQuery is a Monad. A Monad is a structure that passes an object to an action, returns the modified object and passes it on to the next action. Like an assembly line.
在函数式编程的眼中，jQuery 是一个 Monad。Monad 是一种将对象传递给动作、返回修改后的对象并将其传递给下一个动作的结构。就像流水线一样。
The Wikipedia articlecovers the definition very well.
在维基百科的文章涵盖了定义得非常好。
