Question

我正面临一种情况，我需要在JavaScript的多个函数的开头和结尾添加相同的代码块。 e.g。

function funcA () {
    // code block 1
    ...

    // code unique to funcA
    ...

    // code block 2
    ...
}

function funcB () {
    // code block 1
    ...

    // code unique to funcB
    ...

    // code block 2
    ...
}

function funcC () {
    // code block 1
    ...

    // code unique to funcC
    ...

    // code block 2
    ...
}

我想知道在这里使用什么样的正确模式来减少重复。

Answer 1

它称为提取方法重构。

function block1() 
{
  // code block 1
}

function block2() 
{
  // code block 2
}

function funcA () {
    block1();

    // code unique to funcA
    ....

    block2();
}
function funcB () {
    block1();

    //   code unique to funcB
    ....

    block2();
}
function funcC () {
    block1();

    //   code unique to funcC
    ....

    block2();
}

Answer 2

您可以使用其他功能为您构建功能：

function makeFunc( specialProcessing ) {
  return function() {
    // block 1
    specialProcessing( x, y, z );
    // block 2
  };
}

var func1 = makeFunc( function( x, y, z ) {
  // stuff for func1
});

var func2 = makeFunc( function( x, y, z ) {
  // stuff for func2
});

Answer 3

如果这些块中有相当大的代码块可以普遍应用于每个函数，只需更改正在使用的变量，那么您应该将这些代码块提取到单独的方法中。这样做的好处是可以促进代码重用，提高代码的可读性，并使测试和调试变得更加容易，特别是如果您遵循测试驱动的开发理念，甚至只是运行自己的功能测试。良好的软件工程和设计始终是创建小方法的目标，这些方法在许多地方都很有用，可以减少您必须完成的工作并减少代码中的错误数量。

Answer 4

可以将块提取到函数并使用apply方法调用。这将保持上下文并转发传递给原始函数的任何参数。

function funcA() {
    block1.apply(this, arguments);

    // specific code to funcA

    block2.apply(this, arguments);
}

参数将包含传递给父函数

的所有参数

Answer 5

如果你知道它总是会被设置成这样，并且你不想让它内部有实际的函数调用，或者有些将会有不同的顺序我总是喜欢设置一个函数来交织它函数呼唤我。

jsFiddle DEMO

// Set up dynamically to handle calling any number of functions
// in whatever order they are specified in the parameters
// ie: setupFunctionOrder(func1, func2, func3, func4);

function setupFunctionOrder () {
    for (i = 0; i < arguments.length; i++) {
        arguments[i]();
    }
}

function block1 () { log('\nblock1 - running'); }
function block2 () { log('block2 - running'); }
function funcA () { log('funcA - running'); }

// ** Useage:
// now we make the actual call to set up the ORDER of calling -funcA-
setupFunctionOrder(block1, funcA, block2);

Answer 6

只需传递您想要独特的功能即可。像这样：

function reusableFunc(fn) {
    //reused code block here
    fn();
    //reused code block here
}

var myResuableFunc1 = function (args) {
    reusableFunc(function () { 
        //do your business here.    
    });
};


var myResuableFunc2 = function (args) {
    reusableFunc(function () { 
        //do your business here.    
    });
};

//Or another way
function myResuableFunc3(args) {
    reusableFunc(function () { 
        //do your business here
    });
}

然后，您可以根据需要使用共享代码创建任意数量的函数，并通过闭包的功能，以您喜欢的方式传递这些新创建的函数。

将相同的代码添加到多个函数中

6 个答案: