【第5篇】TypeScript块module的案例代码详解
来源:互联网 发布:ddf24口6类网络配线架 编辑:程序博客网 时间:2024/06/05 07:59
6.1分多个ts文件实现module块
Validation.ts代码
module Validation{
export interface StringValidator {
isAcceptable(s: string): boolean;//是否接受.
}
}
ZipCodeValidator.ts代码
/// <reference path="Validation.ts" />
module Validation {
//匹配0-9的数字.
var numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
//如果长度=5并且是数字就返回一个true
return s.length === 5 && numberRegexp.test(s);
}
}
}
LettersOnlyValidator.ts代码
/// <reference path="Validation.ts" />
module Validation {
//匹配A-Z,a-z的英文
var lettersRegexp = /^[A-Za-z]+$/;
export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}}
test-1.ts代码
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
/// <reference path="test1/Validation.ts" />
/// <reference path="test1/LettersOnlyValidator.ts" />
/// <reference path="test1/ZipCodeValidator.ts" />
/***
* Splitting Across Files分割跨文件
*/
// 声明一个数组.
var strings = ['Hello', '98052', '101'];
// 使用这个验证.
var validators: { [s: string]: Validation.StringValidator; } = {};
validators['Zip Code'] = new Validation.ZipCodeValidator();//这个是验证邮政编码
validators['Letters only'] = new Validation.LettersOnlyValidator();//这个是验证英文
function showMsg():void{
//显示每个字符串是否通过每个验证
strings.forEach(s => {
for (var name in validators) {
console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);
$("#msg1").html('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);
}//--for--end
});//--forEach--end
}
$(document).ready(function(){
showMsg();
});
Html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../plugins/jquery-2.1.4.min.js"></script>
<script src="../test1/Validation.js" type="text/javascript"></script>
<script src="../test1/LettersOnlyValidator.js" type="text/javascript"></script>
<script src="../test1/ZipCodeValidator.js" type="text/javascript"></script>
<script src="../test-1.js" type="text/javascript"></script>
</head>
<body>
<div id="msg1"></div>
<br/>
<div id="msg2"></div>
</body>
</html>
6.2不分文件实现module块
ValidationUtils.ts
/**
*声明一个ValidationUtils工具块module
*推荐使用.
*/
module ValidationUtils{
//-声明StringValidator字符串验证器.
export interface StringValidator {
isAcceptable(str: string): boolean;//是否接受.
}
// 匹配email正则表达式
var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
export class EmailValidator implements StringValidator {
isAcceptable(s: string) {
return emailReg.test(s);
}
}
//匹配移动电话号码
var telReg=/^(13[0-9]|15[0-9]|18[0-9])\d{8}$/;
export class TelValidator implements StringValidator{
isAcceptable(s:string){
return telReg.test(s);
}
}
}
测试文件test-2.ts
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
/// <reference path="test2/ValidationUtils.ts" />
var strs : Array<any> =["13697811800","jilongliang@sina.com"];
var validators1: { [s: string]: ValidationUtils.StringValidator; } = {};
validators1["Tel"]=new ValidationUtils.TelValidator;//验证码QQ
validators1["Email"] = new ValidationUtils.EmailValidator;//验证Email
//-------显示信息1----------------------------
function showMsg1():void{
strs.forEach
(s=>
{
for(var name in validators1 ){
console.log('"' + s + '" ' + (validators1[name].isAcceptable(s) ? ' 匹配 ' : ' 不匹配 ') + name);
}
}
);
}
//-------------------显示信息2---------------------
function showMsg2():void{
//--方法一---
var telObj:ValidationUtils.TelValidator;
telObj=new ValidationUtils.TelValidator;
//--方法二---
//var telObj=new ValidationUtils.TelValidator;
var tel : string="13697811809";
var flag : boolean=telObj.isAcceptable(tel);//调用TelValidator类的isAcceptable方法
console.log(flag? tel+" 匹配 " : tel+"\t 不匹配 ");
$("#msg2").html(flag? "<span style='color:red;'>"+tel+" 匹配</span> " : "<span>"+tel+"\t 不匹配</span>");
}
$(function(){
showMsg1();
showMsg2();
});
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../plugins/jquery-2.1.4.min.js"></script>
<script src="../test2/ValidationUtils.js" type="text/javascript"></script>
<script src="../test-2.js" type="text/javascript"></script>
</head>
<body>
<div id="msg1"></div>
<br/>
<div id="msg2"></div>
</body>
</html>
6.3import,require关键字
ValidationUtils3.ts文件
/* 这个ts没module关键字*/
export interface StringValidator {
isAcceptable(s: string): boolean;
}
EmailValidator.ts
/**import、require、export关键的使用..***********/
//--导入--ValidationUtils3.ts文件---
import validation = require('./ValidationUtils3');
// 匹配email正则表达式
var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
export class EmailValidator implements validation.StringValidator {
isAcceptable(s: string) {
return emailReg.test(s);
}
}
TelValidator.ts
/**import、require、export关键的使用..***********/
//--导入--ValidationUtils3.ts文件---
import validation = require('./ValidationUtils3');
//匹配移动电话号码
var telReg=/^(13[0-9]|15[0-9]|18[0-9])\d{8}$/;
export class TelValidator implements validation.StringValidator{
isAcceptable(s:string){
return telReg.test(s);
}
}
Test-3.ts
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
/***
* import与require关键字使用..require(是命令,要求的意思.)
*/
//引入ValidationUtils3.ts文件,前面这个是用了module块关键字定义ts文件,需要用reference与path引入.
import validation = require('test3/ValidationUtils3');
import telValidator = require('test3/TelValidator');
import emailValidator = require('test3/EmailValidator');
//-------------------显示信息1---------------------
function showMsgs1() : void {
//--方法一---
var telObj=new emailValidator.EmailValidator();//
var tel : string="13697811809";
var flag : boolean=telObj.isAcceptable(tel);//调用TelValidator类的isAcceptable方法
console.log(flag? tel+" 匹配 " : tel+"\t 不匹配 ");
$("#msg1").html(flag? "<span style='color:red;'>"+tel+" 匹配</span> " : "<span>"+tel+"\t 不匹配</span>");
}
$(function() {
//showMsgs1();
var strings = ['13697811809', 'jilongliang@sina.com'];
var validators: { [s: string]: validation.StringValidator; } = {};
validators['email'] =new emailValidator.EmailValidator();
validators['tel'] = new telValidator.TelValidator();
strings.forEach(s => {
for (var name in validators) {
console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);
}
});
});
6.4import,export,require关键字
ValidationUtils4.ts
/**
* 不使用Module,如果我们在typescript使用了module函数,则生成的代码在浏览器端执行时,需要有一些script loader的支持。
* 对于浏览器端代码,我们一般生成amd风格的代码,所以需要找一个支持amd的库放在前端。这样的库有很多
*/
export interface StringValidator {
isAcceptable(s: string): boolean;
}
export = 对象 的使用
EmailValidator4.ts
/**export = 对象 的使用*/
import validation = require('./ValidationUtils4');
// 匹配email正则表达式
var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
class EmailValidator4 implements validation.StringValidator {
isAcceptable(s: string) {
return emailReg.test(s);
}
}
export = EmailValidator4; //export = 对象 的使用
TelValidator4.ts
/**export = 对象 的使用*/
import validation = require('./ValidationUtils4');
//匹配移动电话号码
var telReg=/^(13[0-9]|15[0-9]|18[0-9])\d{8}$/;
class TelValidator4 implements validation.StringValidator{
isAcceptable(s:string){
return telReg.test(s);
}
}
export = TelValidator4;//
Test-4.ts文件
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//引入ValidationUtils3.ts文件,前面这个是用了module块关键字定义ts文件,需要用reference与path引入.
import validation = require('test4/ValidationUtils4');
import telValidator = require('test4/TelValidator4');
import emailValidator = require('test4/EmailValidator4');
//-------------------显示信息1---------------------
function showMsgs1() : void {
//--方法一---
var telObj=new telValidator();//
var tel : string="13697811809";
var flag : boolean=telObj.isAcceptable(tel);//调用TelValidator类的isAcceptable方法
console.log(flag? tel+" 匹配 " : tel+"\t 不匹配 ");
$("#msg1").html(flag? "<span style='color:red;'>"+tel+" 匹配</span> " : "<span>"+tel+"\t 不匹配</span>");
}
$(function (){
showMsgs1();
});
注意:6.3和6.4不使用Module,如果我们在typescript使用了module函数,则生成的代码在浏览器端执行时,需要有一些script loader的支持。对于浏览器端代码,我们一般生成amd风格的代码,所以需要找一个支持amd的库放在前端,我这里首选的是AMD这样的库有很多,比如
1. RequireJS
2. Nodules
3. JSLocalnet
4. curl.js
不然的话运行这个html会报ReferenceError: define is not defined
6.5module别名的使用
//------------别名的使用..
//--声明一个--Shapes块别名--
module Shapes {
//===========================多边形===========================
export module Polygons {
//===========================三角形===========================
export class Triangle {
side : number = 3;//声明边一个变量,并且给一个默认值..
theName : string;//声明一个名字
//声明构造方法--传一个名字的参数..
constructor(strName : string) {
this.theName = strName;
}
//计算三角形,获取面积,这里为了返回一个构造方法的传进来的字符串,故返回类型给了一个any类型..
getTriangleArea(side : number) : any{
return this.theName+ this.side*side;
}
}
//===========================正方形===========================
export class Square {
side : number = 8;//声明边一个变量,并且给一个默认值..
theName : string;//声明一个名字
//声明构造方法--传一个名字的参数..
constructor(strName : string) {
this.theName = strName;
}
//---计算正方形,获取面积
getSquareArea(side : number) : any{
return this.theName+ this.side*side;
}
}
}
}
ts编译成js文件
//------------别名的使用..
//--声明一个--Shapes块别名--
var Shapes;
(function (Shapes) {
//===========================多边形===========================
var Polygons;
(function (Polygons) {
//===========================三角形===========================
var Triangle = (function () {
//声明构造方法--传一个名字的参数..
function Triangle(strName) {
this.side = 3; //声明边一个变量,并且给一个默认值..
this.theName = strName;
}
//计算三角形,获取面积,这里为了返回一个构造方法的传进来的字符串,故返回类型给了一个any类型..
Triangle.prototype.getTriangleArea = function (side) {
return this.theName + this.side * side;
};
return Triangle;
})();
Polygons.Triangle = Triangle;
//===========================正方形===========================
var Square = (function () {
//声明构造方法--传一个名字的参数..
function Square(strName) {
this.side = 8; //声明边一个变量,并且给一个默认值..
this.theName = strName;
}
//---计算正方形,获取面积
Square.prototype.getSquareArea = function (side) {
return this.theName + this.side * side;
};
return Square;
})();
Polygons.Square = Square;
})(Polygons = Shapes.Polygons || (Shapes.Polygons = {}));
})(Shapes || (Shapes = {}));
Test.ts文件
//-------import入module 块
import polygons = Shapes.Polygons;
var tg = new polygons.Triangle("三角形面积是:");
var triangleArea=tg.getTriangleArea(3);//传一个3进去..
var sq = new polygons.Square("正方形面积是:");
var squareArea = sq.getSquareArea(8);
$(function () {
$("#msg1").html("<span style='color:red;'>"+triangleArea+"</span>");
$("#msg2").html("<span style='color:red;'>"+squareArea+"</span>");
})
6.6module内部模块
D3.d.ts文件,.d.ts文件不会编译成js文件
//环境内部模块
declare module D3{
//声明一个Selectors选择器接口
export interface Selectors {
select: {
(selector: string): Selection;
(element: EventTarget): Selection;
};
}
//声明一个Event事件
export interface Event {
x: number;
y: number;
}
//声明一个Base接口继承Selectors接口
export interface Base extends Selectors {
event: Event;
}
}
declare var d3: D3.Base;
6.7module外部模块
node.d.ts
//环境外部模块
//在node.js中,大多数的任务是由加载一个或多个模块来实现的。我们可以定义自己的.d.ts文件顶层出口报关单每个模块,但它更方便他们写为一个较大的.d.ts文件。要做到这一点,我们使用了模块的引用名,这将提供给一个后来进口
declare module "url" {
export interface Url {
protocol?: string;
hostname?: string;
pathname?: string;
}
export function parse(urlStr: string, parseQueryString?, slashesDenoteHost?): Url;
}
declare module "path" {
export function normalize(p: string): string;
export function join(...paths: any[]): string;
export var sep: string;
}
//引入node.d.ts文件
///<reference path="test6/node.d.ts"/>
import url = require("url");
var myUrl = url.parse("http://www.typescriptlang.org");
$(function() {
alert(myUrl);
//$("#msg1").html(myUrl);
});
- 【第5篇】TypeScript块module的案例代码详解
- 【第4篇】TypeScript类的详解案例代码使用。
- 【第6篇】TypeScript函数function的案例代码详解
- 【第7篇】TypeScript泛型的案例代码详解
- 【第8篇】TypeScript的Mixin案例代码详解
- 【第9篇】TypeScript声明合并Merging 案例代码详解
- 【第11篇】最全的中文TypeScript入门指南详解案例教程与代码
- 【第10篇】TypeScript类型比较《Type Compatibility》 案例代码详解
- 【第2篇】TypeScript - 基本类型详解
- 案例分析 --构造方法,代码块,重写 的应用
- iOS 关于Block代码块的详解
- 静态代码块详解
- Java 代码块详解
- Java代码块详解
- 代码块详解
- 【第3篇】TypeScript接口使用
- 详解Typescript中继承的实现
- 基础篇_线程 第4集 多线程的安全问题--解决之道同步代码块
- JVM垃圾收集(一) 寻找垃圾
- 将Activity设置成窗口的样式
- Java项目生成帮助文档教程
- node.js调用bat
- PHP中使用XML-RPC构造Web Service简单入门
- 【第5篇】TypeScript块module的案例代码详解
- Java中HashSet要重写equals方法和hashCode方法
- UVa 11045 My T-shirt suits me (网络流建图+最大流)
- window下的文件路径
- 导航栏+tabBar的使用
- 再谈mobile web retina 下 1px 边框解决方案
- hdu acm 1237
- 二叉查找树
- 再谈DFS(1)