我怎样才能缩短这个 JS 代码以使其更具可读性？答案

【问题标题】：How can I possible shorten this JS code to be more readable?我怎样才能缩短这个 JS 代码以使其更具可读性？
【发布时间】：2022-12-19 15:28:02
【问题描述】：

我有以下代码：

    ctrl = {
        dataHolder: {
            hide: _ => {
                this.dataHolderTarget.style.display = 'none'
            },
            show: _ => {
                this.dataHolderTarget.style.display = 'block'
            }
        },
        dataBtnHolder: {
            hide: _ => {
                this.dataBtnHolderTarget.style.display = 'none'
            },
            show: _ => {
                this.dataBtnHolderTarget.style.display = 'block'
            }
        },
        playerOneBtn: {
            hide: _ => {
                this.playerOneBtnTarget.style.display = 'none'
            },
            show: _ => {
                this.playerOneBtnTarget.style.display = 'block'
            },
            load: res=>{
                this.dataset.res=res
            }
        },
        playerTwoBtn: {
            hide: _ => {
                this.playerTwoBtnTarget.style.display = 'none'
            },
            show: _ => {
                this.playerTwoBtnTarget.style.display = 'block'
            },
            load: res=>{
                this.dataset.res=res
            }
        }
    }

我怎样才能不重复那些代码块？正如我对 DRY 的了解，这段代码看起来有些难看。如您所见，hide 和show 无处不在。最后 2 个元素具有 load 功能。

【问题讨论】：

this.playerTwoBtnTarget 和其他元素是如何分配的？ ctrl 是怎么称呼的？此外，这可能更适合Code Review

标签： javascript

【解决方案1】：

您可以将重复的隐藏/显示代码重构为单独的函数。

然后，您可以重构为给定元素创建一个 {hide: ..., show: ...} 对象到一个单独的函数中：

function toggleVisibility(element, displayValue) {
  element.style.display = displayValue;
}

function makeHideShow(target) {
  return {
    hide: () => toggleVisibility(target, "none"),
    show: () => toggleVisibility(target, "block"),
  };
}

ctrl = {
  dataHolder: makeHideShow(this.dataHolderTarget),
  dataBtnHolder: makeHideShow(this.dataBtnHolderTarget),
  playerOneBtn: {
    ...makeHideShow(this.playerOneBtnTarget),
    load: (res) => this.dataset.res = res,
  },
  playerTwoBtn: {
    ...makeHideShow(this.playerTwoBtnTarget),
    load: (res) => this.dataset.res = res,
  },
};

【讨论】：

【解决方案2】：

避免在此代码中重复自己的一种方法是将常用功能提取到单独的函数中，然后从对象属性中调用这些函数。例如，您可以将隐藏和显示功能提取到单独的函数中，如下所示：

function hideElement(target) {
  target.style.display = 'none';
}

function showElement(target) {
  target.style.display = 'block';
}

然后你可以像这样在你的对象中使用这些函数：

ctrl = {
  dataHolder: {
    hide: _ => hideElement(this.dataHolderTarget),
    show: _ => showElement(this.dataHolderTarget),
  },
  dataBtnHolder: {
    hide: _ => hideElement(this.dataBtnHolderTarget),
    show: _ => showElement(this.dataBtnHolderTarget),
  },
  playerOneBtn: {
    hide: _ => hideElement(this.playerOneBtnTarget),
    show: _ => showElement(this.playerOneBtnTarget),
    load: res => (this.dataset.res = res),
  },
  playerTwoBtn: {
    hide: _ => hideElement(this.playerTwoBtnTarget),
    show: _ => showElement(this.playerTwoBtnTarget),
    load: res => (this.dataset.res = res),
  },
};

这样，您可以避免重复隐藏和显示代码块，并且您的代码将更易于阅读和维护。

【讨论】：