Javascript ES6使用回调重用导出

假设我有两个JavaScript文件，如下所示，它们都是从fileimport.js导入的（可重用性）

目标是，fileimport.js在每个页面上运行一个事件侦听器。我想在事件运行后为每个页面调用自定义函数

file1.js

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

callback(){
   //run custom function
 }

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

 callback(){
   //run custom function
 }

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

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

import * as file1 from './file1';

ReusableFunc1(){
 ....
}

eventListener() {
   file1.callback();
}

file2.js

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

callback(){
   //run custom function
 }

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

 callback(){
   //run custom function
 }

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

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

import * as file1 from './file1';

ReusableFunc1(){
 ....
}

eventListener() {
   file1.callback();
}

fileimport.js

---

我尝试在fileimport.js中添加回调（），并在常规页面中覆盖，但没有成功（它没有调用常规页面函数）。我怎样才能做到这一点。

如果你有一个提供代码的文件

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

，其中提供了在

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*

中的任何一个，而之前未触发回调，则会确保出现错误。

问题是

回调

未在fileimport.js中定义。为了实现这一点，你需要循环依赖，但我建议你小心对待它们，因为，引用我建议你阅读的内容：

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

如果您不需要在导入时调用

回调

函数，那么您不应该遇到很多问题

也就是说，这将是通过函数实现所需功能的代码：

file1.js

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

callback(){
   //run custom function
 }

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

 callback(){
   //run custom function
 }

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

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

import * as file1 from './file1';

ReusableFunc1(){
 ....
}

eventListener() {
   file1.callback();
}

fileimport.js

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

callback(){
   //run custom function
 }

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

 callback(){
   //run custom function
 }

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

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

import * as file1 from './file1';

ReusableFunc1(){
 ....
}

eventListener() {
   file1.callback();
}

---

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

问题是

回调
未在fileimport.js中定义。为了实现这一点，你需要循环依赖，但我建议你小心对待它们，因为，引用我建议你阅读的内容：

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

如果您不需要在导入时调用
回调
函数，那么您不应该遇到很多问题

也就是说，这将是通过函数实现所需功能的代码：

file1.js

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

callback(){
   //run custom function
 }

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

 callback(){
   //run custom function
 }

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

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


import * as file1 from './file1';

ReusableFunc1(){
 ....
}

eventListener() {
   file1.callback();
}


fileimport.js

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

callback(){
   //run custom function
 }

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

 callback(){
   //run custom function
 }

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

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


import * as file1 from './file1';

ReusableFunc1(){
 ....
}

eventListener() {
   file1.callback();
}


如您所见，如果有很多回调函数，问题仍然存在。如果需要调用的函数数量增加，我建议您更改代码体系结构，以避免与其他模块有太多依赖关系。
您的意思是，
它不起作用。
？错误是什么？您尝试的实际代码是什么？使用自执行函数（eventListener（）{callback（）；}）（）错误是callback（）未找到。因为它不是在fileimport中定义的。我不能在这里定义它，因为它现在知道该做什么了。我想调用原始js页面来完成调用。如果我在fileimport中定义它，它会调用它，但它不知道该做什么，因为每个页面都是customized@MissakBoyajian你的问题解决了吗？如果没有，我们可以进一步讨论。否则，如果我的回答帮助了你，请考虑接受它。你是什么意思，<代码>它没有解决< /代码>？错误是什么？您尝试的实际代码是什么？使用自执行函数（eventListener（）{callback（）；}）（）错误是callback（）未找到。因为它不是在fileimport中定义的。我不能在这里定义它，因为它现在知道该做什么了。我想调用原始js页面来完成调用。如果我在fileimport中定义它，它会调用它，但它不知道该做什么，因为每个页面都是customized@MissakBoyajian你的问题解决了吗？如果没有，我们可以进一步讨论。否则，如果我的回答对你有帮助，请考虑接受。谢谢你的回答。但我还是不明白你做了什么。在A.js中，我有这样的表单提交监听器。addEventListener（'submit'，函数（e）{callback}）。单击我想在自定义页面中执行一些操作。是吗