如何将javaScript文件用作其他JavaScript文件的高阶包装器
我想问,在反应中,我们有HOC(高阶组件),我们在其中传递对其进行修改的组件,然后返回修改后的组件以供使用
我们可以在javaScript中做同样的事情吗?
例如
// index1.js
// this is file where i am importing all the folder modules and exporting them
export { methodA, methodB } from './xyzAB'
export { methodC, methodD } from './xyzCD'
我正在将此文件导入另一个这样的文件夹中
import * as allMethods from './modules'
// this allows me to use this syntax
allMethods.methodA()
allMethods.methodB()
这很好,但是我正在寻找这种包装器
// index2.js
// this is another file somewhere else where i want to use index1.js exported methods
import * as allMethods from './modules/xyz'
import anotherMethod from './somewhere/xyz'
// here i want customize some of `allMethods` functions and export them as new object
//which contains modifed version of default `index1.js` methods
allMethods.methodA = allMethods.methodA( anotherMethod ) // this is example of modified as HO Method
export default allMethods
[我的上述例子似乎令人困惑,为什么我要寻找这样的解决方案,我有一组实用程序,我试图将它们制成库并在多个项目中使用它们,
现在,某些utils依赖于与主要项目相关的事物,因此,与其给我的实用程序提供对其依赖项的硬编码参考,我想通过我的高阶方法或配置文件为不同的方法传递不同的依赖关系,这样每个新项目都可以从其配置文件或高阶包装器文件中传递其依赖的实用程序,如上所示。
我希望我能够解决我的问题,
我尝试过的几件事,我尝试将文件中的所有模块导入包装文件如果我尝试使用任何返回webpack错误的模块作为未定义方法,由于方法直到几秒钟才完全加载,我尝试了setTimeOut,效果很好,但这不是管理事物的有效方法,
然后我尝试了一些异步方式,我使用了动态import()
,它返回了promise,我使用了async / await语法,还使用了.then语法,但是无法提取数据并将其另存为变量(我可能做错了在这一步,但我完全失败了),但这仅在promise或async await范围内可用,
也尝试过其他步骤,
我希望我能找到一些更简洁的语法,如下所示
import * as F from '../../core/lib/functions' import { getModel } from '../entities' F.getKeys = F.getKeys( getModel ) export default F
欢迎任何建议
[我想问,在反应中,我们有HOC(高阶组件),我们在其中传递对其进行修改的组件,然后返回修改后的组件以供使用,我们可以在javaScript中做同样的事情吗?例如// ...
回答如下:我认为您正在寻找的是某种弯曲或类似工厂的模式。
发布评论