JS动态导入模块后能否将其方法绑定到局部作用域无需引用module参数

解决方案 #

JS语法层面完全支持该需求，最推荐的实现方式是对动态导入返回的模块对象进行解构：

方案1：Promise then 参数解构（兼容所有支持动态导入的环境） #

$('some-id').on('click', () => {
  import("./module.js")
    .then(({ method, method2, method3 }) => {
      // 直接调用即可，无需携带module前缀
      method()
      method2()
      method3()
    })
})

方案2：async/await 写法（代码更简洁，无嵌套） #

$('some-id').on('click', async () => {
  const { method, method2, method3 } = await import("./module.js")
  method()
  method2()
  method3()
})

方案3：with 语法（不推荐，仅做可行性展示） #

如果模块导出方法非常多，不想逐个声明解构字段，可以用with语法实现，但存在以下缺陷：

• 严格模式下直接禁用该语法
• 会模糊变量作用域，降低代码可读性，提升维护成本
• 会造成引擎编译优化失效，带来性能损耗

$('some-id').on('click', () => {
  import("./module.js")
    .then((module) => {
      with(module) {
        method()
        method2()
        method3()
      }
    })
})

额外说明 #

动态导入的模块会被浏览器自动缓存，多次触发点击事件只会发起一次网络请求，不会有重复加载的性能问题。

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