JavaScript - 设计模式

行为类

发布-订阅模式 Publish-Subscribe

1
2


创建类

构造器模式 Constructor

类似于面向对象中的构造器,由于ES5中没有很好的对象概念,现以函数的形式模拟,本质一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ES5

function Student(name, gender) {
this.name = name;
this.gender = gender
this.print = function () {
console.log('姓名:' + this.name + '性别:' + this.gender);
}
}

var zhaoo = new Student('小兆', 'male');
var pp = new Student('小欣', 'female');

zhaoo.print();
pp.print();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// ES6

class Student {
constructor(name, gender) {
this.name = name;
this.gender = gender;
}

print = () => {
console.log(`姓名:${this.name}性别:${this.gender}`);
}
}

const zhaoo = new Student('小兆', 'male');
const pp = new Student('小欣', 'female');

zhaoo.print();
pp.print();

原型模式 Prototype

之前对象中,每创建一个实例,内部都会实例化一份print函数,造成资源浪费。现使用prototype构造对象原型,相当于对print函数的一个引用,进行了优化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ES5

function Student(name, gender) {
this.name = name;
this.gender = gender
}

Student.prototype.print = function () {
console.log('姓名:' + this.name + '性别:' + this.gender);
}

var zhaoo = new Student('小兆', 'male');
var pp = new Student('小欣', 'female');

zhaoo.print();
pp.print();

建造者模式 Builder

在对象外封装一层构建器,作为基层控制者,使用setget等方法创建获取内部变量。在对象内部可以方便对成员变量进行操纵、校验等操作,更加灵活、规范。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// ES5

var failCount = 0;

function Student() {}

function StudentBuilder() {
this.student = new Student();

StudentBuilder.prototype.setName = function (name) {
this.student.name = name;
}

StudentBuilder.prototype.setScore = function (score) {
if (typeof score !== Number)
throw ('score 输入类型错误');
this.student.score = score;
}

StudentBuilder.prototype.build = function () {
if (this.student.score < 60)
failCount++;
return this.student;
}
}

var builder = new StudentBuilder();
builder.setName('小兆');
builder.setScore(90);
var zhaoo = builder.build();

var builder = new StudentBuilder();
builder.setName('小欣');
builder.setScore(59);
var pp = builder.build();

console.log('挂科人数:' + failCount);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// ES6

let failCount = 0;

class Student {}

class StudentBuilder {
constructor() {
this.student = new Student();
}

setName(name) {
this.student.name = name;
}

setScore(score) {
if (typeof score !== Number)
throw ('score 输入类型错误');
this.student.score = score;
}

build() {
if (this.student.score < 60)
failCount++;
return this.student;
}
}

const builder = new StudentBuilder();
builder.setName('小兆');
builder.setScore(90);
const zhaoo = builder.build();

const builder = new StudentBuilder();
builder.setName('小欣');
builder.setScore(59);
const pp = builder.build();

console.log('挂科人数:' + failCount);

工厂模式 Factory

包装并返回对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// ES5

function Student(name, subjects) {
this.name = name;
this.subjects = subjects;
}

function factory(name, type) {
switch (type) {
case '软件工程':
return new Student(name, ['数据结构', '设计模式', '算法设计']);
break;
case '城乡规划':
return new Student(name, ['城市道路与交通规划', '村镇规划设计', '城市建设史与规划史']);
break;
default:
throw '没这个专业,别瞎填';
}
}

var zhaoo = factory('小兆', '软件工程');
var pp = factory('小欣', '城乡规划');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// ES6

class Student {
constructor(name, subjects) {
this.name = name;
this.subjects = subjects;
}
}

const factory = (name, type) => {
switch (type) {
case '软件工程':
return new Student(name, ['数据结构', '设计模式', '算法设计']);
break;
case '城乡规划':
return new Student(name, ['城市道路与交通规划', '村镇规划设计', '城市建设史与规划史']);
break;
default:
throw '没这个专业,别瞎填';
}
}

const zhaoo = factory('小兆', '软件工程');
const pp = factory('小欣', '城乡规划');

抽象工程模式 AbstractFactory

工厂外再包一层工厂,用于上产工厂。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function Student() {
this.intro = '我是个学生';
}

function Teacher() {
this.intro = '我是个老师';
}

function StudentFactory() {
return new Student();
}

function TeacherFactory() {
return new Teacher();
}

function Producer(factory) {
switch (factory) {
case 'student':
return StudentFactory;
break;
case 'teacher':
return TeacherFactory;
break;
default:
throw '没这个工厂';
break;
}
}

var sFactory = Producer('student');
var zhaoo = factory('小兆');
var tFactory = Producer('teacher');
var pp = factory('小潘');

单例模式 Singleton

避免重复创建,实例化对象前先判断是已实例化。

1
2
3
4
5
6
7
8
9
10
11
12
13
// ES5

function Singleton() {
if (Singleton.instance)
return Singleton.instance;
else {
this.countdown = 60;
Singleton.instance = this;
}
}

var s1 = new Singleton();
var s2 = new new Singleton();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ES6

class Singleton {
constructor () {
if (Singleton.instance)
return Singleton.instance;
else {
this.countdown = 60;
Singleton.instance = this;
}
}
}

const s1 = new Singleton();
const s2 = new new Singleton();

未完待续……

查看评论