【TypeScript】TypeScript 学习 4——模块

前端数据验证在改善用户体验上有很大作用，在学了之前的知识的时候，我们很可能会写出以下代码：

interface StringValidator {
    isAcceptable(s: string): boolean;
}

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

class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string) {
        return lettersRegexp.test(s);
    }
}

class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}

// Some samples to try
var strings = [‘Hello‘, ‘98052‘, ‘101‘];
// Validators to use
var validators: { [s: string]: StringValidator; } = {};
validators[‘ZIP code‘] = new ZipCodeValidator();
validators[‘Letters only‘] = new 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);
    }
});

那么这段代码最大的问题是什么呢？一个是没法复用，验证的封装和验证过程在同一个文件，验证的封装已经是可以复用的。另一个是接口和两个实现的类都直接挂接在全局变量上，假如数量一多的话，将会污染整个全局变量。

模块化就是为了解决这一问题而诞生的。

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);
        }
    }
}

// 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);
    }
});

我们使用 module 关键字来定义模块，用 export 关键字让我们的接口、类等成员对模块外可见。

这样，就只有模块名挂接在全局变量上，最大限度地避免污染全局变量了。

  • 分隔模块到多个文件

随着我们项目的扩展，我们的代码总不可能只写在一个文件里。为了更好地维护项目，我们会将特定功能放到一个文件里，然后加载多个功能实现我们想需要的功能。现在我们先将上面的代码分割到多个文件里。

Validation.ts

module Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
}

LettersOnlyValidator.ts

/// <reference path="Validation.ts" />
module Validation {
    var lettersRegexp = /^[A-Za-z]+$/;
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }
}

ZipCodeValidator.ts

/// <reference path="Validation.ts" />
module Validation {
    var numberRegexp = /^[0-9]+$/;
    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}

Test.ts

/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />

// 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);
    }
});

在项目中新建好以上四个文件，然后我们编译项目，如果我们代码编写没错的话，是能够编译通过的。另外，我们可以见到后面三个文件开头有类似于 C# 的文档注释，这是告诉 TypeScript 编译器该文件依赖于哪些文件，假如依赖的文件不存在的话，编译就会不通过。当然我们不写也是可以的，只不过编译器在编译时不会帮我们检查，一般来说，还是建议写上。

另外，在引用编译生成的 JavaScript 文件时，我们需要注意好顺序。以上面的代码为例，我们在 Html 代码中已经这么引用。

<script src="Validation.js" type="text/javascript" />
<script src="LettersOnlyValidator.js" type="text/javascript" />
<script src="ZipCodeValidator.js" type="text/javascript" />
<script src="Test.js" type="text/javascript" />

  • 外部模块

在上面的方式中，浏览器会把 4 个 JavaScript 都加载。但某些时候，我们并不需要全部都用上，应该实现按需加载。那么在 TypeScript 中如何实现呢，很简单，只需要稍微修改一下就行。

Validation.ts

export interface StringValidator {
    isAcceptable(s: string): boolean;
}

LettersOnlyValidator.ts

import validation = require(‘./Validation‘);
var lettersRegexp = /^[A-Za-z]+$/;
export class LettersOnlyValidator implements validation.StringValidator {
    isAcceptable(s: string) {
        return lettersRegexp.test(s);
    }
}

ZipCodeValidator.ts

import validation = require(‘./Validation‘);
var numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements validation.StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}

Test.ts

import validation = require(‘./Validation‘);
import zip = require(‘./ZipCodeValidator‘);
import letters = require(‘./LettersOnlyValidator‘);

// Some samples to try
var strings = [‘Hello‘, ‘98052‘, ‘101‘];
// Validators to use
var validators: { [s: string]: validation.StringValidator; } = {};
validators[‘ZIP code‘] = new zip.ZipCodeValidator();
validators[‘Letters only‘] = new letters.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);
    }
});

修改完之后，编译。。。不通过！

看官们可能觉得我坑爹了，辛辛苦苦敲这么一大段后，竟然编译不通过。这里，我们先说说模块加载的两种规范。

CommonJS 规范：

CommonJS 目标在于实现一个类似于 Python、Ruby 等语言的标准库。而 NodeJS 使用的就是这一规范。

var m = require(‘mod‘);
exports.t = m.something + 1;

AMD 规范：

由于上面的 CommonJS 规范所实现的加载是同步的，但实际上，我们的浏览器更需要的是异步加载，因此 AMD 规范应运而生。

define(["require", "exports", ‘mod‘], function(require, exports, m) {
    exports.t = m.something + 1;
});

那么 TypeScript 使用哪种规范呢？答案是两种都可以，看需要选择其中一种。

回到我们的项目，修改项目属性。

将这里修改为 AMD 或者 CommonJS，然后就可以通过编译了。

  • Export =

在上面的代码中，我们导出模块的根是文件，因此需要写成 zip.ZipCodeValidator 这种形式，那为什么不简化一下呢？直接用 ZipCodeValidator 多好。Export = 就可以帮助我们做这件事。

Validation.ts

export interface StringValidator {
    isAcceptable(s: string): boolean;
}

LettersOnlyValidator.ts

import validation = require(‘./Validation‘);
var lettersRegexp = /^[A-Za-z]+$/;
class LettersOnlyValidator implements validation.StringValidator {
    isAcceptable(s: string) {
        return lettersRegexp.test(s);
    }
}
export = LettersOnlyValidator;

ZipCodeValidator.ts

import validation = require(‘./Validation‘);
var numberRegexp = /^[0-9]+$/;
class ZipCodeValidator implements validation.StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}
export = ZipCodeValidator;

Test.ts

import validation = require(‘./Validation‘);
import zipValidator = require(‘./ZipCodeValidator‘);
import lettersValidator = require(‘./LettersOnlyValidator‘);

// Some samples to try
var strings = [‘Hello‘, ‘98052‘, ‘101‘];
// Validators to use
var validators: { [s: string]: validation.StringValidator; } = {};
validators[‘ZIP code‘] = new zipValidator();
validators[‘Letters only‘] = new lettersValidator();
// 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);
    }
});

  • 别名

module Shapes {
    export module Polygons {
        export class Triangle { }
        export class Square { }
    }
}

import polygons = Shapes.Polygons;
var sq = new polygons.Square(); // Same as ‘new Shapes.Polygons.Square()‘

这样写 import，下面的代码就可以简写一下。需要注意的是，不支持 require 引入的模块。

  • declare 关键字

有时候我们需要定义全局变量，那么我们就需要增加 declare 关键字。

declare ver myString;

那么 myString 变量就是全局的了。这功能在定义全局模块时很有作用。

时间： 2024-10-10 01:37:24

【TypeScript】TypeScript 学习 4——模块的相关文章

typescript handbook 学习笔记4

概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看中文文档或英文文档.我是看的英文文档. typescript handbook 学习笔记3 类 基本使用 class Greeter { //只读,必须在声明的时候或者constructor里面初始化 readonly greeting: string; //constructor里面的只读 con

typeScript基础学习

关于 TypeScript TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发,代码开源于 GitHub 上. 什么是 TypeScript TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript.编译出来的 JavaScript 可以运行在任何浏览器上.TypeScript 编译工具可以运行在任何服务器和任何系统上.TypeScript 是开源的. 安装 TypeScri

python学习--创建模块

昨天做了python客户端和服务器端通信,并把接收到的信息写到数据库,因为对数据库进行操作是个经常调用的行为,所以我想把调用数据库的操作写成一个module来给其它python程序调用,所以将昨天的服务器端程序拆分为两个文件: 1.主程序python.py #!/usr/bin/env python import socket import json import connmysql s = socket.socket(socket.AF_INET,socket.SOCK_STREAM,0) h

压缩跟踪（CT）代码详细学习_模块1（样本的采集和扩充）

本章主要详解的是compressive tracking框架中的第一部分:样本的采集和扩充部分. 在开始代码学习的前面,你需要知道的理论知识参见论文:Real-time Compressive Tracking.理论理解可以参见我的博客:http://blog.csdn.net/ikerpeng/article/details/19826409 . 这个模块中你需要知道一个基本的概念:代码里面几个变量指的是什么.上一张图: 也许你现在还不知道他们是什么,直接贴代码了.相信有我的注释你一定会懂的.

nodejs学习（模块的简单了解）

1.模块模块(Module)是nodejs最重要的支柱,开发一个具有一定规范的程序不可能只用一个文件, 通常我们需要把各个功能拆分,封装,然后在组合在一起,模块正是为了现在这种方式而诞 生的.在浏览器的javascript中,脚本模块的拆分和组合通常情况下我们都使用Html的 Script标签来实现,但是nodejs给我们提供了require这个函数来调用其他的模块.-----------------------------------------------------------------

压缩跟踪（CT）代码详细学习_模块2(特征的提取和计算)

0.下载安装Opencv,当前版本为249. 1.下载Python,当前OPencv版本为249,不过其支持的最新版本的Python为2.7,所以可以下载276版本. 2.下载numpy,开始我使用了1.6,没有通过,错误如图.下载了最新的1.8.1版本. 3.将Opencv安装目录下opencv\build\python\2.7\x86中的cv2.pyd复制到python安装目录Lib\site-packages下. 4.找到opencv源文件内的draw.py运行. 压缩跟踪(CT)代码详细

Node学习HTTP模块(HTTP 服务器与客户端)

Node学习HTTP模块(HTTP 服务器与客户端) Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端.http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由JavaScript封装,兼顾了高性能与简易性.http.request 则是一个HTTP 客户端工具,用于向 HTTP 服务器发起请求. 'http'模块提供两种使用方式: 作为服务端使用时,创建一个HTTP服务

[TypeScript] TypeScript对象转JSON字符串范例

[TypeScript] TypeScript对象转JSON字符串范例 Playground http://tinyurl.com/njbrnrv Samples class DataTable { public columns: Array<string> = new Array<string>(); public rows: Array<DataRow> = new Array<DataRow>(); } class DataRow { public c

Python学习--Selenium模块学习(2)

Selenium的基本操作 获取浏览器驱动寻找方式 1. 通过手动指定浏览器驱动路径2. 通过 `$PATH`环境变量找寻浏览器驱动 可参考Python学习--Selenium模块简单介绍(1) 控制浏览器访问URL browser.get(https://www.baidu.com/)   find系列函数定位元素 - `find_element_by_xxx` 返回第一个符合条件 `WebElement` - `find_elements_by_xxx` 返回符合条件所有元素包含了`WebE

Python学习--Selenium模块

1. Python学习--Selenium模块介绍(1) 2.Python学习--Selenium模块学习(2) 其他: 1. Python学习--打码平台 原文地址:https://www.cnblogs.com/ftl1012/p/seleniumAll.html