如何使 ES6 模块导出的函数在 dom 中可用？

Question

我在 Chrome 中使用 ES6 模块。我有一个简单的前端应用程序，它只使用 vanilla html、JS 和 material 组件用于 Web。

在 app.js 我有

import {
  slideToGetCode,
} from './animations.js';

在模块 animations.js 中，我有：


const slideToGetCode = () => {                                                                            
  setUsernameOnAccountRecovery();                                                                         

  setTimeout(() => {
    const loginContainerSlider = clearAnimationStates();                                                  
    loginContainerSlider.classList.add('slide-left-recover');                                             
  }, 250);                                                                                                
};


export {
  slideToGetCode,
};

在index.html中，我有

<script type="module" src="js/app.js"></script>
<script type="module" src="js/animations.js"></script>
<button "mdc-button" onclick="slideToGetCode()">Forgot Password?</button>

但是，当我点击按钮时，我得到 (index):171 Uncaught ReferenceError: slideToGetCode is not defined。如何使 slideToGetCode() 在 ES6 模块的 dom 中可用？

Answer 1

首先，老实说，我觉得忘记密码和任何其他按钮应该作为组件出现，而不是硬编码在 index.html 文件中。

不过我认为下面应该可行。请参阅 animations.js 文件中的建议更改。

文件animations.js.

const slideToGetCode = () => {                                                                            
  setUsernameOnAccountRecovery();                                                                         

  setTimeout(() => {
    const loginContainerSlider = clearAnimationStates();                                                  
    loginContainerSlider.classList.add('slide-left-recover');                                             
  }, 250);                                                                                                
};

window.slideToGetCode = slideToGetCode;
export {
  slideToGetCode,
};

文件index.html

<script src="js/animations.js"></script>
<button "mdc-button" onclick="() => slideToGetCode()">Forgot Password?</button>

希望对您有所帮助。

Answer 2

您还可以更新 app.js la:

import {
  slideToGetCode,
} from './animations.js';

const button = document.querySelector('button');
button.addEventListener('click', sideToGetCode);

这将使您不必挂起 window 的任何内容或将任何事件侦听器放入 HTML。

如何使 ES6 模块导出的函数在 dom 中可用？

How to make ES6 Module exported function available in the dom?

javascript

google-chrome

es6-modules