【第5篇】TypeScript塊module的案例程式碼詳解
https://blog.csdn.net/jilongliang/article/details/47355263
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>