设计模式 - Page 2 of 3

JavaScript设计模式样例十二 —— 享元模式

享元模式(Flyweight 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

42

43

44

45

46

// 构建享元对象

class Modal {

constructor (id, gender) {

this.gender = gender

this.name = `${gender}${id}`

}

// 构建享元工厂

class ModalFactory {

// 单例模式

static create (id, gender) {

if (this[gender]) {

return this[gender]

}

return this[gender] = new Modal(id, gender)

}

// 管理外部状态

class TakeClothersManager {

// 添加衣服款式

static addClothes (id, gender, clothes) {

const modal = ModalFactory.create(id, gender)

this[id] = {

clothes,

modal

}

// 拍照

static takePhoto (id) {

const obj = this[id]

console.log(`${obj.modal.gender}模${obj.modal.name}穿${obj.clothes}拍了照`)

}

for (let i = 0; i < 10; i++) {

TakeClothersManager.addClothes(i, '男', `服装${i}`)

TakeClothersManager.takePhoto(i)

}

for (let i = 10; i < 20; i++) {

TakeClothersManager.addClothes(i, '女', `服装${i}`)

TakeClothersManager.takePhoto(i)

}

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

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(4914)评论(0)

JavaScript设计模式样例十一 —— 外观模式

外观模式(Facade Pattern)

1

2

3

定义：隐藏系统的复杂性，并向客户端提供了一个客户端可以访问系统的接口。

目的：为子系统中的一组接口提供一个一致的界面，外观模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。

场景：客户端不需要知道系统内部的复杂联系，整个系统只需提供一个"接待员"即可。

1

2

3

4

5

6

7

// 通过一个接口封装其他接口

let mobileEvent = {

stop: (e) => {

e.preventDefault()

e.stopPropagation()

}

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

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(4116)评论(0)

JavaScript设计模式样例十 —— 组合模式

组合模式(Composite 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

// 指令

let directive = {

eat: {

excute: () => {

console.log('eat')

}

},

sleep: {

excute: () => {

console.log('sleep')

}

},

code: {

excute: () => {

console.log('Get out there and write code!')

}

const callDirective = () => {

let result = {

directiveList: [],

add: (directive) => {

result.directiveList.push(directive)

},

excute: () => {

for (let ele of result.directiveList.values()) {

ele.excute()

}

return result

}

let command = callDirective()

command.add(directive.eat)

command.add(directive.sleep)

command.add(directive.code)

command.excute()

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

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(4735)评论(0)

JavaScript设计模式样例九 —— 桥接模式

桥接模式(Bridge Pattern)

1

2

3

定义：是用于把抽象化与实现化解耦，使得二者可以独立变化。

目的：将抽象部分与实现部分分离，使它们都可以独立的变化。

场景：实现系统可能有多个角度分类，每一种角度都可能变化。

1

2

3

4

5

6

7

8

9

10

11

12

13

let each = (arr, fn) => {

for (let i = 0; i < arr.length; i++) {

let val = arr[i]

if (fn.call(val, i, val, arr)) {

return false

}

let arr = [1, 2, 3, 4]

each(arr, (i, v) => {

arr[i] = v * 2

})

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

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(4329)评论(0)

JavaScript设计模式样例八 —— 适配器模式

适配器模式(Adapter 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

class Target {

small () {

throw new Error('Please overwritten function!')

}

class newTarget {

big () {

console.log('新的适配')

}

class Adapter extends Target {

constructor (newTarget) {

super()

this.newTarget = newTarget

}

small () {

this.newTarget.big()

}

let NT = new newTarget()

let AD = new Adapter(NT)

AD.small()

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

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(4542)评论(0)

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

let productPrototype = {

init: (type) => {

this.type = type

},

getType: () => {

return this.type

}

let prototype = (type) => {

function F () {

}

F.prototype = productPrototype

let f = new F()

f.init(type)

return f

}

let car = prototype('丰田CHR')

console.log(car.getType())

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

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(4088)评论(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

42

43

44

class User {

constructor (type) {

if (new.target === User) {

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

}

this.type = type

}

class UserOfWechat extends User {

constructor (name) {

super('wechat')

this.name = name

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

}

class UserOfQQ extends User {

constructor (name) {

super('qq')

this.name = name

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

}

function getUser (type) {

switch (type) {

case 'wechat':

return UserOfWechat

break

case 'qq':

return UserOfQQ

break

default:

throw new Error('参数错误')

break

}

let WechatUserClass = getUser('wechat')

let QQUserClass = getUser('qq')

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

let qqUser = new QQUserClass('贝吉塔')

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

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(3815)评论(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

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

// 声明一个产品类

class Product {

constructor () {

}

// 声明一个建造者类

class BuilderProduct {

constructor () {

// 建造产品名称

this.nameBuilder = (name) => {

this.name = name || null

}

// 建造产品版本

this.versionBuilder = (version) => {

this.version = version || null

}

// 建造产品生产日期

this.createTimeBuilder = (createTime) => {

this.createTime = createTime || null

}

// 组合建造产品

this.getProduct = () => {

let product = new Product()

if (this.name) {

product.name = this.name

}

if (this.version) {

product.version = this.version

}

if (this.createTime) {

product.createTime = this.createTime

}

return product

}

// 声明一个需求类

class Demand {

constructor (demands) {

let builderProduct = new BuilderProduct()

builderProduct.nameBuilder(demands.name)

builderProduct.versionBuilder(demands.version)

builderProduct.createTimeBuilder(demands.createTime)

return builderProduct.getProduct()

}

let demand = new Demand({

name: 'SKILL.NULL'

})

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

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(3880)评论(0)

JavaScript设计模式样例四 —— 单例模式

单例模式(Singleton Pattern)：

1

2

3

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

目的：阻止其他对象实例化其自己的单例对象的副本，从而确保所有对象都访问唯一实例。

场景：如一个系统中可以存在多个打印任务，但是同时只能有一个正在工作的任务。

例：JS代码实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// 惰性单例

let lazySingle = (() => {

let _instance = null

// 单例

Single = () => {

let privateAttribute = '我是私有属性'

privateMethod = () => {

// 私有方法

}

return {

publicMethod: () => {

// 对外暴露方法

},

publicAttribute: '我是对外暴露属性'

}

// 提供一个全局访问点

return () => {

if (!_instance) {

_instance = Single()

}

return _instance

}

})()

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

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(4050)评论(0)

JavaScript设计模式样例三 —— 装饰模式

装饰模式(Decorator Pattern)：

1

2

3

4

定义：在不改变原对象的情况下，动态的给对象添加一些额外的职责。就功能而言，装饰模式相比生成子类更为灵活。

目的：把类的核心职责和装饰功能区分开。可以去除相关类中重复的逻辑。

场景：当系统需要扩展一个类的功能，或者客户端需要动态的给一个对象添加功能，并且使用继承或生成子类会很复杂的时候。

装饰模式体现了"多用组合，少用继承"这一设计原则。

例：JS代码实现

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

// 一辆小汽车的构造函数

function ACar () {

// 一辆原味小汽车的价格是 99 元

this.price = function () {

return 99

}

// 装饰器 —— 汽车喇叭

function carTrumpet (car) {

let price = car.price()

car.trumpet = function () {

console.log('滴滴滴')

}

// 一个喇叭加价 10 元

car.price = function () {

return price + 10

}

// 装饰器 —— 行车记录仪

function carRecorder (car) {

let price = car.price()

car.recorder = function () {

console.log('让一让啊让一让我有行车记录仪')

}

// 一个行车记录仪加价 9.9 元

car.price = function () {

return price + 9.9

}

// 初始化一辆小汽车

let car = new ACar()

// 给小汽车装上喇叭

carTrumpet(car)

// 给小汽车装上行车记录仪

carRecorder(car)

// 最后小汽车的价格是 118.9 元

console.log(car.price())

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

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(5012)评论(0)

2025年十月
一	二	三	四	五	六	日
« 9月
		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