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

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

如何只导出功能 block ？

Answer 1

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

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

navToggle.addEventListener('click', menuAnimate);

特别看起来像是我永远期望在文件加载时执行的事情。如果您需要绑定(bind)监听器，则应该从模块中导出一个函数来执行此操作，然后在实际希望绑定(bind)监听器时调用该函数。例如

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

模块的顶级范围应该有自己的最少逻辑。单独加载模块不会像添加事件监听器那样产生副作用。几乎您唯一需要的时间是在初始应用程序 JS 文件中。

此外，正如评论中提到的，因为您这样做

export default ...

你想做

import menuAnimate from 

或保留您拥有的导入

export function menuAnimate() {...}

没有默认。