发表于 | 分类于 | | 热度: ℃
字数统计: 8.4k | 阅读时长 ≈ 36

复习一下react基础只是，写vue写多了，基本的语法都忘记了，现在react 16之后有一些变更，例如很多周期函数后面就不用了，也引入react hook使得函数组件可以使用state和一些类似组件的特性，所以还是更新一下，方便后续技术栈切换有细节的遗漏…

阅读全文 »

发表于 | 分类于 | | 热度: ℃
字数统计: 2.8k | 阅读时长 ≈ 11

1.元组

  • 数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。

  • 可以只赋值其中一项

1
2
let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';
  • 当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项
1
2
let xcatliu: [string, number];
 xcatliu = ['Xcat Liu', 25]

越界的元素

  • 当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：
1
2
3
let xcatliu: [string, number];
xcatliu = ['Xcat Liu', 25];
xcatliu.push('http://xcatliu.com/'); // string| number的联合类型

2.枚举 Enum

  • 枚举（Enum）类型用于取值被限定在一定范围内的场景

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

  • 枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：
1
2
3
Days['Sun']  // 0

Days[0]  // Sun

手动赋值

  • 我们也可以给枚举项手动赋值：未手动赋值的枚举项会接着上一个枚举项递增。
1
2
3
4
5
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true
  • 未手动赋值的枚举项与手动赋值的重复了，TypeScript 可以分别获取到重复的默认值和手动赋值的枚举值，枚举名会发生覆盖，使用的时候需要注意，最好不要出现这种覆盖的情况。（看下面例子细品）
1
2
3
4
5
enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true 先找到Sun然后被Wed覆盖了
  • 手动赋值的枚举项可以不是数字，此时需要使用类型断言来让 tsc 无视类型检查

enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = “S”};

  • 手动赋值的枚举项也可以为小数或负数，此时后续未手动赋值的项的递增步长仍为 1 
1
2
3
4
5
enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1.5); // true
console.log(Days["Tue"] === 2.5); // true
console.log(Days["Sat"] === 6.5); // true

常数项和计算所得项

  • 枚举项有两种类型：常数项（constant member）和计算所得项（computed member）。

enum Color {Red, Green, Blue = “blue”.length};

  • 如果紧接在计算所得项后面的是未手动赋值的项，那么它就会因为无法获得初始值而报错

enum Color {Red = “red”.length, Green, Blue};

常数枚举

  • 常数枚举是使用 const enum 定义的枚举类型,并且不能包含计算成员

const enum Color {Red, Green, Blue = “blue”.length}; // 定义const有计算项会报错

1
2
3
4
5
6
7
const enum Directions {
    Up,
    Down,
    Left,
    Right
}
 // let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

外部枚举

  • 外部枚举（Ambient Enums）是使用 declare enum 定义的枚举类型：
1
2
3
4
5
6
7
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
  • 同时使用 declare 和 const 也是可以的：
1
2
3
4
5
6
7
declare const enum Directions {
    Up,
    Down,
    Left,
    Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

3.类 class

  • JavaScript 通过构造函数实现类的概念，通过原型链实现继承

  • 类(Class)：定义了一件事物的抽象特点，包含它的属性和方法

  • 对象（Object）：类的实例，通过 new 生成

  • 面向对象（OOP）的三大特性：封装、继承、多态

封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据

继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性

多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal ，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是Dog ，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行eat

  • 存取器（getter & setter）：用以改变属性的读取和赋值行为

  • 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法

  • 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现

  • 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

ES6中的class

  • 属性和方法

使用 class 定义类，使用 constructor 定义构造函数。

通过 new 生成新实例的时候，会自动调用构造函数。

1
2
3
4
5
6
7
8
9
10
11
class Animal {
    constructor(name) {
        this.name = name; // ES6 中实例的属性只能通过构造函数中的 this.xxx 来定义，ES7 提案中可以直接在类里面定义：叫做实例属性
    }

    sayHi() {
        return `My name is ${this.name}`;
    }
}
let a = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack
  • 类的继承

使用 extends 关键字实现继承，子类中使用 super 关键字来调用父类的构造函数和方法

1
2
3
4
5
6
7
8
9
10
11
class Cat extends Animal {
    constructor(name) {
        super(name); // 调用父类的 constructor(name)
        console.log(this.name);
    }
    sayHi() {
        return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
    }
}
let c = new Cat('Tom'); // Tom
console.log(c.sayHi()); // Meow, My name is Tom
  • 使用 getter 和 setter 可以改变属性的赋值和读取行为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Animal {
    constructor(name) {
        this.name = name; // new实例化的时候进入构造函数
    }
    get name() { // 通过new出来的实例获取class已经存在的属性走get
        return 'Jack';
    }
    set name(value) {// 通过new出来的实例修改已经存在的属性
        console.log('setter: ' + value);
    }
}
let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack
  • 静态方法

使用 static 修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用：

1
2
3
4
5
6
7
class Animal {
    static isAnimal(a) {
        return a instanceof Animal;
    }
}
let test = new Animal()
// Animal.isAnimal(test) // true
  • 实例属性

ES6 中实例的属性只能通过构造函数中的 this.xxx 来定义，ES7 提案中可以直接在类里面定义：

1
2
3
4
5
6
7
8
class Animal {
    name = 'Jack';
    constructor() {
    // ...
    }
}
let a = new Animal();
console.log(a.name); // Jack
  • 静态属性

ES7 提案中，可以使用 static 定义一个静态属性：不需要实例直接可以使用的属性

1
2
3
4
5
6
7
class Animal {
    static num = 42;
    constructor() {
    // ...
    }
}
console.log(Animal.num); // 42
  • 修饰符 Access Modifiers

public - 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的

1
2
3
4
5
6
7
8
9
10
class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
}
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

private - 修饰的属性或方法是私有的，不能在声明它的类的外部访问(使用 private 修饰的属性或方法，在子类中也是不允许访问的)

1
2
3
4
5
6
7
8
9
class Animal {
    private name;
    public constructor(name) {
        this.name = name;
    }
}
let a = new Animal('Jack');
console.log(a.name); // 报错
a.name = 'Tom'; // // 报错
1
2
3
4
5
6
7
8
9
10
11
12
class Animal {
    private name; // 私有属性再子类中也不能访问
    public constructor(name) {
        this.name = name;
    }
}
class Cat extends Animal {
    constructor(name) {
        super(name);
        console.log(this.name); // 报错
    }
}

protected - 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

1
2
3
4
5
6
7
8
9
10
11
12
class Animal {
    protected name; // 在子类中可以被访问
    public constructor(name) {
        this.name = name;
    }
}
class Cat extends Animal {
    constructor(name) {
        super(name);
        console.log(this.name);
    }
}
  • 抽象类

abstract 用于定义抽象类和其中的抽象方法

抽象类是不允许被实例化的

1
2
3
4
5
6
7
8
abstract class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi();
}
let a = new Animal('Jack'); // 报错

抽象类中的抽象方法必须被子类实现

1
2
3
4
5
6
7
8
9
10
11
12
abstract class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi();
}
class Cat extends Animal {
    public sayHi() {
        console.log(`${this.name} is eating.`);
    }
}
  • 给类加上 TypeScript 的类型很简单，与接口类似：
1
2
3
4
5
6
7
8
9
10
11
class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    sayHi(): string {
        return `My name is ${this.name}`;
    }
}
let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack
  • 接口 interfaces

类实现接口

实现（implements）是面向对象中的一个重要概念,一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现

这个特性大大提高了面向对象的灵活性

举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类，车，也有报警器的功能，就可以考虑把报警器提取出来，作为一个接口，防盗门和车都去实现它：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 定义报警器成一个接口
interface Alarm {
    alert();
}

class Door {}

class Car{}
// 防盗门继承门并且实现报警器的接口
class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}
// 消防车继承了车并且也实现了报警器的接口
class Ambulance extends Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}
  • 一个类可以实现多个接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
interface Alarm {
    alert();
}
interface Light {
    lightOn();
    lightOff();
}
// Car 实现了 Alarm 和 Light 接口，既能报警，也能开关车灯。
class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}
  • 接口继承接口

接口与接口之间可以是继承关系

1
2
3
4
5
6
7
interface Alarm {
    alert();
}
interface LightAlarm extends Alarm {
    lightOn();
    lightOff();
}
  • 接口继承类
