18

我多年来一直在使用 C#,并且主要习惯于按类型处理单个文件的方式。我也喜欢将文件放入子文件夹(对应于 C# 中的命名空间)。

但是现在我正在使用 TypeScript 构建一个移动 Web 应用程序,并且发现自己以几乎相同的方式构建我的代码。但是,这不太好用:

  • 每个文件都会生成一个模块包装器,因此如果您有许多具有相同模块的文件,则输出(捆绑时)包含许多不必要的代码行。
  • 在其他模块中引用类型.. 不如在 C# 中好,因为您必须在类型名称前加上模块名称。

第一点应该可以通过编写一个小工具从捆绑输出中去除不必要的模块包装器来解决。而且我认为我需要避免使用子模块,只需将所有内容都粘贴到一个模块中,而不管文件系统位置如何。

有没有比我目前正在做/计划的更好的方法来构建 TypeScript 代码,或者像上面这样的推荐做法?对于喜欢单一职责原则的人来说,有哪些值得考虑的替代方案?

PS:我希望这符合 SO 的指导方针,尽管可能有点主观和开放。

4

2 回答 2

14

这是我的建议。

网站

如果您在网站上使用 TypeScript,请使用模块来封装完整且独立的功能块并将其保存在一个文件中(除非它变得无法管理)。对于“模块 a”对“模块 b”内部位的访问量要保守。

将所有生成的 JavaScript 捆绑并压缩到一个文件中。

声明你的模块:

module MyModule {
    // ...
}

并使用参考使它们可用于其他代码文件:

///<reference path="MyModule.ts" />

网络应用

对于 Web 应用程序,您需要决定脚本繁重的内容将是多少。如果事情要轻量级,请将其视为网站。如果您将有很多脚本,那么 AMD 是您的朋友。

使用 AMD,您可以使用文件夹结构来组织您的代码。您的文件是您的模块,因此您无需使用module MyModule声明,而是将文件命名为MyModule.ts. 然后,您可以使用文件夹和文件结构组织代码并根据需要导入模块:

import myModule = module("./Messaging/Async/MyModule");

所以把 theimport当作你的using陈述——除非你需要给它一个名字。

在运行时,您需要一些东西来为您加载模块。RequireJS是一个流行的选择。

您只需在页面中添加一个脚本标签,它会加载 RequiresJS 并告诉它您的顶级模块的名称:

<script data-main="/Messaging/Async/MyModule" src="scripts/require.js"></script>

服务器应用

对于服务器应用程序,您几乎肯定会想要使用 CommonJS(例如,默认情况下由 nodejs 支持)。

它的工作原理与 AMD(AMD 实际上基于 CommonJS)非常相似,只是服务器会为您加载模块,因此您不需要包含模块加载脚本。

金子弹

这真的是所有的指导。如果您愿意,您可以对非常大的程序使用网站样式捆绑 - 鉴于脚本将被下载一次并被缓存,您可能会认为前期成本值得简单。

因此,请使用该指南,直到您认为它不适合您的特定程序并且想要以不同的方式做事。指导原则是...

  1. 减少对网站的 http 请求数
  2. 增加 Web 应用程序/服务器应用程序的可读性和可维护性
  3. 仅加载 Web 应用程序/服务器应用程序所需的内容
于 2012-12-18T09:41:34.827 回答
1

这是相当主观的,但值得我们或多或少地使用模块作为命名空间,因此将相关的类组合在一个文件中,除了在我们的视图模型中,我们或多或少地坚持一个文件 = 一个类,就像我们会对于 C#。

原因之一是在客户端开发中,我们发现自己创建了许多非常小的类和接口(通常每个只有两个或三个参数),通常围绕特定组件或视图的工作进行分组,并将它们整理到单个文件似乎更有意义。

于 2012-12-18T09:43:39.037 回答