Модуль загрузки Javascript ES6 onclick… это можно сделать?

Question

Модуль загрузки Javascript ES6 onclick… это можно сделать?

1

Я создал несколько модулей es6:

module1.js
module2.js

Эти модули будут загружать контент в div с id = "root"

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

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

Мой вопрос...

Можно ли загружать модули из как onclick event, например:

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

Если да, то как я могу это сделать?

dj2017 07 июнь 2017, в 23:38

Источник

Теги:

javascript

ecmascript-6

1 ответ

Ещё вопросы

Mμ. · Accepted Answer · 2017-06-07T19-53-00.000Z

В следующем случае я использую библиотеки, которые вы можете получить через http, а затем добавьте html со сценарием, который указывает на нужную вам библиотеку. Если модуль является локальным, вы просто используете путь к файлу этих модулей. Я предполагаю, что эти модули передаются в какую-то built папку вместе с html, поэтому вы можете получить доступ, если оттуда.

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 и обратный вызов, который уведомляет потребителя, что скрипт успешно загружен