javascript - 将两个相似功能重构为一个的最有效方法是什么？(What is the most effective way for refactoring two similar functions into one?)

Question

I have two helper functions which accepts two arguments.

(我有两个辅助函数，它们接受两个参数。)

The first argument is a step (represented by number), the second one is a model (represented by array of three objects and it is always static).

(第一个参数是一个步骤（由数字表示），第二个参数是一个模型（由三个对象的数组表示，并且始终是静态的）。)

So the initial model (the second argument in a functions) looks like this:

(因此初始模型（函数中的第二个参数）如下所示：)

[
    {
        completed: false,
        id: 0,
        isNavigationAllowed: true,
        name: 'Type',
    },
    {
        completed: false,
        id: 1,
        isNavigationAllowed: false,
        name: 'Settings',
    },
    {
        completed: false,
        id: 2,
        isNavigationAllowed: false,
        name: 'Summary',
    },
]

Helper functions:

(辅助功能：)

export function transformModelForNext(step, wizardStepsModel) {
    const initialStep = { ...wizardStepsModel[0] }
    const settingsStep = { ...wizardStepsModel[1] }
    const summaryStep = { ...wizardStepsModel[2] }

    if (step === 0) {
        initialStep.completed = true
        initialStep.isNavigationAllowed = false
        settingsStep.isNavigationAllowed = true
    }

    if (step === 1) {
        settingsStep.completed = true
        settingsStep.isNavigationAllowed = false
        summaryStep.isNavigationAllowed = true
    }

    if (step === 2) {
        summaryStep.isNavigationAllowed = false
        initialStep.isNavigationAllowed = false
        settingsStep.isNavigationAllowed = false
        summaryStep.completed = true
    }

    return [initialStep, settingsStep, summaryStep]
}

export function transformModelForPrevious(step, wizardStepsModel) {
    const initialStep = { ...wizardStepsModel[0] }
    const settingsStep = { ...wizardStepsModel[1] }
    const summaryStep = { ...wizardStepsModel[2] }

    if (step === 2) {
        summaryStep.completed = false
        summaryStep.isNavigationAllowed = false
        settingsStep.completed = false
        settingsStep.isNavigationAllowed = true
    }

    if (step === 1) {
        initialStep.completed = false
        initialStep.isNavigationAllowed = true
        settingsStep.isNavigationAllowed = false
    }

    return [initialStep, settingsStep, summaryStep]
}

So the first three lines in both functions - I copy every object in a new variable (original model can't be mutated), then I check my step (first argument in a functions) and decide what flags in my newly created objects can be changed.

(因此，这两个函数的前三行-我将每个对象复制到新变量中（原始模型不能被更改），然后检查步骤（函数中的第一个参数），并确定可以在新创建的对象中使用哪些标志改变了。)

Finally, I return new array with my new objects.

(最后，我返回带有新对象的新数组。)

In short, my React app behave like a wizard page, and, depending on 'Next' or 'Previous' button clicks I should change the model.

(简而言之，我的React应用程序的行为就像一个向导页面，根据“下一步”或“上一步”按钮的点击，我应该更改模型。)

The question is: Is there more elegant and effective, or even more functional way for make such transformations?

(问题是：是否有更优雅，更有效，或更实用的方式进行此类转换？)

  ask by vmstr translate from so

Answer 1

等待大神答复