将预定义的函数导入ES6模块

Question

第1部分：在我的master.js文件中，我设置了几个快捷方式函数：

// Selector shortcuts - mimic jQuery style selectors but using more modern, standard code
const $  = ( selector, scope = document ) => scope.querySelector( selector );
const $$ = ( selector, scope = document ) => scope.querySelectorAll( selector );
const on = ( el, type, listener ) => el.addEventListener( type, listener );

第2部分：

我使用ES6模块将我的站点的代码划分为逻辑的、可管理的块。目前，我在当地的构建设置是使用Parcel，我相信它使用Babel来传输模块。

这些被导入到定义选择器函数的同一个master.js文件中：

// Selector shortcuts - mimic jQuery style selectors but using more modern, standard code
const $  = ( selector, scope = document ) => scope.querySelector( selector );
const $$ = ( selector, scope = document ) => scope.querySelectorAll( selector );
const on = ( el, type, listener ) => el.addEventListener( type, listener );
// Load components
import BGVideo    from './BGVideo';
import FieldLabel from './FieldLabel';
// Invoke components
on( document, 'DOMContentLoaded', ( e ) => {
$$( '[data-background-video]' ).forEach( ( el ) => {
new BGVideo( el );
} );
$$( '.c-form__item' ).forEach( ( el ) => {
new FieldLabel( el );
} );
} );

这些在master.js文件中工作得很好，但在模块文件中则不然——任何使用它们的尝试都会在控制台中触发错误，例如Uncaught ReferenceError: $ is not defined

是否可以访问模块文件中的这些函数，而无需在每个模块的顶部重写它们？

干杯😀

Answer 1

是否可以访问模块文件中的这些函数？

否。它们在主模块的范围内。您可以导出它们并在其他模块中导入它们，但这是不可取的——这会在您的入口点上创建循环依赖关系。

而不在每个模块的顶部重写它们？

只需将它们放在自己的模块中，然后将其导入所有位置。

// dom_helpers.js
/* Selector shortcuts - mimic jQuery style selectors but using more modern, standard code */
export const $  = (selector, scope = document) => scope.querySelector(selector);
export const $$ = (selector, scope = document) => scope.querySelectorAll(selector);
export const on = (el, type, listener) => el.addEventListener(type, listener);

// master.js
// Load components
import initBGVideo from './BGVideo';
import initFieldLabel from './FieldLabel';
import {$$, on} from './dom_helpers';
// Invoke components
on(document, 'DOMContentLoaded', e => {
for (const el of $$('[data-background-video]')) {
initBGVideo(el);
}
for (const el of $$('.c-form__item')) {
initFieldLabel(el);
}
});

// BGVideo.js
import {$, $$, on} from './dom_helpers';
export default function init(el) {
…
}