导出默认值也在导出代码，导出函数正在其中使用

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';

说 "import this file, and let me access one function from it"。不会只导入文件的一部分。如果您不希望该文件中的其他内容运行，那么您应该将代码拆分为两个单独的文件，或者重新构建您的代码，使其在文件加载时不运行。

navToggle.addEventListener('click', menuAnimate);

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

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

模块的顶级作用域应该有自己的极少逻辑。单独加载模块不应该像添加事件侦听器那样产生副作用。几乎您唯一想要的是在初始应用程序 JS 文件中。

此外，如评论中所述，既然您这样做了

export default ...

你想做的事

import menuAnimate from

或者保留你拥有的 import 并做

export function menuAnimate() {...}

没有 default.

导出默认值也在导出代码，导出函数正在其中使用

Export default is also exporting code the exported function is being used in

javascript

module

mocha.js

chai

ecmascript-6