• TypeScript学习笔记(七):模块


    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

  • 相关阅读:
    vscode的一些常用、神奇操作
    vue2.x中使用v-model进行父传子
    js设置,获取,删除cookies
    Linux虚拟机克隆后网卡UUID问题
    jQuery ajax 请求HttpServlet返回[HTTP/1.1 405 Method not allowed]
    byte、二进制、十进制数值之间的转换
    sqlite-jdbc jar包下载过程笔记
    windows系统bat方式启动tomcat出现java.lang.OutOfmemoryError:PermGen Space 错误
    DIV内容垂直居中
    在HTML中实现和使用遮罩层
  • 原文地址:https://www.cnblogs.com/hammerc/p/4908990.html
Copyright © 2020-2023  润新知