TypeScript——类的继承

发表于 2018-05-24

class Person {
    name:string;
    age: number;
    print () {
        return this.name + ':' + this.age;
    }
}

class Student extends Person {
    school:string;
    point() {
        return this.name + ':' + this.age + ':' + this.school;
    }
}

var S = new Student();
s.name = 'cc';
s.age = 19;
s.school = '清华';
s.print(); // cc:19:清华

或者

class Person {
    name:string;
    age: number;
    constructor(name:string, age:number){
        this.name = name;
        this.age = age;
    }
    print () {
        return this.name + ':' + this.age;
    }
}

class Student extends Person {
    school:string;
    constructor (school: string) {
        super('cc', 19);
        this.school = school;
    }
    point() {
        return this.name + ':' + this.age + ':' + this.school;
    }
}

var S = new Student('清华');
s.print(); // cc:19:清华

TypeScript——类

发表于 2018-05-24

对类的使用：

class Person {
    name:string;
    age: number;
    constructor(name:string, age:number){
        this.name = name;
        this.age = age;
    }
    print () {
        return this.name + ':' + this.age;
    }
}
var p = new Person("小宝", 19);
p.print(); // "小宝：19"

TypeScript——实战1

发表于 2018-05-24

Timer.ts文件

module Time {
    export class Test {
        element: HTMLElement;
        span: HTMLElement;
        timer: number;

        constructor (e:HTMLElement) {
            this.element = e;
            this.element.innerHTML = '现在的时间是：';
            this.span = document.createElement('span');
            this.element.appendChild(this.span);
            this.span.innerHTML = new Date().toTimeString();
        }

        start() {
            this.timer = setInterval(() => this.span.innerHTML = new Date().toTimeString())；
        }

        end() {
            clearInterval(this.timer);
        }
    }
}

JSTimer.js文件

var div = document.createElement("div");
document.body.appendChild(div);
var obj = new Time.Test(div);
// 创建开始按钮，并绑定事件
var start_button = document.createElement('button');
start_button.innerHTML = 'start';
start_button.onclick = function () {
    obj.start();
}
document.body.appendChild(start_button);

// 创建停止按钮，并绑定事件
var stop_button = document.createElement('button');
stop_button.innerHTML = 'stop';
stop_button.onclick = function () {
    obj.stop();
}
document.body.appendChild(stop_button);

time.html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="Timer.js"></script>
    <script src="JSTimer.js"></script>
</body>
</html>

注意：编写的是 Timer.ts 引入的是编译之后的 Timer.js

直接运行我们可以看到

点击 start 按钮每个 500毫秒 更新一次时间，点击 stop 按钮停止更新时间

TypeScript——基础数据类型

发表于 2018-05-24

1 2	// typescript基础数据类型 // Boolean, Number, String, Array, Enum（枚举）, Any, void

定义布尔类型

1	var isBoon:boolean = false;

定义数字类型

1	var num:number = 10;

定义字符串类型

1	var str:string = 'adsf';

定义数组类型

1 2	var list1:number[] = [1, 2, 3]; var list2:Array<number> = [4, 5, 6];

定义枚举

1
2
3

// 定义角标
enum Color {Red = 1, Green, Blue};
var colorName:string = Color[2]; // Green

1
2
3

// 所有的项，都定义角标
enum Color {Red = 1, Green = 15, Blue = 20};
var colorName:string = Color[15]; // Green

1
2
3

返回角标
enum Color {Red = 1, Green = 15, Blue = 20};
var c:Color = Color.Green; // 15

定义任意类型

1
2
3

var notSure:any = "123";
notSure = 123;
notSure = false;

1 2	var list:any[] = [1, '2', true]; var list:Array<any> = [1, '2', true];

TypeScript——可变参数

发表于 2018-05-24

function peopleName (firstName:string, ...restOfname:string[]) {
  return firstName + ' ' + restOfname.join(' ');
}
var pn = peopleName("a", "b", "c", "d"); // "a b c d"

TypeScript——函数

发表于 2018-05-24

函数

function say():string {
    // 返回字符串
    return "Hello";
}

function tell():number {
    // 返回数字
    return 10086;
}

1
2
3

function empty():void {
    // 不需要返回值
}

function add (x:number, y:number):string {
    // 指定输入格式，和输出格式
    return 'x + y = ' + x + y;
}

var myAddts:(name:string, age:number)=>number=function(n:string, a:number):number {
    return a;
}

// 在myAddts:(name:string, age:number)=>number
// 指定n和a的具体意义分别是name和age，

// => number 指定当前函数返回值为number类型

function buildName(firstName:string, lastName:string) {
  return firstName + " " + lastName
}
var result1 = buildName("zhang", "shan");
// var result2 = buildName("liu"); //不可以只指定了一个参数。
// var result3 = buildName("zhang", "shan", "feng"); //参数个数不能超过两个

function buildName(firstName?:string, lastName?:string) {
  return firstName + " " + lastName
}
// 在函数参数后面加?, 表示该参数为可选的。
var result1 = buildName("zhang", "shan");
var result2 = buildName("liu");
// var result3 = buildName("zhang", "shan", "feng"); //参数个数不能超过两个
var result4 = buildName();

// 指定默认值
function buildName(fistName:string, lastName="宝宝") {
  return fistName + " " + lastName;
}
var result1 = buildName("张"); // 张宝宝
var result2 = buildName("张", "山"); // 张三

TypeScript——函数-重载

发表于 2018-05-24

function attr(name:string):string;
function attr(age:number):numbner;

function attr(nameorage:any):any{
    if (nameorage && typeof nameorage === 'string') {
        alert('姓名');
    } else {
        alert('年龄');
    }
}

attr("哈哈"); // 姓名
attr(123444); // 年龄

TypeScript——函数-lambads和this关键字

发表于 2018-05-24

var people = {
    name: ['a', 'b', 'c', 'd', 'e'],
    getName: function () {
        return function () {
            var i = Math.floor(Math.random() * 4);
            return {
                n: this.name[i] // 这里的this指向的是getName，而不是people，
            }
        }
    }
}
var myname = people.getName();
alert('名字是：' + myname().n); // 名字是：undefined

通过把 function () {} 函数更改为 () => {}

var people = {
    name: ['a', 'b', 'c', 'd', 'e'],
    getName: function () {
        return () => {
            var i = Math.floor(Math.random() * 4);
            return {
                n: this.name[i] // 通过lambads 改变了this的指向
            }
        }
    }
}
var myname = people.getName();
alert('名字是：' + myname().n); // 名字是：b

thinkPHP5隐藏入口文件

发表于 2018-05-24

找到文件.htaccess
将

1	RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]

替换为

1	RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]

分块加载技术——nodejs-bigpipe-demo

发表于 2018-05-24

科普Node.js Bigpipe