Các mẫu thiết kế được sử dụng trong thư viện jQuery

Question

jQuery tập trung cao vào DOM và cung cấp một trừu tượng tốt đẹp xung quanh nó. Trong khi làm như vậy, nó làm cho việc sử dụng khác nhau nổi tiếng mà chỉ cần đánh tôi ngày hôm qua. Một ví dụ rõ ràng sẽ là mẫu Decorator. Đối tượng jQuery cung cấp chức năng mới và bổ sung xung quanh một đối tượng DOM thông thường. Ví dụ: DOM có phương thức gốc insertBefore nhưng không có phương thức insertAfter tương ứng. Có nhiều triển khai available để lấp đầy khoảng trống này, và jQuery là một thư viện như vậy mà cung cấp chức năng này:

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

Có rất nhiều ví dụ khác về mô hình trang trí được sử dụng nhiều trong jQuery.

Ví dụ nào khác, lớn hay nhỏ, về các mẫu thiết kế mà bạn nhận thấy là một phần của chính thư viện? Ngoài ra, vui lòng cung cấp ví dụ về cách sử dụng mẫu.

Làm cho trang wiki này trở thành một cộng đồng wiki vì tôi tin rằng nhiều thứ mà mọi người yêu thích về jQuery có thể được tìm lại theo các mẫu thiết kế nổi tiếng, chỉ là chúng không được gọi bằng tên mẫu. Không có câu trả lời cho câu hỏi này, nhưng việc lập danh mục các mẫu này sẽ cung cấp một cái nhìn sâu sắc hữu ích vào chính thư viện đó.

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

Answer 2

Làm thế nào về mô hình Singleton/Module, như đã thảo luận trong bài viết này về YUI: http://yuiblog.com/blog/2007/06/12/module-pattern/

Tôi tin rằng jQuery sử dụng mô hình này trong lõi của nó, cũng như khuyến khích các nhà phát triển plug-in để sử dụng các mô hình. Sử dụng mẫu này là một cách tiện dụng và hiệu quả để giữ không gian tên toàn cầu rõ ràng là lộn xộn, điều này hữu ích hơn nữa bằng cách hỗ trợ các nhà phát triển viết mã sạch, đóng gói.

Answer 3

Mẫu Composite cũng rất thường được sử dụng trong jQuery. Đã làm việc với các thư viện khác, tôi có thể thấy mô hình này không rõ ràng như thế nào khi nhìn vào cảnh đầu tiên. Mô hình cơ bản nói rằng,

một nhóm đối tượng sẽ được xử lý giống như một trường hợp đơn lẻ của đối tượng.

Ví dụ: khi giao dịch với một phần tử DOM đơn lẻ hoặc một nhóm phần tử DOM, cả hai có thể được xử lý một cách thống nhất.

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

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

Answer 4

Trong con mắt của lập trình chức năng, jQuery là một đơn nguyên. Một Monad là một cấu trúc chuyển một đối tượng tới một hành động, trả về đối tượng đã sửa đổi và chuyển nó cho hành động tiếp theo. Giống như một dây chuyền lắp ráp.

Wikipedia article bao gồm định nghĩa rất tốt.