生成DOM元素时替代JavaScript `with`语句的可行方案

嘿，这个需求我太懂了——想直接调用domlib里的DOM创建方法，又不想把这些方法一股脑丢进全局作用域造成污染，with看起来像是为这个场景设计的，但它的缺陷实在太多（性能损耗、变量歧义、严格模式下禁用），完全没必要用。给你几个更安全优雅的替代方案：

1. 用IIFE+解构赋值，隔离局部作用域 #

这是最经典的解决方案，把你需要的方法从domlib里解构出来，放到自执行函数的局部作用域里，既不用写domlib.xxx，也不会污染全局：

// 只解构你实际用到的方法，更轻量化
(function() {
  const { createDiv, createSpan, createButton, createFooter } = domlib;

  // 现在可以直接调用这些方法
  const container = createDiv({ className: 'page-container' });
  const actionBtn = createButton({ 
    text: 'Submit', 
    onClick: () => console.log('Clicked!') 
  });

  container.appendChild(actionBtn);
  document.body.appendChild(container);
})();

这个方案的好处是精准控制引入的方法，完全隔离作用域，不会和全局变量产生冲突。

2. ES模块环境下直接导入方法 #

如果你的项目用了ES Modules（现代前端项目基本都这么做），直接按需导入domlib的方法就行，模块化天然帮你隔离作用域：

// 从domlib模块导入需要的方法
import { createDiv, createSpan, createButton } from './domlib.js';

// 直接调用，无需前缀
const header = createDiv({ className: 'site-header' });
const userAvatar = createSpan({ className: 'avatar' });

header.appendChild(userAvatar);
document.body.appendChild(header);

这是最符合现代前端开发规范的方式，代码清晰，依赖明确，还能让打包工具（比如Webpack、Vite）做Tree Shaking，去掉没用到的代码。

3. 用短变量别名简化调用 #

如果需要用到domlib的大部分方法，解构太麻烦，可以给domlib起一个短别名，既减少代码长度，又不会污染全局：

// 给domlib起个短别名，比如d、dl都可以
const d = domlib;

// 调用时用d.xxx代替domlib.xxx，简洁很多
const card = d.createDiv({ className: 'card' });
const cardTitle = d.createH2({ text: 'Card Title' });
const cardContent = d.createP({ text: 'This is card content.' });

card.appendChild(cardTitle);
card.appendChild(cardContent);
document.body.appendChild(card);

这个方案非常灵活，代码可读性也高，别人看一眼就知道d指代domlib，不会产生歧义。

4. 在类/对象中挂载方法 #

如果你的DOM构建逻辑是封装在类里的，可以把domlib的方法挂载到类实例上，在实例方法里直接调用：

class PageBuilder {
  constructor() {
    // 把domlib的所有方法挂载到当前实例
    Object.assign(this, domlib);
  }

  buildMainSection() {
    // 直接用this调用domlib的方法
    const main = this.createDiv({ className: 'main-section' });
    const title = this.createH1({ text: 'Welcome to My Site' });
    const desc = this.createP({ text: 'This is a demo page built with domlib.' });

    main.appendChild(title);
    main.appendChild(desc);
    return main;
  }
}

const builder = new PageBuilder();
document.body.appendChild(builder.buildMainSection());

这个方案适合有大量DOM构建逻辑的场景，把方法都绑定到实例上，代码更整洁。

为什么不推荐用with？ #

最后再啰嗦两句：with语句会让JavaScript引擎无法进行代码优化，导致性能下降；而且当局部变量和domlib里的方法重名时，会出现变量歧义，很难排查问题；更重要的是，with在严格模式下是被禁止的，而严格模式现在是前端开发的标配。所以完全没必要冒这些风险用with。

内容的提问来源于stack exchange，提问作者Tomas Langkaas