Декоратор или функция обертка в javascript

Декоратор позволяет модифицировать поведение функции.

Декоратор – обертка, которая модифицирует поведение функции.

js

var weekdays = ["понедельник","вторник","среда","четверг","пятница","суббота","воскресенье"];

function getDay(num)
{
    return weekdays[num];
}

for(var i=0; i<7; i++)
{
    console.log(getDay(i));
}

Допустим нам надо не просто выводить день недели, а день недели обернутый в тег span.

Можно воспользоваться дополнительной функцией, например (getDaySpan):

js

function getDaySpan(num)
{
    return "<span>"+weekdays[num]+"</span>";
}

for(var i=0; i<7; i++)
{
    console.log(getDaySpan(i));
}

А что, если нам понадобится обернуть день недели в тег b или в любой другой тег. Конечно, можно использовать шаблоны. Но мы пока используем дополнительные функции.

Создание однотипных функций можно решить универсально: для этого и используется декоратор.

jQuery

// пример декоратора
function wrapDecorator(f, startTag, closeTag)
{
    return function(num) // возвращаем обертку
    {
        return startTag + f(num) + closeTag;
    }
}

// универсальные декорар
function wrapDecorator(f, startTag, closeTag)
{
    return function(num) // возвращаем обертку
    {
        return startTag + f.apply(this,arguments) + closeTag;
    }
}
// /view_snippets.php?id=35     Методы javascript call и apply


// Использование декоратора

var getDayInDiv = wrapDecorator(getDay,"<div>","</div>");
var getDayInSpan = wrapDecorator(getDay,"<span>","</span>");


for(var i=0; i<7; i++)
{
    console.log(getDayInDiv(i));
}


for(var i=0; i<7; i++)
{
    console.log(getDayInSpan(i));
}


// результат
/*
<div>понедельник</div>
<div>вторник</div>
<div>среда</div>
<div>четверг</div>
<div>пятница</div>
<div>суббота</div>
<div>воскресенье</div>
<span>понедельник</span>
<span>вторник</span>
<span>среда</span>
<span>четверг</span>
<span>пятница</span>
<span>суббота</span>
<span>воскресенье</span>
*/

Декоратор – это функция, она получает в качестве параметров другую функцию и другие параметры.

Задача декоратора вернуть обертку вокруг функции (f):

js

 //decorator(f,…..)

Смысл обертки: модифицировать ф-ю f, причем вызов функции, как правило, остается неизменным.

Весь код

js

var weekdays = ["понедельник","вторник","среда","четверг","пятница","суббота","воскресенье"];

function getDay(num)
{
    return weekdays[num];
}

for(var i=0; i<7; i++)
{
    console.log(getDay(i));
}


function getDaySpan(num)
{
    return "<span>"+weekdays[num]+"</span>";
}

for(var i=0; i<7; i++)
{
    console.log(getDaySpan(i));
}

// пример декоратора
function wrapDecorator(f, startTag, closeTag)
{
    return function(num) // возвращаем обертку
    {
        return startTag + f(num) + closeTag;
    }
}

// универсальные декорар
function wrapDecorator(f, startTag, closeTag)
{
    return function(num) // возвращаем обертку
    {
        return startTag + f.apply(this,arguments) + closeTag;
    }
}
// /view_snippets.php?id=35     Методы javascript call и apply


// Использование декоратора

var getDayInDiv = wrapDecorator(getDay,"<div>","</div>");
var getDayInSpan = wrapDecorator(getDay,"<span>","</span>");


for(var i=0; i<7; i++)
{
    console.log(getDayInDiv(i));
}


for(var i=0; i<7; i++)
{
    console.log(getDayInSpan(i));
}


// результат
/*
<div>понедельник</div>
<div>вторник</div>
<div>среда</div>
<div>четверг</div>
<div>пятница</div>
<div>суббота</div>
<div>воскресенье</div>
<span>понедельник</span>
<span>вторник</span>
<span>среда</span>
<span>четверг</span>
<span>пятница</span>
<span>суббота</span>
<span>воскресенье</span>
*/