JavaScript中的模块
在学习TypeScript的模块之前我们先看看在JavaScript中的模块是如何实现的。
模块的好处
首先我们要了解使用模块的好处都有什么?
- 模块化、可重用;
- 封装变量与函数;
下面的示例为使用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();
使用模块要注意下面几点:
- 使用module包含的代码被存放到指定名称的命名空间中;
- 模块中需要外部访问的接口和类都需要添加关键字export;
- 外部要使用和访问模块中的类或接口必须将命名空间也写上;
我们看看对应的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