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

navToggle.addEventListener('click', menuAnimate);

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

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

具体来说似乎是我在文件加载时永远不会期望执行的东西。如果需要绑定一个侦听器，则应该从模块中导出一个函数来执行它，然后在实际需要绑定侦听器时调用该函数。 e.g。

export default ...

模块的顶级范围应该具有自己的非常小的逻辑。单独加载模块不是应该具有副作用的东西，比如添加事件监听器。几乎是您唯一需要的时间是初始应用程序JS文件。

此外，正如评论中所述，因为你做了

import menuAnimate from

你想做

import

或保留您拥有的export function menuAnimate() {...}并执行

default

没有Merge。

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

1 个答案: