Javascript ES6 使用回调重用导出答案

【问题标题】：Javascript ES6 reuse exports with callbackJavascript ES6 使用回调重用导出
【发布时间】：2019-03-11 09:57:23
【问题描述】：

假设我有 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() 并在常规页面中覆盖，但没有成功（它没有调用常规页面函数）。我怎样才能实现这样的目标。

【问题讨论】：

你是什么意思，it did not work out？错误是什么？您尝试的实际代码是什么？
使用自执行函数 (eventListener() { callback(); })()
错误是找不到回调（）。因为它没有在文件导入中定义。我不能在那里定义它，因为它现在知道该做什么。我想回调到原来的js页面完成调用。
如果我在文件导入中定义它，它会调用它，但它不知道该怎么做，因为每个页面都是自定义的
@MissakBoyajian 你的问题解决了吗？如果没有，我们可以进一步讨论。否则，如果我的回答对你有帮助，请考虑采纳。

标签： javascript ecmascript-6 callback

【解决方案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* 而不触发回调，这将确保您得到错误。

【讨论】：

您好，感谢您的回答。但我仍然对你做了什么感到困惑。在 A.js 中，我有这样的表单提交侦听器。 form.addEventListener('submit', function (e) { callback })。单击时，我想在自定义页面中执行某些操作。你回答了两种答案吗？或者他们是一样的？

【解决方案2】：

问题是callback 没有在fileimport.js 中定义。你需要 循环依赖 来实现这一点，但我建议你小心对待它们，因为引用 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();
}

如您所见，如果您有很多回调函数，问题仍然存在。如果你需要调用的函数数量增加，我建议你改变你的代码架构，不要对其他模块有太多的依赖。

【讨论】：