解决: 如何让浏览器模块脚本"module" 中的方法 ,被按钮访问到
方法1 把事件付给 window对象
原因是<script type="module" >模块会自动延迟加载
也就是会晚于 普通的<script> 而且只加载一次,
所以 按钮无法访问到
<script type="module" >
import HylAudio from './hylaudio.js';
...
//可以被访问
window.recordStart = function() { HylAudio .recordStart(); };
//record() 函数无法被访问
function record () { HylAudio .recordStart(); };
...
</script>
...
<button onclick="recordStart()">开始录制</button>
<button onclick="record ()">开始录制</button>
...
方法二 后绑定事件
利用 module 加载滞后的特点
使用 document.getElementById(“bt_start”).οnclick= 事件 写法 ,后绑定事件
<script type="module" >
function recordStart() { HylAudio .recordStart(); };
document.getElementById("bt_start").onclick=recordStart;
</script>
方法三
在 script type=“module” 中 , 利用vue 的框架 简化绑定代码
原理同方法2
<script type="module" >
import ....;
....
let options={}
Vue.createApp(options).mount('#app');
....
</script>