[英]Importing predefined functions into an ES6 module
第1部分:在我的主.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來轉換模塊。
這些被導入到定義選擇器功能的同一主.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
是否可以訪問模塊文件中的這些功能,而無需在每個模塊的頂部重寫它們?
干杯😀
是否可以在模塊文件中訪問這些功能?
否。它們在主模塊的范圍內。 您可以導出它們並將其導入其他模塊,但這不建議-它將對您的入口點產生循環依賴。
沒有在每個模塊的頂部重寫它們?
只需將它們放在自己的模塊中,然后將其導入到任何地方。
// 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) {
…
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.