导读:最近在玩Three.js,想把我们的3D检索,做成一个在线的公共平台。所以在可视化上,希望用Three.js来完成。我从来没写过js的代码。结果,在module的这个模式下遇到一个小坑,在这里记录一下。

1、一个简单的例子

下面的代码是W3school里的案例。很简单。

<!DOCTYPE html> <html> <body> <h2>我的第一段 JavaScript</h2> <button type="button" onclick="show1()"> 点击这里来显示日期和时间 </button> <p id="demo"></p> <script> function show1(){ document.getElementById('demo').innerHTML = Date(); } </script> </body> </html>

简单运行,点击按钮会显示时间。

javascriptapi设计(javascriptmodule模式调用的一个小坑)(1)

但是如果把模块改成module,会出错。

<!DOCTYPE html> <html> <body> <h2>我的第一段 JavaScript</h2> <button type="button" onclick="show1()"> 点击这里来显示日期和时间 </button> <p id="demo"></p> <script type="module"> function show1(){ document.getElementById('demo').innerHTML = Date(); } </script> </body> </html>

终端显示,找不到show1这个函数。

javascriptapi设计(javascriptmodule模式调用的一个小坑)(2)

2、问题的解决

经过多方查找,终于发现问题。module模式下,外部调用需要传递给window一个新的名称才行。

正确的代码如下:

<!DOCTYPE html> <html> <body> <h2>我的第一段 JavaScript</h2> <button type="button" onclick="show1()"> 点击这里来显示日期和时间 </button> <p id="demo"></p> <script type="module"> function show1(){ document.getElementById('demo').innerHTML = Date(); } window.show1=show1 </script> </body> </html>

3、结论

在使用Threejs过程中,遇到很多坑。大约还是业余的原因,就像刚开始学python一样。

但是,除去性能上的问题,js确实很强大。

,