Javascript - рефакторинг if..else утверждений (ES6)

Question

Я пытаюсь реорганизовать if..else заявления.

Мой код:

let condition = 'hi';

if(condition === 'hi'){
  commonFunction('hi');
  console.log('hi is called');

}else if(condition === 'bye'){
  commonFunction('bye');
  console.log('bye is called');

}else if(condition.includes('happy')){
  commonFunction('happy');
  console.log('happy is called');

}else if(condition === 'greeting'){
  commonFunction('greeting');
  console.log('greeting is called');

}

Рефакторированный код:

if(condition === 'hi'){
  hi();
}else if(condition === 'bye'){
  bye();
}else if(condition.includes('happy')){
  happy();
}else if(condition === 'greeting'){
  greeting();
}

function hi(){
  commonFunction('hi');
  console.log('hi is called');
}

function bye(){
  commonFunction('bye');
  console.log('bye is called');
}

function happy(){
  commonFunction('happy');
  console.log('happy is called');
}

function greeting(){
  commonFunction('greeting');
  console.log('greeting is called');
}

Лучше ли объявлять каждыйфункции по условию, как мой рефакторинг кода ???

Или, как насчет создания класса и вызова commonFunction конструктором?(Я думаю, что switch..case бесполезен, потому что у меня есть условие, которое включает в себя ())

Answer 1

Я бы посоветовал переместить все эти if-else s в commonFunction сам (если он снова не содержит те же if-else s, если вам нужен более сложный рефакторинг):

const commonFunction = (condition) => {
  let f = ['hi', 'bye', 'happy', 'greeting'].find(e => condition.includes(e))
  console.log(f + ' is called');
  if (!f) return;
  // do something
  // return the result if needed
}

commonFunction('greeting')
commonFunction('die')

Answer 2

У вас есть набор условий, для которых вы хотите вызвать общую функцию.Лучший способ сделать это - просто проверить, можете ли вы справиться с условием (вот где вы можете использовать includes).Затем вызовите эту функцию.

const allowed = ['hi', 'bye', 'happy', 'greeting']

let condition = 'happy'

if (allowed.includes(condition)) {           // do you know how to deal with condition? 
  commonFunction(condition)                 // if so call the function
} else {
  console.log(`unknown condition ${condition}`) // otherwise log an error
}

// not sure what commonFunction does, so this is just for the example
function commonFunction(condition) {
  console.log(`${condition} is called`);
}

Answer 3

Одним из вариантов будет использование объекта , содержащего функции, а не наличие нескольких автономных функций.Затем просто используйте поиск свойства.

Для этого точного кода, однако, вы можете сделать его даже DRY-er, используя Proxy, чтобы проверить, к какому свойству обращались, вместо того, чтобы иметь несколько свойств (потому что всеВаши свойства / функции имеют общую функциональность):

const condition = 'hi';

const fns = new Proxy({}, { get: (_, prop) => {
  console.log(prop + ' is called');
}});

const props = ['hi', 'bye', 'greeting'];
if (condition.includes('happy')) {
  fns.happy();
} else if (fns[condition]) {
  fns[condition]();
}

Это очень СУХОЙ, но довольно странный вариант - в большинстве случаев вы бы вместо этого использовали объект:

const fns = {
  hi() {
    console.log('hi is called');
  },
  bye() {
    console.log('bye is called');
  },
  greeting() {
    console.log('greeting is called');
  },
  happy() {
    console.log('happy is called');
  }
}

const condition = 'hi';

if (condition in fns) {
  fns[condition]();
} else if (condition.includes('happy')) {
  fns.happy();
}

Answer 4

В вашем исходном коде вы написали несколько операторов if else, чтобы просто вызывать одну и ту же функцию с другим предопределенным аргументом, поэтому вместо рефакторинга, по-вашему, это намного проще и небольшой код.

let predefinedArgs = {
    hi: 'hi',
    bye: 'bye'
    ...
}

let condition = 'hi'
commonFunction(predefinedArgs[`condition`]);

Answer 5

С этим можно сделать одно: объявить функцию в object, используя condition как keys.

let objFunc = {
    'hi': function() {
       commonFunction('hi');
       console.log('hi is called');
    },
    'happy': function() {
       commonFunction('happy');
       console.log('happy is called');
    },
    'bye': function() {
       commonFunction('bye');
       console.log('bye is called');
    },
    'greeting': function() {
       commonFunction('greeting');
       console.log('greeting is called');
    },
};


objFunc[condition]();