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

【问题标题】：Javascript ES6 onclick load module...can it be done?Javascript ES6 onclick 加载模块...可以做到吗？
【发布时间】：2017-11-09 09:52:06
【问题描述】：

我已经创建了几个 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

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

【问题讨论】：

你可以使用ajax。
见Exporting an ECMAScript module from a <script> element
这真的没有任何意义。模块不是应该从“onclick”HTML 属性调用的东西。您应该在需要它提供的功能的代码中导入模块。如果处理点击事件的代码需要使用module1 中的代码，它应该导入该代码，并在需要时加载该代码。见stackoverflow.com/questions/24543074/…。

标签： javascript ecmascript-6

【解决方案1】：

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

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');
}

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

【讨论】：

模块只会在onload事件触发后加载，innerhtml添加后不会加载。就个人而言，我宁愿通过 createElement 和一个回调来添加脚本，通知消费者脚本已成功加载

【解决方案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

【讨论】：