JS：先调用某些函数，然后再调用文件中的其他每个函数

Question

我有一个关于在JS中更好地重复使用代码的问题。

例如，我的文件functions.js具有以下功能：

export const a = ()=>{...}
export const b = ()=>{...}
export const c = ()=>{...}
....
const foo = ()=>{...}

我想在此类中的每个函数之前调用foo（）函数。简单的解决方案是：

export const a = ()=>{foo() ...}
export const b = ()=>{foo() ...}
export const c = ()=>{foo() ...}

但是，如果我有3种功能呢？如何优化foo（）函数调用并在每次调用每个文件函数之前调用它？

Answer 1

您可以使用 a Proxy，其中目标是包含所有函数的一个对象，然后您可以使用gettrap 捕获来自该代理的每个函数调用。然后，您可以只导出该代理对象，而不是导出每个函数。

const a = (paramA, paramB) => console.log('a', paramA, paramB)
const b = () => console.log('b')
const c = () => console.log('c')

const foo = () => console.log('Foo')

const functions = new Proxy({a, b, c}, {
  get() {
    foo();
    return Reflect.get(...arguments);
  }
})

functions.a('foo', 'bar')
functions.c()

如果您想捕获被调用的函数参数并将这些参数传递给foo您，您可以从 get 方法返回一个代理函数，您可以在该方法中访问提供的参数，然后在内部调用 foo 并被调用函数。

const a = (paramA, paramB) => console.log('a', paramA, paramB)
const b = () => console.log('b')
const c = () => console.log('c')

const foo = (...params) => {
  console.log('Foo', params)
}

const functions = new Proxy({a, b, c}, {
  get(target, prop) {
    return function(...params) {
      foo(...params);
      target[prop].apply(null, params)
    }
  }
})

functions.a('foo', 'bar')
functions.c('baz')