TypeScript基础入门之命名空间(二)

栏目: JavaScript · 发布时间: 7年前

内容简介:继续上篇文章[当应用变得越来越大时,我们需要将代码分离到不同的文件中以便于维护。现在,我们把Validation命名空间分割成多个文件。 尽管是不同的文件,它们仍是同一个命名空间,并且在使用的时候就如同它们在一个文件中定义的一样。 因为不同文件之间存在依赖关系,所以我们加入了引用标签来告诉编译器文件之间的关联。 我们的测试代码保持不变。

继续上篇文章[ TypeScript基础入门之命名空间(一) ]

跨文件拆分

当应用变得越来越大时,我们需要将代码分离到不同的文件中以便于维护。

多文件名称空间

现在,我们把Validation命名空间分割成多个文件。 尽管是不同的文件,它们仍是同一个命名空间,并且在使用的时候就如同它们在一个文件中定义的一样。 因为不同文件之间存在依赖关系,所以我们加入了引用标签来告诉编译器文件之间的关联。 我们的测试代码保持不变。

Validation.ts

namespace Validation {
  export interface StringValidator {
    isAcceptable(s: string): boolean;
  }
}

LettersOnlyValidator.ts

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

namespace Validation {
  const letterRegexp = /^[A-Za-z]+/;

  export class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string): boolean {
      return letterRegexp.test(s);
    }
  }
}

ZipCodeValidator.ts

/// <reference path="Validation.ts" />
namespace Validation {
  export const numberRegexp = /^[0-9]+$/;

  export class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string): boolean {
      return s.length === 5 && numberRegexp.test(s);
    }
  }
}

Test.ts

/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />

// 测试数据
let strings = ["Hello", "98052", "101"];
// 
let validators:{ [s: string]: Validation.StringValidator } = {};
validators["zip code validator"] = new Validation.ZipCodeValidator();
validators["letter validator"] = new Validation.LettersOnlyValidator();

strings.forEach((e) => {
  for (let name in validators) {
    console.log(`"${e}" - ${ validators[name].isAcceptable(e) ? "matches" : 'does not match'} ${name}`)
  }
});

编译运行后的结果如下

$ tsc --outFile src/module_demo/Test.js src/module_demo/Test.ts
$ node src/module_demo/Test.js
"Hello" - does not match zip code validator
"Hello" - matches letter validator
"98052" - matches zip code validator
"98052" - does not match letter validator
"101" - does not match zip code validator
"101" - does not match letter validator

一旦涉及多个文件,我们需要确保加载所有已编译的代码。

有两种方法可以做到这一点。

首先,我们可以使用--outFile标志使用连接输出将所有输入文件编译为单个JavaScript输出文件:

tsc --outFile sample.js Test.ts

编译器将根据文件中存在的引用标记自动 排序 输出文件。

您还可以单独指定每个文件:

tsc --outFile sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts

或者,我们可以使用每个文件编译(默认)为每个输入文件发出一个JavaScript文件。

如果生成了多个JS文件,我们需要在我们的网页上使用<script>标签以适当的顺序加载每个发出的文件,例如:

<script src="Validation.js" type="text/javascript" />
<script src="LettersOnlyValidator.js" type="text/javascript" />
<script src="ZipCodeValidator.js" type="text/javascript" />
<script src="Test.js" type="text/javascript" />

未完待续...


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

图解网站分析(修订版)

图解网站分析(修订版)

[日] 小川卓 / 沈麟芸 / 人民邮电出版社 / 2014-10 / 69.00元

本书以图配文,结合实例详细讲解了如何利用从网站上获取的各种数据了解网站的运营状况,如何从数据中攫取最有用的信息,如何优化站点,创造更大的网站价值。本书适合各类网站运营人员阅读。 第1 部分介绍了进行网站分析必备的基础知识。第2 部分详细讲解了如何明确网站现状,发现并改善网站的问题。第3 部分是关于流量获取和网站内渠道优化的问题。第4 部分介绍了一些更加先进的网站分析方法,其中详细讲解了如何分......一起来看看 《图解网站分析(修订版)》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具