Javascript ES6 повторно использует экспорт с обратным вызовом

Question

Допустим, у меня есть 2 JavaScript-файла, подобные следующим, и оба они импортируются из fileimport.js (возможность повторного использования)

Цель - fileimport.js прослушиватель событий запускается на каждой странице.Я хочу вызывать пользовательские функции для каждой страницы после запуска события.

file1.js

import * as fileimport from './fileimport';
...  

callback(){
   //run custom function
 }

file2.js

import * as fileimport from './fileimport';
...

 callback(){
   //run custom function
 }

fileimport.js ...

export ReusableFunc1(){
 ....
}

export ReusableFunc2(){
 ....
}

export Func3{
     form.addEventListener('submit', function (e) { callback })// I want to call callback() for each of the pages that import this.
}

Я пытался добавить callback () внутри fileimport.js и переопределить на обычных страницах, но это не сработало (не вызывало обычныйфункции страниц).Как мне достичь чего-то подобного.

Answer 1

Проблема callback не определена в fileimport.js.Для этого вам понадобится круговая зависимость , но я предлагаю вам относиться к ним с осторожностью, поскольку, цитируя эту соответствующую статью , которую я предлагаю вам прочитать:

Они не всегда злые, но вы можете относиться к ним с особой тщательностью.Они вызывают тесную связь взаимозависимых модулей.Эти типы модулей сложнее понять и использовать повторно, поскольку это может вызвать волновой эффект, когда локальное изменение одного модуля имеет глобальные эффекты.

Если вам не нужно вызывать callbackфункция во время импорта, вы не должны создавать много проблем.

При этом, это будет код для достижения того, что вы хотите с помощью функции:

file1.js

import * as fileimport from './fileimport';
...  

export function callback() {
   //run custom function
}

fileimport.js

import * as file1 from './file1';

ReusableFunc1(){
 ....
}

eventListener() {
   file1.callback();
}

Как видите, проблема остается, если у вас много функций обратного вызова.Если количество функций, которые вам нужно вызывать, увеличивается, я предлагаю вам изменить архитектуру кода, чтобы она не зависела от других модулей.

Answer 2

Если у вас есть файл A.js, содержащий код, который используется в B.js и C.js, тогда этот файл загружается и анализируется только один раз . Таким образом, вызов функции в A.js будет запущен только один раз, когда файл загружен.

Если вы хотите вызывать функцию, предоставляемую A.js всякий раз, когда код из A.js где-то включен, вы не можете использовать прослушиватель событий, поскольку его нет.

Одна вещь, которую вы всегда можете сделать, это запускать нужную функцию »вручную« всякий раз, когда вы импортируете A.js.

//A.js
const fx1 = () => {}
const fx2 = () => {}
const callback = () => {}

export { callback }
export default { fx1, fx1 }


//B.js

import { * as CodeFromA, callback } from 'A.js';

callback();

Другая вещь может состоять в том, чтобы изменить экспорт A.js на что-то вроде:

export default () => {
  callback();
  return { ReusableFunc1, ReusableFunc2 }
}

Таким образом, вы можете:

 import CodeFromA from 'A.js'
 const ReusableFx = CodeFromA();

Это гарантировало бы, что вы получите ошибку, если попытаетесь использовать любой из этих ReusableFunc* без вызова обратного вызова до этого.