JavaScript Decorator Pattern

Автор оригинала: Faizan Haider.

При разработке большого приложения наша главная цель – не повторять себя и повторно использовать наш код. Для повторного использования кода мы можем сделать много вещей, но один из них наследство. Пример наследования с использованием JavaScript:

function Sandwich(name) {
   this.name = name;
}

Sandwich.prototype.eat = function () {
   console.log("I'm eating " + this.name);
}

function Subway () {
   Sandwich.call(this, 'subway');
}

Subway.prototype = Object.create(Sandwich.prototype);
Subway.prototype.cost = function () {
   return 5;
}

Это простая реализация, но многие из нас хотят разных вещей с нашими бутербродами. Некоторые как соленья, кетчуп, в то время как другие любят горчицу и гуакамоле, а некоторые из нас хотят всех них. И нам нужно получить стоимость бутерброда после добавления наших любимых. Но когда мы делаем это, используя наследство, нам понадобятся несколько типов данных на Сэндвич Отказ Нам понадобится Вспомогательный, с помощью, с помощью, умастар, с пикчлеанадмустартом, с Pickleandketch И многие другие при добавлении новых приправа. Все они имеют одинаковую функциональность, но крошечную разницу между ними. Теперь нам нужно думать, что наша реализация и декораторы учатся.

Декоратор

В основном это обертка, которая расширяет функциональность объекта при сохранении интерфейса объекта. Например, нам нужны разные расходы для разных размеров. Поскольку декораторы являются только оберткой, мы можем обернуть новый объект в Funciton, как это:

Subway.sixInch = function (subwayObj) { //Method on Subway function object
  var cost = subwayObj.cost(); //Get current cost of sandwich
    subwayObj.cost = function () { //We aren't changing interface but providing more functionality
    	return cost - 1;
    }
}    
 
Subway.footLong = function (subwayObj) {}; //Default is Foot Long 
Subway.partySub = function (subwayObj) { 
  var cost = subwayObj.cost(); 
    subwayObj.cost = function () { 
    	return cost + 3;
    }
}

Subway.partySub = function (subwayObj) { 
  var cost = subwayObj.cost(); 
    subwayObj.cost = function () { 
    	return cost + 3;
    }
}

Subway.pickle = function (subwayObj) { 
  var cost = subwayObj.cost(); 
    subwayObj.cost = function () { 
    	return cost + 0.12;
    }
}

Subway.mustard = function (subwayObj) { 
  var cost = subwayObj.cost(); 
    subwayObj.cost = function () { 
    	return cost + 0.25;
    }
}

Subway.ketchup = function (subwayObj) { 
  var cost = subwayObj.cost(); 
    subwayObj.cost = function () { 
    	return cost + 0.10;
    }
}

И теперь, когда мы хотим, чтобы вечеринка сабкурировала и горчицу, нам нужно только назвать эти методы декоратора на нашем новом объекте.

var mySandwich = new Subway(); // current cost of sandwich 5
Subway.partySub(mySandwich); // add 3 and cost would be 8
Subway.pickle(mySandwich); // add 0.12 and cost would be 8.12
Subway.mustard(mySandwich); // add 0.25 and cost would be 8.37
console.log(mySandwich.cost());//8.37

Мы все это сделали без добавления ни одного типа данных на объект метро для всей этой различной комбинации. Мы можем изменить этот код, чтобы использовать наследство и прототип.

function Sandwich() {
  this._cost = 0;
}

Sandwich.prototype.cost = function () {
  return this._cost;
}

function SandwichDecorator(sandwich) {
  Sandwich.call(this);
    this.sandwich = sandwich;
}
SandwichDecorator.prototype = Object.create(Sandwich.prototype);
SandwichDecorator.prototype.cost = function () {
  return this._cost + this.sandwich.cost();
}

function Pickle(sandwich) {
  SandwichDecorator.call(this, sandwich);
    this._cost = 0.12;
}
Pickle.prototype = Object.create(SandwichDecorator.prototype);

function Subway() {
  Sandwich.call(this);
    this._cost = 5;
}
Subway.prototype = Object.create(Sandwich.prototype);


var mySandwich = new Subway();
mySandwich = new Pickle(mySandwich);
console.log(mySandwich.cost()); //5.12

В новом примере прототипа нам не нужно создавать функцию стоимости снова и снова. Я надеюсь, что вы нашли это полезно.

Декоратор

Читайте ещё по теме: