TypeScript 模块-modules 了解

TypeScript 中的模块-modules ，这个也是根据 JavaScript 中的 module 模式而来的

源码

首先回顾在 JavaScript 中 Module 的使用方法

• Module.js

//这个是在 JavaScript 对 Module 概念的引入
//Module 模式：
//1. 模块化
//2. 封装变量和函数

//匿名函数的闭包
(function() {
    //内部代码
}());

//变量
var a;//全局的
function hello(){
    var b;//局部的
    c;//全局的
}

//为了使其变得不那么的杂乱使用下面的匿名函数带入全局变量的方式使其变得较为的整洁，使用起来也方便了很多
(function($,w){
    //内部代码
}(jQuery,window);
//但是上面的这种方式其实在实际的使用起来也是非常的不舒服，所以下面就使用到了 module

• JSModule.js

//在这里实际的书写一个 JS 的 Module 的用法
var xcModule = function(vip) {
    //声明私有成员
    var Yvip = document.getElementById(vip);
    //这里 return 之后这个对象里面的东西就变成外面可以访问的公开的成员了
    return{
        //公开成员
        add:function(t){
            if(t>=12){
                var Yv = t;
                Yvip.innerHTML = '年费' + Yv;
            }else{
                var Mv = t;
                Yvip.innerHTML = '月费' + Mv;
            }
        }
    }
};
//下面实例化使用上面定义的对象
var jm = new xcModule('vip');//vip 为 html 中元素的 id 值
//调用方法
//jm.add(10);//这里的参数指的是几个月
jm.add(12);//这里的参数指的是几个月

• HTML

• 浏览器效果图

image.png

image.png

接着在 JSModule.js 文件中稍作修改

//在这里实际的书写一个 JS 的 Module 的用法
var xcModule = function(vip) {
    //声明私有成员
    var Yvip = document.getElementById(vip);
    //在这里新增一个全局的变量 测试下在外面是否可以访问的到
    YQ = '1234567890';
    //这里 return 之后这个对象里面的东西就变成外面可以访问的公开的成员了
    return{
        //公开成员
        add:function(t){
            if(t>=12){
                var Yv = t;
                Yvip.innerHTML = '年费' + Yv + '__QQ群：' + YQ;
            }else{
                var Mv = t;
                Yvip.innerHTML = '月费' + Mv;
            }
        }
    }
};
//下面实例化使用上面定义的对象
var jm = new xcModule('vip');//vip 为 html 中元素的 id 值
//调用方法
// jm.add(10);//这里的参数指的是几个月
jm.add(12);//这里的参数指的是几个月
//测试是否可以获取到 YQ 属性
console.log(jm.YQ);//这里输出的是 undefined 证明是获取不到的，这样就证明了 return 出来才是可以被外部所访问到的

• 浏览器效果图

image.png

image.png

image.png

下面使用官方的小实例来说明 TypeScript 中的 Module

• TSModule.ts

//使用官方的小实例来说明 TypeScript 中的 Module
//在这里使用的是字符串的验证例子
// //先声明一个接口
// interface StringValidator{
//  //声明一个参数为 string 类型，返回值为 boolean 类型的函数
//  isAcceptable(s:string):boolean;
// }
// //声明正则匹配的变量
// var lettersRegexp = /^[A-Za-z]+$]/;//验证字母
// var numberRegexp = /^[0-9]+$]/;//验证数字
// //创建一个验证字母的类实现上面的接口
// class LettersOnlyValidator implements StringValidator{
//  //复写上面接口中的函数
//  isAcceptable(s:string):boolean{
//      return lettersRegexp.test(s);//返回使用正则表达式验证后的结果 true || false
//  }
// }
// //创建一个验证数字的类实现上面的接口
// class ZipCodeValidator implements StringValidator{
//  //复写上面接口中的函数
//  isAcceptable(s:string):boolean{
//      return s.length === 5 && numberRegexp.test(s);//字符串的长度等于5的 boolean 结果 与 使用正则表达式验证后的结果，如果都为 true 则返回 true 否则返回 false
//  }
// }
// //上面的例子满足不了需求过多时的情况，而且因为比较的乱很容易出现错误
//下面使用 TypeScript 的 Module 来实现上面的功能
//使用关键字 module 来进行创建
var Validation;
(function (Validation) {
    // 声明正则匹配的变量
    var lettersRegexp = /^[A-Za-z]+$]/; //验证字母
    var numberRegexp = /^[0-9]+$]/; //验证数字
    // 创建一个验证数字的类实现上面的接口
    var LettersOnlyValidator= /** @class */ (function () {
        function LettersOnlyValidator() {
        }
        //复写上面接口中的函数
        LettersOnlyValidator.prototype.isAcceptable = function (s) {
            return lettersRegexp.test(s); //返回使用正则表达式验证后的结果 true || false
        };
        return LettersOnlyValidator;
    }());
    Validation.LettersOnlyValidator= LettersOnlyValidator;
    //创建一个验证数字的类实现上面的接口
    var ZipCodeValidator = /** @class */ (function () {
        function ZipCodeValidator() {
        }
        //复写上面接口中的函数
        ZipCodeValidator.prototype.isAcceptable = function (s) {
            return s.length === 5 && numberRegexp.test(s); //字符串的长度等于5的 boolean 结果 与 使用正则表达式验证后的结果，如果都为 true 则返回 true 否则返回 false
        };
        return ZipCodeValidator;
    }());
    Validation.ZipCodeValidator = ZipCodeValidator;
})(Validation || (Validation = {}));
//上面的就是使用 TypeScript 实现的上面 JavaScript 实现的功能，只是语法上的差异，主要思想都是一样的 

• TSModule.js 这个是上面的 .ts 文件编译后的源码

//使用官方的小实例来说明 TypeScript 中的 Module
//在这里使用的是字符串的验证例子
// //先声明一个接口
// interface StringValidator{
//  //声明一个参数为 string 类型，返回值为 boolean 类型的函数
//  isAcceptable(s:string):boolean;
// }
// //声明正则匹配的变量
// var lettersRegexp = /^[A-Za-z]+$]/;//验证字母
// var numberRegexp = /^[0-9]+$]/;//验证数字
// //创建一个验证字母的类实现上面的接口
// class LettersOnlyValidator implements StringValidator{
//  //复写上面接口中的函数
//  isAcceptable(s:string):boolean{
//      return lettersRegexp.test(s);//返回使用正则表达式验证后的结果 true || false
//  }
// }
// //创建一个验证数字的类实现上面的接口
// class ZipCodeValidator implements StringValidator{
//  //复写上面接口中的函数
//  isAcceptable(s:string):boolean{
//      return s.length === 5 && numberRegexp.test(s);//字符串的长度等于5的 boolean 结果 与 使用正则表达式验证后的结果，如果都为 true 则返回 true 否则返回 false
//  }
// }
// //上面的例子满足不了需求过多时的情况，而且因为比较的乱很容易出现错误
//下面使用 TypeScript 的 Module 来实现上面的功能
//使用关键字 module 来进行创建
var Validation;
(function (Validation) {
    // 声明正则匹配的变量
    var lettersRegexp = /^[A-Za-z]+$]/; //验证字母
    var numberRegexp = /^[0-9]+$]/; //验证数字
    // 创建一个验证数字的类实现上面的接口
    var LettersOnlyValidator = /** @class */ (function () {
        function LettersOnlyValidator() {
        }
        //复写上面接口中的函数
        LettersOnlyValidator.prototype.isAcceptable = function (s) {
            return lettersRegexp.test(s); //返回使用正则表达式验证后的结果 true || false
        };
        return LettersOnlyValidator;
    }());
    Validation.LettersOnlyValidator= LettersOnlyValidator;
    //创建一个验证数字的类实现上面的接口
    var ZipCodeValidator = /** @class */ (function () {
        function ZipCodeValidator() {
        }
        //复写上面接口中的函数
        ZipCodeValidator.prototype.isAcceptable = function (s) {
            return s.length === 5 && numberRegexp.test(s); //字符串的长度等于5的 boolean 结果 与 使用正则表达式验证后的结果，如果都为 true 则返回 true 否则返回 false
        };
        return ZipCodeValidator;
    }());
    Validation.ZipCodeValidator = ZipCodeValidator;
})(Validation || (Validation = {}));
//上面的就是使用 TypeScript 实现的上面 JavaScript 实现的功能，只是语法上的差异，主要思想都是一样的