Reception programming "Decorator" Scripting client side JavaScript,

Decorator example
Another example
Why decorators?
Tasks

Decorator is a programming technique that allows you to take an existing function and change / expand its behavior.

The decorator gets the function and returns a wrapper that modifies ( decorates ) its behavior, leaving the call syntax the same.

Decorator example

For example, we have a function sum(a,b) :

  function sum(a, b) { 
    return a + b; 
 }  

Create a doublingDecorator decorator, which changes the behavior, increasing the result of the function two times:

  function doublingDecorator(f) { 
    return function () { 
      return 2*f.apply( this , arguments); // (*) 
   };  
 }  

 // Использование:  

  function sum(a, b) { 
    return a + b; 
 }  

 sum = doublingDecorator(sum);  

 alert( sum(1,2) ); // 6 
 alert( sum(2,3) ); // 10 

The doublingDecorator decorator creates an anonymous wrapper function that, in line (*) calls f using apply with the same this context and arguments arguments , and then doubles the result.

This decorator can be applied twice:

 sum = doublingDecorator(sum);  
 sum = doublingDecorator(sum);  

 alert( sum(1,2) ); // 12, т.е. 3 умножается на 4 

The context of this in sum is not used at all, so one could call f.apply(null, arguments) .

Another example

Let's see another example. Suppose we have an isAdmin() function that returns true if the visitor has administrator rights.

You can create a universal decorator that adds rights verification to the function:

For example, create a decorator checkPermissionDecorator(f) . It will return a wrapper that sends the call to f if the visitor has enough rights:

  function checkPermissionDecorator(f) { 
    return function () { 
      if ( isAdmin() ) { 
        return f.apply( this , arguments); 
     }  
      alert( 'Недостаточно прав' ); 
   }  
 }  

Use Decorator:

  function save() { ... } 

 save = checkPermissionDecorator(save);  
 // Теперь вызов функции save() проверяет права  

Decorators can be used in any combination:

 sum = checkPermissionDecorator(sum);  
 sum = doublingDecorator(sum);  
 // ...  

Why decorators?

Decorators change the behavior of a function in a transparent manner.

Decorators can be reused. For example, doublingDecorator can be applied not only to sum , but also to multiply , divide . Decorator to check the rights can be applied to any function.
Multiple decorators can be combined. This gives additional flexibility to the code.

Examples of use are in tasks.

Tasks

Importance: 5

Create the makeLogging(f, log) decorator, which takes the function f and the log array.

It must return a wrapper around f , which, with each call, writes (“logs”) the arguments to log , and then transfers the call to f .

In this problem, we can assume that the function f exactly one argument.

Should work like this:

  function work(a) { 
    /* ... */ // work - произвольная функция, один аргумент 
 }  

  function makeLogging(f, log) { /* ваш код */ } 

  var log = []; 
 work = makeLogging(work, log);  

 work(1); // 1, добавлено в log 
 work(5); // 5, добавлено в log 

  for ( var i=0; i<log.length; i++) { 
    alert( 'Лог:' + log[i] ); // "Лог:1", затем "Лог:5" 
 }  

Decision

[Open task in new window]

Importance: 3

Create the makeLogging(func, log) decorator makeLogging(func, log) , for the func function, returning a wrapper that, with each call, adds its arguments to the log array.

The condition is similar to the task Logging decorator (1 argument), but func allowed with any set of arguments.

Should work like this:

  function work(a, b) { 
   alert(a + b); // work - произвольная функция 
 }  

  function makeLogging(f, log) { /* ваш код */ } 

  var log = []; 
 work = makeLogging(work, log);  

 work(1, 2); // 3 
 work(4, 5); // 9 

  for ( var i=0; i<log.length; i++) { 
    alert( 'Лог:' + [].join.call(log[i]) ); // "Лог:1,2", "Лог:4,5" 
 }  

Decision

The solution is similar to the task Logging decorator (1 argument), the difference is that the entire arguments object goes to the log instead of a single arguments .

To transfer a call with an arbitrary number of arguments, use f.apply(this, arguments) .

  function work(a, b) { 
   alert(a + b); // work - произвольная функция 
 }  

  function makeLogging(f, log) { 
 
    function wrapper() { 
     log.push(arguments);  
      return f.apply( this , arguments); 
   }  

    return wrapper; 
 }  

  var log = []; 
 work = makeLogging(work, log);  

 work(1, 2); // 3 
 work(4, 5); // 9 

  for ( var i=0; i<log.length; i++) { 
    alert( 'Лог:' + [].join.call(log[i]) ); // "Лог:1,2", "Лог:4,5" 
 }  

[Open task in new window]

Importance: 5

Create a makeCaching(f) decorator that takes the function f and returns a wrapper that caches its results.

In this problem, the function f has only one argument, and it is a number.

The first time the wrapper is called with a specific argument, it calls f and remembers the value.
For the second and subsequent calls with the same argument, the memorized value is returned.

It should work like this:

  function f(arg) { 
    return Math.random()*arg; // может быть любой функцией 
 }  

  function makeCaching(f) { /* ваш код */ } 

 f = makeCaching(f);  

  var a, b; 

 a = f(1);  
 b = f(1);  
 alert( a == b ); // true (значение закешировано) 

 b = f(2);  
 alert( a == b ); // false, другой аргумент => другое значение 

Decision

We will remember the results of the function call in the closure, in the cache: { ключ:значение } object cache: { ключ:значение } .

  function f(x) { 
    return Math.random()*x; 
 }  

  function makeCaching(f) { 
    var cache = {}; 

    return function (x) { 
      if (!(x in cache)) { 
        cache[x] = f.call( this , x); 
     }  
      return cache[x]; 
   };  

 }  

 f = makeCaching(f);  

  var a = f(1); 
  var b = f(1); 
 alert( a == b ); // true (значение закешировано) 

 b = f(2);  
 alert( a == b ); // false, другой аргумент => другое значение 

Note: checking for the presence of the already calculated value looks like this: if (x in cache) . Less universally, you can check this: if (cache[x]) , this is if we know for sure that cache[x] will never be false , 0 , etc.

Reception programming "Decorator"

"

Decorator example

Another example

Why decorators?

Tasks

Comments

To leave a comment

Scripting client side JavaScript, jqvery, BackBone

Terms: Scripting client side JavaScript, jqvery, BackBone