生成DOM元素时替代JavaScript`with`语句

Question

比如,我有一个JavaScript库来生成如下所示的DOM片段

<main>
  <h1>A heading</h1>
  <p>A paragraph</p>
</main>

库,domlib包含任何类型元素的方法,以及生成上述片段的函数可能如下所示:

function(domlib){
  return domlib.main(
    domlib.h1('A heading'),
    domlib.p('A paragraph')
  );
}

在这个函数中,我宁愿调用这样的domlib方法:

main(
  h1('A heading'),
  p('A paragraph')
)

为实现这一目标,我可以将所有方法domlib放在全局范围内,但我宁愿避免污染全局范围.对我而言,这似乎with是一个理想的解决方案:

function(domlib){
  with(domlib){
    return main(
      h1('A heading'),
      p('A paragraph')
    );
  }
}

虽然仍然受支持,但该with语句实际上已弃用,并将在严格模式下抛出错误.

我没有看到很多其他选项,除了将domlib方法分配给本地函数变量,但这很容易导致数十个局部变量的分配,在这种情况下,第一种方法(domlib直接调用方法)将导致更简单的代码.

我的问题是,是否有其他替代方案可以实现我想要的,具有与使用with语句类似的简单性和可读性？

Answer 1

我将使用的方法是通过解构明确列出我想要的元素.

例如,在你的情况下我会有这样的事情:

const component = ({main, h1, p}) => main(
  h1('A heading'),
  p('A paragraph')
);

这与做的类似

const component = (domlib) => {
  const {main, h1, p} = domlib;
  return main(
    h1('A heading'),
    p('A paragraph')
  );
};