javascript - 使用给定参数执行函数

Question

我想知道是否有人可以帮助我改进这段代码，在我看来这不是一个很好执行的函数，有没有办法减少这个函数的行数？

这是我的功能:

function changeStyling(input, changeSelector, elementCssChange, pixels) {
   if(!reload){
    if(changeSelector === '.exit-intent-wrapper' && elementCssChange === 'background') {
        this.base64PopupBGImg = null, document.querySelector(changeSelector).style[elementCssChange] = `${input.value}`;
    }

    pixels ? 
        document.querySelector(changeSelector).style[elementCssChange] = `${input.value}px` : 
        document.querySelector(changeSelector).style[elementCssChange] = `${input.value}`;
  } else {
    pixels[i] ? document.querySelector(changeSelector[i]).style[elementCssChange[i]] = `${input[i].value}px` : document.querySelector(changeSelector[i]).style[elementCssChange[i]] = input[i].value;
    for (i = 0; i < arguments.length; i++) {
    }
}

}

这就是我在重新加载时执行它的方式:

changeStyling(
        [
            document.querySelector(".exitIntentWidth"), 
            document.querySelector(".exitIntentHeight"), 
            document.querySelector(".exitIntentRadius"),
            document.querySelector(".exitIntentPaddingAll"),
            document.querySelector(".exitIntentPadding"),
            document.querySelector(".exitIntentPaddingLeft"),
            document.querySelector(".exitIntentPaddingRight"),

            document.querySelector(".btnWidth"),
            document.querySelector(".btnHeight"),
            document.querySelector(".btnRadius"),
            document.querySelector(".btnColor"),
            document.querySelector(".btnTextColor")
        ], 
        [
            '.exit-intent-wrapper',
            '.exit-intent-wrapper',
            '.exit-intent-wrapper',
            '.exit-intent-wrapper',
            '.exit-intent-inner',
            '.exit-intent-inner',
            '.exit-intent-inner',

            '.button',
            '.button',
            '.button',
            '.button',
            '.button'
        ],
        [
            'width',
            'height',
            'borderRadius',
            'padding',
            'padding',
            'paddingLeft',
            'paddingRight',

            'width',
            'height',
            'borderRadius',
            'backgroundColor',
            'color'
        ],
        [ true, true, true, true, true, true, true, true, true, true, false, false ]
    );

有人知道如何减少函数的执行吗？

Answer 1

您的代码当前使用并行数组，这非常困惑且难以修改。我推荐多维数组或对象。

function changeStyling(input) {
   if(!reload){
    if(input.changeSelector === '.exit-intent-wrapper' && input.elementCssChange === 'background') {
        this.base64PopupBGImg = null, document.querySelector(input.changeSelector).style[input.elementCssChange] = `${input.el.value}`;
    }

    pixels ? 
        document.querySelector(changeSelector).style[input.elementCssChange] = `${input.el.value}px` : 
        document.querySelector(changeSelector).style[input.elementCssChange] = `${input.el.value}`;
  } else {
    pixels[i] ? document.querySelector(input.changeSelector[i]).style[input.elementCssChange[i]] = `${input.el[i].value}px` : document.querySelector(input.changeSelector[i]).style[input.elementCssChange[i]] = input.el[i].value;
    for (i = 0; i < arguments.length; i++) {
    }
}


changeStyling(
        [
            {
                el:document.querySelector(".exitIntentWidth"),
                changeSelector:'.exit-intent-wrapper',
                elementCssChange:'width'
                //Continue for any necessary modifications
            },
            {
                el:document.querySelector(".exitIntentWidth"),
                changeSelector:'.exit-intent-wrapper',
                elementCssChange:'width'
                //Continue for any necessary modifications
            },
        ]);

请注意，我尚未测试此代码，它可能无法按预期工作