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.
}

我尝试在fileimport.js中添加callback（）并在常规页面中覆盖，但它没有工作（它没有调用常规页面函数）。我怎样才能实现这样的目标。

Answer 1

如果你有一个文件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*而不触发之前的回调，那将确保您收到错误。

Answer 2

问题是在fileimport.js中没有定义callback。你需要循环依赖才能实现这一目标，但我建议你小心对待它们，因为引用this relevant article我建议你阅读：

它们并不总是邪恶的，但你可能想要特别小心地对待它们。它们导致相互依赖的模块的紧密耦合。这些类型的模块更难以理解和重用，因为这样做可能会导致一个模块的局部更改产生全局影响的连锁反应。

如果你不需要在导入时调用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();
}

如您所见，如果您有很多回调函数，问题仍然存在。如果您需要调用的函数数量增加，我建议您更改代码体系结构，以免与其他模块有如此多的依赖关系。