求问：是否存在纯JavaScript驱动的封装式UI组件库？

你想要的这种完全通过JS实例化、配置、调用的UI组件工具其实早就存在，给你列几个贴合需求的：

• Bootstrap Native：基于原生Bootstrap样式做了JS封装，不用手动写一堆CSS类，直接用JS操作组件。比如弹窗：

  // 可以先动态创建DOM元素再初始化，或者用页面已有元素
  const modalElement = document.createElement('div');
  modalElement.innerHTML = `
    <div class="modal fade">
      <div class="modal-content">
        <div class="modal-body"></div>
        <div class="modal-footer"></div>
      </div>
    </div>
  `;
  document.body.appendChild(modalElement);
  
  const modal = new bootstrap.Modal(modalElement);
  // 设置弹窗文本
  modalElement.querySelector('.modal-body').textContent = 'Foobar';
  // 添加操作按钮
  const okBtn = document.createElement('button');
  okBtn.className = 'btn btn-primary';
  okBtn.textContent = 'OK';
  const cancelBtn = document.createElement('button');
  cancelBtn.className = 'btn btn-secondary';
  cancelBtn.textContent = 'Cancel';
  modalElement.querySelector('.modal-footer').append(okBtn, cancelBtn);
  
  modal.show();
  

  要是觉得手动创建基础DOM麻烦，你还可以再封装一层，把元素创建逻辑藏在类里，对外只暴露text、buttons这类简洁属性。
• SweetAlert2：专门做弹窗类组件，完全不用管底层HTML结构，调用方式就是纯JS配置：

  const result = await Swal.fire({
    title: 'Foobar',
    showCancelButton: true,
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel'
  });
  
  // 直接处理交互结果
  if (result.isConfirmed) {
    // 用户点击了OK
  }
  

  自带响应式、跨浏览器兼容，样式也支持定制。
• Flatpickr：轻量级日期选择器，纯JS初始化，同样支持动态创建的元素：

  const input = document.createElement('input');
  document.body.appendChild(input);
  
  const picker = flatpickr(input, {
    dateFormat: 'Y-m-d',
    defaultDate: '2024-01-01'
  });
  
  // 通过JS控制选择器状态
  picker.setDate('2024-05-01');
  

不用纠结复杂的像素截图，重点测组件的行为逻辑就行，用Jest+jsdom就能搞定：

• 测试初始化逻辑：比如调用组件构造函数后，是否正确生成DOM、添加了预期的CSS类
• 测试状态更新：比如修改modal.text后，DOM里的文本是否同步更新
• 测试交互行为：比如点击关闭按钮是否触发弹窗隐藏事件

举个简单的测试例子：

test('Modal文本更新正常', () => {
  const modal = new Modal();
  modal.text = 'Foobar';
  
  // 断言DOM文本是否正确
  expect(document.querySelector('.modal-body').textContent).toBe('Foobar');
});

test('调用show()后弹窗显示', () => {
  const modal = new Modal();
  modal.show();
  
  // 断言弹窗是否添加了显示类
  expect(modal.element.classList.contains('show')).toBe(true);
});

这类工具真的不少，只是很多UI库的文档会优先展示HTML写法（比如直接写带类的DOM），容易让人忽略它们的JS API。如果你自己封装基于Bootstrap/Tailwind的组件类也完全可行——内部用document.createElement创建元素、添加对应CSS类，对外暴露简洁的方法和属性，完全符合你的需求，而且定制性更强。

内容的提问来源于stack exchange，提问作者Jason Polites