1
2
3
4
5
6
7
8
class Point {
    x: number;
    y: number;
}
interface Point3d extends Point {
    z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

1
2
3
4
5
6
7
8
function createArray(length: number, value: any): Array<any> {
    let result = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']

用泛型指定按照输入返回

1
2
3
4
5
6
7
function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

函数名后添加了 ，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array 中即可使用了。

接着在调用的时候，可以指定它具体的类型为 string - createArray(3, ‘x’); // [‘x’, ‘x’, ‘x’]

当然，也可以不手动指定，而让类型推论自动推算出来 - createArray(3, ‘x’); // [‘x’, ‘x’, ‘x’]

发表于 | 分类于 | | 热度: ℃
字数统计: 3.2k | 阅读时长 ≈ 12

ts其实也看了好久了，一直打算把ts在项目中用起来，无奈这段时间一直在看node，docker也忘的差不多了，索性在复习一下ts，顺便输出一些笔记记录一下，毕竟自己吃过的东西在看起来也会快一些…….

TypeScript简介

  • TypeScript 是 JavaScript 的一个超集
  • 它可以编译成纯 JavaScript。
  • 编译出来的 JavaScript 可以运行在任何浏览器上。
  • TypeScript 编译工具可以运行在任何服务器和任何系统上。
  • TypeScript 是开源的
  • TypeScript 中，使用 : 指定变量的类型， : 的前后有没有空格都可以。
阅读全文 »

发表于 | 分类于 ， | | 热度: ℃
字数统计: 1.7k | 阅读时长 ≈ 7

背景说明

前端这几年一直被主流的三大框架所引导，MVC和MVVM等名词相信大家也并不陌生，我最早接触到框架是2016年，当时用的是AngualarJs1.5.8的版本，这个版本也是组件化的开始。我们会把页面的一部分试图和它对应的逻辑抽离成一个组件，一方面是隔离上下文，另一方面是为了多处复用。

当时写一个组件，大概包括一下几个部分:

1.一个view的template模板，基本上由原生的html以及自定义的组件构成，主要负责页面视图和事件绑定。
2.view对应的controller控制器，来处理页面中的主要逻辑。
3.service/factory用来处理controller中从后台获取的数据，以保证controller只处理业务逻辑，不包含其他逻辑。
4.constant用来集中统一的管理service中需要使用的常量。

当然在全局，也有一个util和config文件夹对整个工程以及通用配置和工具做了封装，以便业务中多出复用。

说了这么多，其实也是最近在学习koa2来构建后台服务有一些感悟，软件开发设计，前后端都有类似的经验，人们在使用中可能需要各种调用，数据传来传去，看起来很复杂，但是当你到达一定的阶段，就会感悟到这些分层的设计，其实是为了更方便项目的管理和维护，也更科学的进行项目开发和使用。

  • 废话不多说了，我们来看看一个koa2的后台服务需要怎么进行架构设计。
阅读全文 »

发表于 | 分类于 ， | | 热度: ℃
字数统计: 641 | 阅读时长 ≈ 2
  • JSON Web Token（缩写 JWT）

最流行的跨域认证解决方案,

在中已经介绍了，session如何通过浏览器的session_id获取存储在后台的session数据，而另一种解决方案就是服务器索性不保存 session 数据了，所有数据都保存在客户端，每次请求都发回服务器。

jwt认证的流程：

用户向服务器发送用户名和密码,服务器认证以后，生成一个 JSON 对象，发回给用户

用户与服务端通信的时候，客户端都要发回这个 JSON 对象

阅读全文 »

发表于 | 分类于 ， | | 热度: ℃
字数统计: 269 | 阅读时长 ≈ 1

在多人合作的团队里面，经常使用git这种版本管理工具，经常因为代码风格不统一造成代码提交的时候造成冲突，使用eslint插件可以统一代码风格，然后使用pre-commit插件可以在通过git commit提交代码的时候执行 代码eslint检查，防止代码冲突。

阅读全文 »

发表于 | 分类于 ， | | 热度: ℃
字数统计: 243 | 阅读时长 ≈ 1

单元测试

  • 单个功能或接口，给定输入，得到输出。看输出是否符合预期

  • 需要手动编写用例代码，然后统一执行

  • 意义 ：能一次性执行所有单元测试，短时间内验证所有功能是否正常

使用jest

  • 安装 jest(npm i jest –save-dev)

  • 创建.test.js的文件后缀

  • 修改npm脚本

    1
    2
    3
    "test": "cross-env NODE_ENV=test jest --runInBand --forceExit --colors"
    // 依次执行 --runInBand
    // 执行完成后退出 --forceExit
阅读全文 »

发表于 | 分类于 ， | | 热度: ℃
字数统计: 1.5k | 阅读时长 ≈ 5

redis是一个内存数据库，和类似mysql这种硬盘关系型数据库相比，它的典型特点就是数据存储在内存中，访问速度快。通常，我们在处理用户登陆权限的问题中，就是使用redis来存储用户的session信息，它适合的典型场景就是：访问比较频繁的数据。

背景知识

  • http是一个无状态协议,由于http的无状态性，为了使某个域名下的所有网页能够共享某些数据，session和cookie出现了.

  • 什么是session?

session是一种服务器端的状态管理技术。

当浏览器访问服务器时，服务器创建一个session对象(该对象有一个唯一的id号，称之为sessionId),服务器在默认情况下，会将sessionId以cookie的方式(set-cookie消息头)发送给浏览器,浏览器会将sessionId保存到内存。当浏览器再次访问服务器时，会将sessionId发送给服务器，服务器依据sessionId就可找到之前创建的session对象。

阅读全文 »

发表于 | 分类于 ， | | 热度: ℃
字数统计: 811 | 阅读时长 ≈ 3

介绍sequelize常用的crud方法:

新增

  • create({创建的属性:属性的值})

更新

  • update({需要更新的属性名称:需要更新的值},{where:{查询条件:值})

删除

  • destroy({where:{查询条件:值}})

查询

  • findOne({配置参数})
  • findAll({配置参数})
  • findAndCountAll({配置参数})
阅读全文 »

发表于 | 分类于 ， | | 热度: ℃
字数统计: 1.9k | 阅读时长 ≈ 8

在nodejs操作mySql数据库 中已经介绍了怎么使用nodejs链接mysql数据库，以及t通过Promise的方式封装了mysql执行sql获取数据，以及防止sql注入的escape方法。本章介绍orm数据关系映射 - Sequelize.

阅读全文 »