二月 2020 - SKILL.NULL

JavaScript设计模式样例七 —— 原型模式

原型模式(Prototype Pattern)

1

2

3

定义：用于创建重复的对象，同时又能保证性能。

目的：用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。

场景：在运行期建立和删除原型。

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

const productPrototype = {

init(type) {

this.type = type

return this

},

getType() {

return this.type

}

}

function createProduct(type) {

function F() {}

F.prototype = productPrototype

const product = new F()

product.init(type)

return product

}

const car = createProduct('丰田CHR')

console.log(car.getType()) // 丰田CHR

Github地址：https://github.com/skillnull/Design-Mode-Example[……]

2026-08-25by SKILLNULL JavaScript, 设计模式阅读(4551)评论(0)

JavaScript设计模式样例六 —— 抽象工厂模式

抽象工厂模式(Abstract Factory Pattern)

1

2

3

定义：抽象工厂模式提供了一种方式，可以将一组具有同一主题的单独的工厂封装起来。或者说，是其他工厂的工厂。

目的：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。

场景：系统的产品有多于一个的产品族，而系统只消费其中某一族的产品。

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

class User {

constructor(type, name) {

if (new.target === User) {

throw new Error('抽象类不能实例化！')

}

this.type = type

this.name = name

this.viewPage = ['首页', '通讯录', '发现页']

}

}

class UserOfWechat extends User {

constructor(name) {

super('wechat', name)

}

}

class UserOfQQ extends User {

constructor(name) {

super('qq', name)

}

}

const userClasses = {

wechat: UserOfWechat,

qq: UserOfQQ

}

function getUserClass(type) {

const UserClass = userClasses[type]

if (!UserClass) {

throw new Error(`不支持的用户类型：${type}`)

}

return UserClass

}

const WechatUserClass = getUserClass('wechat')

const wechatUser = new WechatUserClass('卡卡罗特')

Github地址：https://github.com/skillnull/Design-Mod[……]

2026-08-25by SKILLNULL JavaScript, 设计模式阅读(4369)评论(0)

JavaScript设计模式样例五 —— 建造者模式

建造者模式(Builder Pattern)

1

2

3

定义：使用多个简单的对象一步一步构建成一个复杂的对象。

目的：将一个复杂的构建与其表示相分离，使得同样的构建过程可以创建不同的表示。

场景：一些基本部件不会变，而其组合经常变化的时候。

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

class Product {

constructor() {

this.name = null

this.version = null

this.createTime = null

}

}

class ProductBuilder {

constructor() {

this.product = new Product()

}

setName(name) {

this.product.name = name ?? null

return this

}

setVersion(version) {

this.product.version = version ?? null

return this

}

setCreateTime(createTime) {

this.product.createTime = createTime ?? null

return this

}

build() {

const result = this.product

// 让当前建造者可以继续构建下一个独立产品

this.product = new Product()

return result

}

}

Github地址：https://github.com/skillnull/Design-Mode-Example

2026-08-25by SKILLNULL JavaScript, 设计模式阅读(4412)评论(0)