Question

我创建了一些es6模块：

module1.js
module2.js

这些模块会将内容加载到id =“root”

的div中

<div id="root"></div>

document.getElementById('root').innerHTML = (results);

我的问题是......

是否可以从onclick事件加载模块，例如：

<li onclick="loadModule('module1')">Load Module 1</li> //load module1.js
<li onclick="loadModule('module2')">Load Module 2</li> //load module2.js

如果是这样，我该怎么做？

Answer 1

在下面的例子中，我使用的是可以通过http获取的库，然后使用指向您要求的库的脚本附加html。如果模块是本地模块，那么您只需使用这些模块的文件路径。我假设这些模块与html一起被转换为某种built文件夹，因此您可以从那里访问。

＆＃13;

function loadModule(module) {
  var script = {
    'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',
    'knockout': 'https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js'
  }[module];
  document.body.innerHTML += `<script src=${script} type='text/javascript'><\/script>`;
  console.log(module + ' module loaded');
}

＆＃13;

<button onclick="loadModule('jquery')">Load jquery </button>
<button onclick="loadModule('knockout')">Load knockout.js </button>

＆＃13;

Answer 2

这是我在网上找到的最佳解决方案，上一个答案将脚本添加到页面的内部html中，并使其变得无用（我无法单击任何内容）

const myModule = './myModule.js';
import(myModule)
   .then(x => x.someMethod());

@leonardobrunolima https://medium.com/@leonardobrunolima/javascript-tips-dynamically-importing-es-modules-with-import-f0093dbba8e1的积分

Javascript ES6 onclick加载模块......可以做到吗？

2 个答案: