Vanilla JS：将querySelector获取的变量挂载到Window全局对象

问题 #

我需要写一个可复用函数，接收三个参数：

• 要被包裹的元素
• 包裹元素的类型
• 新包裹元素的id（用于后续访问）

核心需求是：在函数内部通过querySelector利用传入的id获取元素，并将该元素挂载到Window全局对象，省去额外的获取步骤。需确保选择器在元素创建完成后再定义，保持代码整洁。

目前遇到的问题：在自执行函数（var wrap = (function(params){...})(window);）和ES6箭头函数（var wrap = (params) => {...};）两种写法间纠结，始终无法实现将元素对象挂载到全局。已尝试添加timeout函数确保参数传入正常，且排除了元素未加载的问题。

解决方案 #

核心思路 #

无需纠结函数写法，关键是在包裹元素被添加到DOM之后，再执行获取和全局挂载操作。直接在函数内部完成元素创建、包裹、插入DOM的全流程，随后立即执行查询与挂载即可，不需要额外的timeout。

箭头函数实现示例 #

const wrapElement = (targetEl, wrapperType, wrapperId) => {
  // 创建并配置包裹元素
  const wrapper = document.createElement(wrapperType);
  wrapper.id = wrapperId;

  // 执行包裹逻辑：将目标元素移入新包裹元素
  targetEl.parentNode.insertBefore(wrapper, targetEl);
  wrapper.appendChild(targetEl);

  // 元素已插入DOM，此时查询并挂载到全局
  window[wrapperId] = document.querySelector(`#${wrapperId}`);
};

// 使用示例
const target = document.querySelector('#myTarget');
wrapElement(target, 'div', 'myWrapper');

// 全局直接访问 myWrapper
// console.log(myWrapper); // 输出对应的包裹元素

自执行函数实现示例 #

如果偏好自执行函数写法，可将函数作为返回值暴露：

const wrapElement = (function() {
  return function(targetEl, wrapperType, wrapperId) {
    const wrapper = document.createElement(wrapperType);
    wrapper.id = wrapperId;

    targetEl.parentNode.insertBefore(wrapper, targetEl);
    wrapper.appendChild(targetEl);

    window[wrapperId] = document.querySelector(`#${wrapperId}`);
  };
})();

// 使用方式与箭头函数版本一致

性能优化方案 #

如果想避免额外的DOM查询，可直接将创建好的wrapper对象挂载到全局，效率更高：

// 替换查询代码为：
window[wrapperId] = wrapper;

内容的提问来源于stack exchange，提问作者Michael Martell