Javascript с шаблоном по умолчанию, не работает

Question

В школе мне приходилось делать сценарий Javascript с использованием Javascript Factory Pattern Design, который «делал» пиццу. Функция Factory должна была получить 3 аргумента (массив строк для ингредиентов, цена пиццы и строка для цены), а если аргумент отсутствовал, она должна была вернуть пиццу Pepperoni по умолчанию.

Я использовал этот код:

function pizzaFactory(ing, pric, siz) {
    let ingred = null;
    let price = null;
    let size = null;
    if(typeof ing == "undefined" || typeof pric == "undefined" || typeof siz == "undefined") {
        ingred = ["pepperoni", "cheese", "tomato sauce", "lots and lots and lots and lots and lots of love"];
        price = 125;
        size = "Small";
    } else {
        ingred = ing;
        price = pric;
        size = siz;
    }
    return {
        ing: ingred,
        pric: price,
        siz: size,
        deliver: function() {
            console.log(`Pizza Ingredients: ${ing}`);
            console.log(`Price: ${pric}`);
            console.log(`Size: ${siz}`);
        }
    };
}
let ingredients = ['cheese', 'tomato sauce', 'hate'];
const pizza1 = pizzaFactory(ingredients, 150, "Large");
pizza1.deliver();
const pizza2 = pizzaFactory();
pizza2.deliver();

Проблема в том, что функция работает только при передаче всех аргументов, и хотя функция вводит if и правильно присваивает значение переменным ingred, price и size. При запуске функции deliver значения отображаются как неопределенные.

Мне было интересно, в чем проблема с моим кодом, и есть ли лучший / более эффективный способ сделать это.

Спасибо.

Answer 1

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

function pizzaFactory(ing, pric, siz) {
  let order = {
    ing: null,
    pric: null,
    siz: null
  };

  if(!ing || !pric || !siz) {
    order = {
      ing: ["pepperoni", "cheese", "tomato sauce", "lots and lots and lots and lots and lots of love"],
      pric: 125,
      siz: 'Small'
    }
   } else {
    order = {
      ing,
      pric,
      siz
    }
  }
    return {
      ...order,
      deliver() {
        console.log(`Pizza Ingredients: ${order.ing}`);
        console.log(`Price: ${order.pric}`);          
        console.log(`Size: ${order.siz}`);
      }
    };
  }

let ingredients = ['cheese', 'tomato sauce', 'hate'];
const pizza1 = pizzaFactory(ingredients, 150, "Large");
pizza1.deliver();
const pizza2 = pizzaFactory();
pizza2.deliver();

Answer 2

Ниже приведено рабочее решение вашей проблемы:

function pizzaFactory(ing, pric, siz) {
    let ingred = null;
    let price = null;
    let size = null;
    if(typeof ing == "undefined" || typeof pric == "undefined" || typeof siz == "undefined") {
        ingred = ["pepperoni", "cheese", "tomato sauce", "lots and lots and lots and lots and lots of love"];
        price = 125;
        size = "Small";
    } else {
        ingred = ing;
        price = pric;
        size = siz;
    }
    return {
        ing: ingred,
        pric: price,
        siz: size,
        deliver: function() {
            console.log(`Pizza Ingredients: ${ingred}`);
            console.log(`Price: ${price}`);
            console.log(`Size: ${size}`);
        }
    };
}

Единственный фрагмент вашего кода, который нуждается в обновлении, следующий:

 return {
            ing: ingred,
            pric: price,
            siz: size,
            deliver: function() {
                console.log(`Pizza Ingredients: ${ingred}`);
                console.log(`Price: ${price}`);
                console.log(`Size: ${size}`);
            }
        };

Где необходимо обновить следующие операторы:

console.log(`Pizza Ingredients: ${ing}`);

К

console.log(`Pizza Ingredients: ${ingred}`);

Тогда

console.log(`Price: ${pric}`);

К

console.log(`Price: ${price}`);

Тогда

console.log(`Size: ${siz}`);

К

console.log(`Size: ${size}`);

Как вы на самом деле ссылались на ing, pric, siz, которые являются аргументами функции, и должны быть undefined, когда вы вызываете функцию pizzaFactory без аргументов, таких как:

const pizza2 = pizzaFactory();

Надеюсь, это поможет.

Answer 3

Внутри функции входные аргументы имеют имена ing, pric и siz. Затем проверенные значения помещаются в переменные ingred, price и size.

В настоящее время в возвращаемом объекте вы ссылаетесь на ing, pric и siz, а не на проверенные переменные - исправьте это, и все будет работать так, как задумано:

function pizzaFactory(ing, pric, siz) {
    let ingred = null;
    let price = null;
    let size = null;
    if(typeof ing == "undefined" || typeof pric == "undefined" || typeof siz == "undefined") {
        ingred = ["pepperoni", "cheese", "tomato sauce", "lots and lots and lots and lots and lots of love"];
        price = 125;
        size = "Small";
    } else {
        ingred = ing;
        price = pric;
        size = siz;
    }
    return {
        ing: ingred,
        pric: price,
        siz: size,
        deliver: function() {
            console.log(`Pizza Ingredients: ${ingred}`);
            console.log(`Price: ${price}`);
            console.log(`Size: ${size}`);
        }
    };
}
let ingredients = ['cheese', 'tomato sauce', 'hate'];
const pizza1 = pizzaFactory(ingredients, 150, "Large");
pizza1.deliver();
const pizza2 = pizzaFactory();
pizza2.deliver();

Это одна из причин, почему точные имена переменных важны. Вы можете рассмотреть возможность использования различных, чтобы прояснить разницу: например, возможно ingredArg и ingredValidated:

function pizzaFactory(ingArg, pricArg, sizArg) {
    const argsValid = [ingArg, pricArg, sizArg].every(arg => arg !== undefined)
    const ingredValidated = argsValid ? ingArg : ["pepperoni", "cheese", "tomato sauce", "lots and lots and lots and lots and lots of love"];
    const priceValidated = argsValid ? pricArg : 125; 
    const sizeValidated = argsValid ? sizArg : 'Small';
    return {
        ing: ingredValidated,
        pric: priceValidated,
        siz: sizeValidated,
        deliver: function() {
            console.log(`Pizza Ingredients: ${ingredValidated}`);
            console.log(`Price: ${priceValidated}`);
            console.log(`Size: ${sizeValidated}`);
        }
    };
}
let ingredients = ['cheese', 'tomato sauce', 'hate'];
const pizza1 = pizzaFactory(ingredients, 150, "Large");
pizza1.deliver();
const pizza2 = pizzaFactory();
pizza2.deliver();