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

我尝试在文件import.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

问题是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();
}

如您所见，如果您有很多回调函数，问题仍然存在。如果需要调用的函数数量增加，建议您更改代码体系结构，使其对其他模块的依赖性不大。

带有回调的Javascript ES6重用导出

2 个答案: