Subscribe to my Posts

Friday, 6 May 2016

Proxies in Typescript


  • Proxy is a  Javascript  DesignPattern  .
  • There are times when it is necessary for us to control the access and context behind an object, and this is where the Proxy pattern can be useful.
  • 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.
  • 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 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.
Request Process without Proxy :



Request Processing with Proxy:




Syntax:

var p = new Proxy(target, handler);

Parameters:

target:

A target object (can be any sort of objects, including a native array, a function or even another proxy) or function to wrap with Proxy.

handler:
  • The handler object is a placeholder object which contains traps for Proxy.
  • An object whose properties are functions which define the behavior of the proxy when an operation is performed on it.
  • All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.

Methods of the handler object:

  • getPrototypeOf? (target: T):
     A trap for Object.getPrototypeOf.
  • setPrototypeOf(target: T, v: any):

A trap for Object.setPrototypeOf.


  • isExtensible? (target: T):

A trap for Object.isExtensible.

  •  preventExtensions? (target: T)

A trap for Object.preventExtensions.


  •  getOwnPropertyDescriptor? (target: T, p: PropertyKey)

A trap for Object.getOwnPropertyDescriptor.

  • has? (target: T, p: PropertyKey)
A trap for the in operator.

  • get? (target: T, p: PropertyKey, receiver: any)

A trap for getting property values.

  • set? (target: T, p: PropertyKey, value: any, receiver: any)

A trap for setting property values.


  • deleteProperty? (target: T, p: PropertyKey)
A trap for the delete operator.

  • defineProperty? (target: T, p: PropertyKey, attributes: PropertyDescriptor)
A trap for Object.defineProperty.

  • ownKeys? (target: T)
A trap for Object.getOwnPropertyNames.
  • apply? ()

A trap for a function call.
  • construct? ()


A trap for the new operator.


Ex:
for get method :


var handler = {
    get: function(target, name){
        return name in target?
            target[name] :
            37;
    }
};

var p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p.a, p.b); // 1, undefined
console.log('c' in p, p.c); // false, 37



















No comments:

Post a Comment