Шаблон декоратор в javascript

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

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

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

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

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

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

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

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

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

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

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

// пример декоратора
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;
    }

}


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

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, причем вызов функции, как правило, остается неизменным.

Весь код

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

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

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>
*/