JavaScript中的模块

在学习TypeScript的模块之前我们先看看在JavaScript中的模块是如何实现的。

模块的好处

首先我们要了解使用模块的好处都有什么？

1. 模块化、可重用；
2. 封装变量与函数；

下面的示例为使用JavaScript实现的模块：

 1 var MyModule = function(name)
 2 {
 3     //这里定义的都是私有的成员
 4     var myName = name;
 5     var age = 25;
 6
 7     //这里返回一个对象, 使用 JS 的闭包实现类的效果
 8     return {
 9         //这里都是公开的成员
10         show:function()
11         {
12             alert(myName + ":" + age);
13         }
14     };
15 }
16
17 //创建一个实例
18 var obj = new MyModule("LiLei");
19 obj.show();

TypeScript中的模块

在TypeScript中，定义模块使用关键字module，通过模块我们可以更加有效的组织代码。比如当我们的项目越来越大时，我们把所有的类都暴露在全局命名空间下，难免会出现同名等冲突的情况，当我们使用模块后可以解决这个问题。

 1 module Validation
 2 {
 3     export interface StringValidator
 4     {
 5         isAcceptable(s: string): boolean;
 6     }
 7
 8     var lettersRegexp = /^[A-Za-z]+$/;
 9     var numberRegexp = /^[0-9]+$/;
10
11     export class LettersOnlyValidator implements StringValidator
12     {
13         isAcceptable(s: string)
14         {
15             return lettersRegexp.test(s);
16         }
17     }
18
19     export class ZipCodeValidator implements StringValidator
20     {
21         isAcceptable(s: string)
22         {
23             return s.length === 5 && numberRegexp.test(s);
24         }
25     }
26 }
27
28 function run()
29 {
30     // Some samples to try
31     var strings = [‘Hello‘, ‘98052‘, ‘101‘];
32     // Validators to use
33     var validators: { [s: string]: Validation.StringValidator; } = {};
34     validators[‘ZIP code‘] = new Validation.ZipCodeValidator();
35     validators[‘Letters only‘] = new Validation.LettersOnlyValidator();
36     // Show whether each string passed each validator
37     strings.forEach(s =>
38     {
39         for (var name in validators)
40         {
41             console.log(‘"‘ + s + ‘" ‘ + (validators[name].isAcceptable(s) ? ‘ matches ‘ : ‘ does not match ‘) + name);
42         }
43     });
44 }
45
46 run();

使用模块要注意下面几点：

1. 使用module包含的代码被存放到指定名称的命名空间中；
2. 模块中需要外部访问的接口和类都需要添加关键字export；
3. 外部要使用和访问模块中的类或接口必须将命名空间也写上；

我们看看对应的js文件：

 1 var Validation;
 2 (function (Validation) {
 3     var lettersRegexp = /^[A-Za-z]+$/;
 4     var numberRegexp = /^[0-9]+$/;
 5     var LettersOnlyValidator = (function () {
 6         function LettersOnlyValidator() {
 7         }
 8         LettersOnlyValidator.prototype.isAcceptable = function (s) {
 9             return lettersRegexp.test(s);
10         };
11         return LettersOnlyValidator;
12     })();
13     Validation.LettersOnlyValidator = LettersOnlyValidator;
14     var ZipCodeValidator = (function () {
15         function ZipCodeValidator() {
16         }
17         ZipCodeValidator.prototype.isAcceptable = function (s) {
18             return s.length === 5 && numberRegexp.test(s);
19         };
20         return ZipCodeValidator;
21     })();
22     Validation.ZipCodeValidator = ZipCodeValidator;
23 })(Validation || (Validation = {}));
24 function run() {
25     // Some samples to try
26     var strings = [‘Hello‘, ‘98052‘, ‘101‘];
27     // Validators to use
28     var validators = {};
29     validators[‘ZIP code‘] = new Validation.ZipCodeValidator();
30     validators[‘Letters only‘] = new Validation.LettersOnlyValidator();
31     // Show whether each string passed each validator
32     strings.forEach(function (s) {
33         for (var name in validators) {
34             console.log(‘"‘ + s + ‘" ‘ + (validators[name].isAcceptable(s) ? ‘ matches ‘ : ‘ does not match ‘) + name);
35         }
36     });
37 }
38 run();
39 //# sourceMappingURL=app.js.map

当然TypeScript的模块还有其它的用法，可以参考：http://www.typescriptlang.org/Handbook#modules