【发布时间】:2018-07-26 17:19:58
【问题描述】:
假设我有文件结构:
- products
-- index.ts
-- fooProduct.ts
-- barProduct.ts
-- wootProduct.ts
在每个“产品”文件中,都有获取产品sku 的方法和对象创建者以及可能特定于产品的其他内容。这是针对 React 项目的,因此我避免将课程作为最佳实践状态(对于经典的 OO 人来说,这是一个艰难的过渡)。
例子:
// products/fooProduct.ts
export interface FooProduct extends BaseProduct { //base defined in index
//...
}
function getFooProductSku(){
}
function createFooProduct(){
}
function doFooStuff(){
}
在我的索引文件中,我正在导出所有内容
// products/index.ts
export * from './fooProduct';
export * from './fooProduct';
export * from './fooProduct';
我正在努力解决的问题是,这会导致我的依赖文件中的导入非常混乱:
// dep-file.ts
import { FooProduct, createFooProduct, getFooProductSku, doFooStuff,
BarProduct, createBarProduct, getBarProductSku,
WootProduct, createWootProduct, getWootProductSku } from './products'
上面的内容看起来并不可怕,但实际上,对于一个更复杂的领域,它变得笨拙且难以阅读。我认为更大的问题是查看哪些函数紧密耦合的唯一方法是通过命名约定(EG Foo 前缀)。
为了解决这个问题,我将我的方法嵌套在一个导出的对象中,所以我上面的类现在看起来像这样:
export interface FooProduct extends BaseProduct { //base defined in index
//...
}
export const fooProduct = {
getProductSku: () => {
},
createProduct: () => {
},
doStuff: () => {
}
}
这允许我从函数名称中删除Foo,现在相同的依赖导入现在看起来像这样,无论添加了哪些其他方法:
// dep-file.ts
import { FooProduct, fooProduct,
BarProduct, barProduct,
WootProduct, wootProduct } from './products'
我认为这可以更好地实现我的目标,但我不相信这实际上是一个好的做法,或者想知道是否有更好的方法来实现类似的目标?
【问题讨论】:
-
为什么要从索引中导出所有内容?
-
@SLaks 当我第一次开始这个项目时,我在某个地方看到了这一点。即使我不这样做,而是直接从不同的模块导入所有不同的功能也不能解决问题。真正让人感觉笨拙的并不是 import 语句,而更重要的是代码中散落的函数,没有表明什么是紧密耦合的(由于前缀,这个问题在我的示例中可能不清楚)。也许这很正常,我只需要习惯它。
-
已更新以使我正在尝试解决的问题更加清晰
标签: typescript es6-modules code-organization