前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小记 TypeScript 中的循环引用问题

小记 TypeScript 中的循环引用问题

作者头像
用户2615200
发布2020-10-15 11:15:18
5.6K0
发布2020-10-15 11:15:18
举报
文章被收录于专栏:tkokof 的技术,小趣及杂念

随着项目规模的不断增长,循环引用问题似乎总是不可避免,本文就 TypeScript 中可能出现的循环引用问题做了一些简单记录~

平时编写 TypeScript 代码时,一般都倾向于使用模块(Module),通过结合使用 import 和 export 我们便可以方便的进行模块的导入和导出.

举个简单的例子,假设我们有以下的 TypeScript 代码文件(A.ts):

代码语言:javascript
复制
export class A {
    // methods here
}

可以看到,上述代码使用 export 导出了类型 A,如果我们需要在另外的 TypeScript 代码文件(B.ts)中使用类型 A,我们可以直接使用 import :

代码语言:javascript
复制
import { A } from "./A.ts"

class B {
    // use A here
}

接着我们让代码变的复杂一些,假设现在类型 A 也要使用类型 B 了,那么相关的代码可能会变成这样:

代码语言:javascript
复制
import { B } from "./B.ts"

export class A {
    // use B here
}
代码语言:javascript
复制
import { A } from "./A.ts"

export class B {
    // use A here
}

此时,类型 A 与 类型 B 便产生了循环引用,一般来讲是应该尽量避免的,但是在较大型的项目中往往又很难规避,所以我们需要一种可以处理循环引用问题的方法(之前关于这个话题自己也写过一篇博文),而实际上,TypeScript 中的 import 和 export 是可以处理循环引用的:

当 import 遇到导入完毕或者说正在导入的模块(文件)时,是直接返回导入结果的(尽管这个结果可能是不完整的),而不是递归的进行模块的导入操作,还是拿上面的代码举例,假设我们首先导入 A 模块:

  • A 模块尝试导入 B 模块
  • 由于 B 模块尚未导入,程序开始导入 B 模块
  • B 模块尝试导入 A 模块
  • 由于 A 模块正在导入,所以程序直接返回当前导入结果(尽管当前结果是不完整的)
  • 将类型 B 加入到 B 模块的导出数据中(export class B)
  • B 模块导入完成,继续 A 模块的导入
  • 将类型 A 加入到 A 模块的导出数据中(export class A)
  • A 模块导入完成

值得注意的是,上述的这种循环引用处理方式是不完备的,该方式并不能正确处理更复杂一些的循环引用情况(主要是在一些需要及时访问模块导出数据的情况下,譬如类继承(extends),静态引用等等)

考虑下面的循环引用情况:

代码语言:javascript
复制
import { C } from "./C.ts"

export class A {
    // use C here
}
代码语言:javascript
复制
import { A } from "./A.ts"

export class B extends A {
    // methods here
}
代码语言:javascript
复制
import { B } from "./B.ts"

export class C extends B {
    // methods here
}

假设我们首先导入 A.ts,我们来分析下导入流程:

  • A 模块尝试导入 C 模块
  • 由于 C 模块尚未导入,所以我们开始导入 C 模块
  • C 模块尝试导入 B 模块
  • 由于 B 模块尚未导入,所以我们开始导入 B 模块
  • B 模块尝试导入 A 模块
  • 由于 A 模块正在导入,所以程序直接返回当前导入结果
  • B 模块继承 A 模块,尝试在当前(A 模块)导入结果中访问类型 A 的定义
  • 但是当前(A 模块)导入结果中并没有类型 A 的定义(因为当前 A 模块的导入还没有进行到 export class A)
  • Ops,导入出错(找不到类型 A 的定义) …

对于上面这种情况,其实有一个技巧可以解决上面的问题:在不需要及时访问模块导出数据的情况下,我们可以将模块的导入操作后置.

就上面的例子来讲,我们可以这么修改代码:

代码语言:javascript
复制
export class A {
    // use C here
}

// put import after export
import { C } from "./C.ts"
代码语言:javascript
复制
import { A } from "./A.ts"

export class B extends A {
    // methods here
}
代码语言:javascript
复制
import { B } from "./B.ts"

export class C extends B {
    // methods here
}

我们再来分析下上面代码的导入流程(仍然假设首先导入 A.ts):

  • A 模块将类型 A 加入到 A 模块的导出数据中(export class A)
  • A 模块尝试导入 C 模块
  • 由于 C 模块尚未导入,所以我们开始导入 C 模块
  • C 模块尝试导入 B 模块
  • 由于 B 模块尚未导入,所以我们开始导入 B 模块
  • B 模块尝试导入 A 模块
  • 由于 A 模块正在导入,所以程序直接返回当前导入结果
  • 类型 B 继承 类型 A ,尝试在当前(A 模块)导入结果中访问类型 A 的定义
  • 当前(A 模块)导入结果中存在类型 A 的定义, 类型 B 可以正常定义导出
  • B 模块将类型 B 加入到 B 模块的导出数据中(export class B)
  • B 模块导入完成,继续 C 模块的导入
  • 类型 C 继承 类型 B,尝试在当前(B 模块)导入结果中访问类型 B 的定义
  • 当前(B 模块)导入结果中存在类型 B 的定义, 类型 C 可以正常定义导出
  • C 模块导入完成, 继续 A 模块的导入
  • A 模块导入完成

但是如果我们尝试首先导入 B 模块(B.ts)的话,仍然会遇到导入出错的问题:

  • B 模块尝试导入 A 模块
  • 由于 A 模块尚未导入,所以我们开始导入 A 模块
  • A 模块尝试导入 C 模块
  • 由于 C 模块尚未导入,所以我们开始导入 C 模块
  • C 模块尝试导入 B 模块
  • 由于 B 模块正在导入,所以程序直接返回当前导入结果
  • 类型 C 继承 类型 B,尝试在当前(B 模块)导入结果中访问类型 B 的定义
  • 但是当前(B 模块)导入结果中并没有类型 B 的定义(因为当前 B 模块的导入还没有进行到 export class B)
  • Ops,导入出错(找不到类型 B 的定义) …

这种情况下,我们已经不能通过后置 import 来解决问题了(因为类型 B 和 类型 C 的定义导出都需要及时访问导入模块的导出数据),我们只能通过改变模块的导入顺序来规避导入出错的问题 …

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/10/09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档