What is a JavaScript “Proxy Pattern”?

Question

I\'ve come across the notion of \'Proxy Pattern\' today on jQuery.com, but could not make anything of it. Apparently it is of great use, but I do not understand the idea at

Answer 1

The Proxy pattern provides a surrogate or placeholder object for another object and controls access to this other object.

In object-oriented programming, objects do the work they advertise through their interface (properties and methods). Clients of these objects expect this work to be done quickly and efficiently. However, there are situations where an object is severely constrained and cannot live up to its responsibility. Typically this occurs when there is a dependency on a remote resource (resulting in network latency) or when an object takes a long time to load.

In situations like these you apply the Proxy pattern and create a proxy object that ‘stands in’ for the original object. The Proxy forwards the request to a target object. The interface of the Proxy object is the same as the original object and clients may not even be aware they are dealing with a proxy rather than the real object.

Client -- In sample code: the run() function

• calls Proxy to request an operation.

Proxy -- In sample code: GeoProxy

• provides an interface similar to the real object

• maintains a reference that lets the proxy access the real object

• handles requests and forwards these to the real object

RealSubject -- In sample code: GeoCoder

• defines the real object for which service is requested

Answer 2

In Javascript Patterns book, Stoyan Stefanov describes this pattern as so:

In the proxy pattern, one object acts as an interface to another object. The proxy sits between the client of an object and the object itself and protects the access to that object.

This pattern might look like an overhead but it's useful for perfomance purposes. The proxy servers play a guardian role for the object (also called "real subject") and tries to make this object do as little work as possible.

A real world example

The proxy pattern is useful when the real subject does something expensive. In web applications, one of the most expensive operations you can do is a network request, so it makes sense to combine HTTP requests as much as possible.

You can see an example here: http://www.jspatterns.com/book/7/proxy.html. (take a look at the source code).

You have a list of videos on the page. When the user clicks a video title, the area below the title expands to show more information about the video and also enables the video to be played. The detailed video information and the URL of the video are not part of the page; they need to be retrieved by making a web service call. The web service can accept multiple video IDs, so we can speed up the application by making fewer HTTP requests whenever possible and retrieving data for several videos at one time.

The videos object doesn't call the HTTP service directly but calls the proxy instead. The proxy then waits before forwarding the request. If other calls from videos come in the 50ms waiting period, they will be merged into one. A delay of 50ms is pretty much imperceptible for the user but can help combine requests and speed up the experience when clicking “toggle” and expanding more than one video at once. It also reduces the server load significantly since the web server has to handle a smaller number of requests.

Without proxy

Proxy

Proxy as a cache

Answer 3

Here's one example of a proxy pattern used to record what listeners are being set: Why does Google +1 record my mouse movements?.

Answer 4

In general - Proxy Pattern comes to control access to a resource. By doing so it can solve several potential issues:

1. prevent incorrect or malicious use of the resource
2. prevent/control access to a resource that is too expensive to create

jQuery use the term rather loosely, but their idea is that you override/hide the existing method (in their example jQuery.fn.setArray) while adding more functionality to it.

(function() { // envelop everyting in anonymous immediately called function 
  var proxied = jQuery.fn.setArray; // save current method
  jQuery.fn.setArray = function() { // override the method
    console.log(this, arguments); // add functionality
    return proxied.apply(this, arguments); // call original method and return 
                                           // its result
  };
})();

Answer 5

Imagine you have site with many ajax requests. There is a change in design. Now before each request you want to display some custom loading gif. You neeed to change all the code where there is an ajax request or you can use proxy pattern.

var proxied = jQuery.ajax; // Preserving original function
jQuery.ajax = function() { 
    jQuery("#loading").dialog({modal: true});
    return proxied.apply(this, arguments);
}