JavaScript中的模块

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

模块的好处

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

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

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

 var MyModule = function(name)

 {

     //这里定义的都是私有的成员

     var myName = name;

     var age = 25;

     //这里返回一个对象, 使用 JS 的闭包实现类的效果

     return {

         //这里都是公开的成员

         show:function()

         {

             alert(myName + ":" + age);

         }

     };

 }

 //创建一个实例

 var obj = new MyModule("LiLei");

 obj.show();

TypeScript中的模块

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

 module Validation

 {

     export interface StringValidator

     {

         isAcceptable(s: string): boolean;

     }

     var lettersRegexp = /^[A-Za-z]+$/;

     var numberRegexp = /^[0-9]+$/;

     export class LettersOnlyValidator implements StringValidator

     {

         isAcceptable(s: string)

         {

             return lettersRegexp.test(s);

         }

     }

     export class ZipCodeValidator implements StringValidator

     {

         isAcceptable(s: string)

         {

             return s.length === 5 && numberRegexp.test(s);

         }

     }

 }

 function run()

 {

     // Some samples to try

     var strings = ['Hello', '98052', '101'];

     // Validators to use

     var validators: { [s: string]: Validation.StringValidator; } = {};

     validators['ZIP code'] = new Validation.ZipCodeValidator();

     validators['Letters only'] = new Validation.LettersOnlyValidator();

     // Show whether each string passed each validator

     strings.forEach(s =>

     {

         for (var name in validators)

         {

             console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);

         }

     });

 }

 run();

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

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

我们看看对应的js文件：

 var Validation;

 (function (Validation) {

     var lettersRegexp = /^[A-Za-z]+$/;

     var numberRegexp = /^[0-9]+$/;

     var LettersOnlyValidator = (function () {

         function LettersOnlyValidator() {

         }

         LettersOnlyValidator.prototype.isAcceptable = function (s) {

             return lettersRegexp.test(s);

         };

         return LettersOnlyValidator;

     })();

     Validation.LettersOnlyValidator = LettersOnlyValidator;

     var ZipCodeValidator = (function () {

         function ZipCodeValidator() {

         }

         ZipCodeValidator.prototype.isAcceptable = function (s) {

             return s.length === 5 && numberRegexp.test(s);

         };

         return ZipCodeValidator;

     })();

     Validation.ZipCodeValidator = ZipCodeValidator;

 })(Validation || (Validation = {}));

 function run() {

     // Some samples to try

     var strings = ['Hello', '98052', '101'];

     // Validators to use

     var validators = {};

     validators['ZIP code'] = new Validation.ZipCodeValidator();

     validators['Letters only'] = new Validation.LettersOnlyValidator();

     // Show whether each string passed each validator

     strings.forEach(function (s) {

         for (var name in validators) {

             console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);

         }

     });

 }

 run();

 //# sourceMappingURL=app.js.map

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

巴特西

TypeScript学习笔记（七）：模块

JavaScript中的模块

模块的好处

TypeScript中的模块

最新文章

热门文章