导出默认也是导出正在使用导出函数的代码

Question

我有这个功能：

// menuAnimate() adds/removes the classes for the mobile menu animation
export default function menuAnimate() {...}

我正在将其导入我的 mocha 测试文件，如下所示：

import { menuAnimate } from '../src/scripts/nav';

但是，当我运行涉及 menuAnimate 的测试时，我收到一个错误：

/Users/johnsoct/Dropbox/Development/andybeverlyschool/src/scripts/nav.js:67
navToggle.addEventListener('click', menuAnimate);

TypeError: Cannot read property 'addEventListener' of null

此错误是从nav.js 内更下方的代码中引发的。

navToggle.addEventListener('click', menuAnimate);

如何只导出功能块？

Answer 1

import { menuAnimate } from '../src/scripts/nav';

说“导入这个文件，让我从中访问一个功能”。没有只导入文件的一部分。如果您不希望该文件中的其他内容运行，那么您应该将代码拆分为两个单独的文件，或者重新架构您的代码，使其在文件加载时不会运行。

navToggle.addEventListener('click', menuAnimate);

特别是我从不期望在文件加载时执行的操作。如果你需要绑定一个监听器，你应该从你的模块中导出一个函数来完成它，然后在你真正想要绑定监听器时调用该函数。例如

export function initNav() {
    var navToggle = ...
    navToggle.addEventListener('click', menuAnimate);
}

模块的顶级作用域应该有自己的极少逻辑。自己加载模块不应该有添加事件监听器之类的副作用。几乎唯一需要的就是在初始应用程序 JS 文件中。

另外，正如评论中提到的，既然你这样做了

export default ...

你想做的

import menuAnimate from 

或保留您现有的import 并使用

export function menuAnimate() {...}

没有default。