设计模式

发表于 | 更新于: | 分类于 | 浏览量
字数统计: 721字 | 阅读时长 ≈ 4分钟

设计模式始终是一个巨大的话题，总是要涉及，干脆写一篇博客来进行总结那些常见的设计模式

构建函数模式

在es6中，这种模式和原型模式统一了，都是很好的设计模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
  class Student {
    constructor(name, gender, score) {
      this.name = name;
      this.gender = gender;
      this.score = score;
      this.quality = 100;
    }

    sumScore() {
      return this.score + this.quality;
    }
  }

  var whh = new Student('王花花', '男', 89);
  var lsd = new Student('李拴蛋', '女', 40);

  whh.score = 100;
  console.log(whh.name, whh.sumScore())
  console.log(lsd.name, lsd.sumScore())
</script>

原型模式

1
2
3
4
5
6
7
8
9
10
11
12
13
class Student {
    constructor(name, gender, score) {
      this.name = name;
      this.gender = gender;
      this.score = score;
      this.quality = 100;

      this.mount();
    }

    mount() {
        ...
    }

构建者模式

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
40
41
42
43
44
45
46
47
48
49
50
let studentCount = 0;

 class Student {
 }

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

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

   setGender(gender) {
     if (gender != '男' && gender != '女')
       throw '好玩不';

     this.student.gender = gender;
   }

   setHairLength(hairLength) {
     if (
       (this.student.gender == '男' && hairLength > 1) ||
       (this.student.gender == '女' && hairLength > 25)
     ) throw '回去剪头';

     this.student.hairLength = hairLength;
   }

   build() {
     studentCount++;
     console.log(studentCount);
     return this.student;
   }
 }

 const builder = new StudentBuilder();
 builder.setName('王花花');
 builder.setGender('男');
 builder.setHairLength(1);
 const whh = builder.build();

 const builder2 = new StudentBuilder();
 builder2.setName('李拴蛋');
 builder2.setGender('女');
 builder2.setHairLength(20);
 const lsd = builder2.build();

 console.log(lsd);

工厂模式

工厂模式的特点就是使用函数来封装特定接口的细节.它虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题

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
class Student {
    constructor(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;
      case '体育':
        return new Student(name, ['长跑', '...'])
        break;
      default:
        throw '没有这个专业，别瞎填';
    }
  }

  const whh = factory('王花花', '文科');
  const lsd = factory('李拴蛋', '理科');
  const zks = factory('赵可爽', '体育');
  const lbb = factory('刘备备', '撒盐');

  console.log(whh);
  console.log(lsd);
  console.log(zks);

单例模式

单例模式最突出的特点就是这个类只有一个实例，并且提供一个全局访问他的接口 

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
class Resource {
  constructor () {
    // 如果不是第一次new（instance肯定是存在的）
    if (Resource.instance)
      return Resource.instance;
    else { // 否则（instance不存在）
      // 组装新对象
      this.balance = 100;

      // 将其存到Resource机器上
      Resource.instance = this;
    }
  }
}

const r = new Resource();

console.log('r:', r);
r.balance = 50;
console.log('r:', r);

const r2 = new Resource();

console.log('r2:', r2);

r.balance = 55;

console.log('r2:', r2);