Перезапись значений по умолчанию

Question

У меня есть функция, в которой конфигурация по умолчанию хранится в объекте. Функция принимает необязательный аргумент «options», если в аргументе options есть какая-либо конфигурация, она должна перезаписать конфигурацию по умолчанию.

Это моя реализация:

const myFunction = (props) => {
  const config = {
    slopeModifier: 2,
    minDistance: 30,
    lockScrollIfHorizontal: true,
    callback: null,
  };

  if (props.options) {
    for (const property in options) {
      config[property] = options[property];
    }
  }

};
export default myFunction;

в другом файле I будет делать что-то вроде этого:

import myFunction

const options = {minDistance: 50, slope: 3};
myFunction({arg1, arg2, options});

Является ли это решение хорошей практикой? Есть ли стандартный способ сохранить значения по умолчанию и перезаписать их необязательным аргументом? Кроме того, я получаю предупреждение eslint (guard-for-in) , может ли мой код вызвать какие-либо ошибки?

Answer 1

Есть ли стандартный способ сохранить значения по умолчанию и перезаписать их необязательным аргументом?

Да, есть стандартный способ сделать это через Object.assign

const myFunction = (props) => {
  const config = Object.assign({
    slopeModifier: 2,
    minDistance: 30,
    lockScrollIfHorizontal: true,
    callback: null,
  }, props.options);

  // ...

};
export default myFunction;

Также имеется более новый Доступный синтаксис Rest / Spread , который показывает ответ Альберто .

  const config = {
    slopeModifier: 2,
    minDistance: 30,
    lockScrollIfHorizontal: true,
    callback: null,
    ... props.options
  };

Является ли это решение хорошей практикой?

Переопределение конфигурации по умолчанию этим способом хорошо. Мое беспокойство было бы с помещением других аргументов в ваш объект параметров. Если требуются другие аргументы, вы можете сделать их официальными параметрами самостоятельно и иметь options последний (необязательный) параметр.

const myFunction = (arg1, arg2, props) => ...;

const options = {minDistance: 50, slope: 3};
myFunction(arg1, arg2, options);

Также , Я получаю предупреждение eslint (guard-for-in), может ли мой код вызвать какие-либо ошибки?

Может. Как указывают документы , возможно, что кто-то может добавить свойства к prototype для любого типа объекта, который вы передадите в качестве параметров, и вы будете выбирать эти свойства прототипа в дополнение к любым свойствам. были добавлены непосредственно к объекту. Это было бы плохой практикой, но не случайно:

// someone else's code, maybe in a third-party library that thought it was being clever.
Object.prototype.foo = "bar";

// Your code
for(const prop in {"1": 2}) { console.log(prop); }

Вывод:

1
"bar"

Answer 2

Вы нарушаете Принцип единой ответственности , и вам лучше создать класс для установки, обновления и возврата кода конфигурации:

class configClass{
  
  config = {
    slopeModifier: 2,
    minDistance: 30,
    lockScrollIfHorizontal: true,
    callback: null
  }

  getConfig(){
      return this.config
  }
  
  updateConfig(options){
      for(const property in options) {
          this.config[property] = options[property]
      }
  }

}

//export default configClass 
//import configClass as myClass
const myClass = new configClass()

const options = {minDistance: 50, slope: 3}
const obj = {arg1:"foo", arg2:"bar", options: options}
myClass.updateConfig(obj.options)
console.log(myClass.getConfig())

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

Answer 3

Вы можете использовать оператор распространения для переопределения свойств, если в вызове функции существует props.options, например:

const myFunction = (props) => {
  const config = {
    slopeModifier: 2,
    minDistance: 30,
    lockScrollIfHorizontal: true,
    callback: null,
    ...props.options
  };
};

export default myFunction;

Answer 4

Вы можете вызвать эту функцию без каких-либо параметров, и будут применены значения по умолчанию:

const myFunction = ({
    slopeModifier = 2,
    minDistance = 30,
    lockScrollIfHorizontal = true,
    callback = null
  } = {}) => {
  ...
};

export default myFunction;

В другом файле вы можете вызвать функцию следующим образом:

import myFunction

myFunction({minDistance: 10}); // or myFunction();

Пример

const myFunction = ({
    slopeModifier = 2,
    minDistance = 30,
    lockScrollIfHorizontal = true,
    callback = null
  } = {}) => {
  console.log(slopeModifier, minDistance);
};

myFunction();
myFunction({minDistance: 10});