Question

我是ES6模块的新手，请您告诉我如何从网页上的ES6模块导入功能，然后在按钮上的点击事件中使用该功能。

到目前为止，我已将此模块定义在名为（ES6Part3Module.js）的文件中：

export function sayHello() {
return "hi there folks";
}

然后在我的html页面中，我以这种方式加载了模块：

`<script src="ES6Part3Module.js" type="module"`>`</script`>

我现在想要一些为页面上的按钮创建点击处理程序的方法：

`<button id="sayHelloButton"`>Say Hello`</click`>

从我的ES6模块调用sayHello（）函数。

我尝试在我的页面上创建一个本地（模块）脚本：

`<script type="module"`>
import sayHello from "ES6Part3Module.js";
window.hello = sayHello;
`</script`>

然后在加载运行的页面上有一些jquery：

$( function() {

$("#sayHelloButton").click(function() {
alert(hello());
});

});

但是当单击html页面上的按钮时，我收到错误，说没有定义hello。

请你让我知道我做错了什么？

Answer 1

以下是使用旧版system.js的答案。我会对使用新版system.js的答案感兴趣。

<!--
ref (https://livebook.manning.com/#!/book/angular-2-development-with-typescript/chapter-2/159, p 159, listing2.7)
-->
<!--unpkg is a fast, global content delivery network for everything on npm-->
<script src="//unpkg.com/es6-promise@3.0.2/dist/es6-promise.js"></script>
<script src="//unpkg.com/traceur@0.0.111/bin/traceur.js"></script>
<!--system js, version that was released in 21/08/2016-->
<script src="//unpkg.com/systemjs@0.19.37/dist/system.src.js"></script>

<script>
System.import('./ES6Part3Module.js').then(ES6Part3Module => {
  window.hello = ES6Part3Module.sayHello;
});
</script>

<script>
$( function() {

$("#sayHelloButton").click(function() {
alert(hello());
});

});
</script>

Answer 2

您实际上非常接近解决方案。
设置window.hello=sayHello;（可以在模块内部完成，不需要内联模块即可）之后，只需将按钮的click事件设置为window.hello（而不只是问候），就可以了甚至不需要使用JQuery，您可以这样做：

<button onclick="window.hello()">Say Hello</button>

如何在load事件的html页面中加载es6模块

2 个答案: