设计模式 - SKILL.NULL

JavaScript设计模式样例二十二 —— 访问者模式

访问者模式(Visitor 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 Elements {

constructor () {

this.action = () => {

console.log('hi～')

}

this.accept = (visitor) => {

visitor.visit(this)

}

// 访问者

class Visitor {

constructor () {

this.visit = (elements) => {

elements.action()

}

const ele = new Elements()

const visi = new Visitor()

ele.accept(visi)

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

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

JavaScript设计模式样例二十一 —— 解释器模式

解释器模式(Interpreter 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

// 定义对于语法的断言

class TerminalExpression {

constructor (data) {

this.data = data

}

interpret (context) {

if (context.indexOf(this.data) > -1) {

return true

}

return false

}

// 添加表达式判断符

class OrExpression {

constructor(expr1, expr2) {

this.expr1 = expr1;

this.expr2 = expr2;

}

interpret(context) {

return this.expr1.interpret(context) || this.expr2.interpret(context);

}

class AndExpression {

constructor(expr1, expr2) {

this.expr1 = expr1;

this.expr2 = expr2;

}

interpret(context) {

return this.expr1.interpret(context) && this.expr2.interpret(context);

}

// 获取对应表达式

function getMaleExpression(){

const robert = new TerminalExpression("Robert");

const john = new TerminalExpression("John");

return new OrExpression(robert, john);

}

function getMarriedWomanExpression(){

const julie = new TerminalExpression("Julie");

const married = new TerminalExpression("Married");

return new AndExpression(julie, married);

}

// 判断语句断言

const isMale = getMaleExpression();

const isMarriedWoman = getMarriedWomanExpression();

console.log("John is male? " + isMale.interpret("John"));

console.log("Julie is a married women? " )

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

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

JavaScript设计模式样例二十 —— 中介者模式

中介者模式(Mediator Pattern)

1

2

3

定义：用来降低多个对象和类之间的通信复杂性。

目的：用一个中介对象来封装一系列的对象交互，中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。

场景：MVC框架中的控制器C就是模型M和识图V的中介者。

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 mediator = (() => {

let msg = {}

return {

register: (type, action) => {

if (!msg[type]) msg[type] = []

msg[type].push(action)

},

send: (type) => {

if (msg[type]) {

for (let i = 0; i < msg[type].length; i++) {

msg[type][i] && msg[type][i]()

}

})()

mediator.register('demo', () => {

console.log('first')

})

mediator.register('demo', () => {

console.log('second')

})

mediator.send('demo')

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

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

JavaScript设计模式样例十九 —— 职责链模式

职责链模式(Chain of Responsibility 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

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

// 采购请求

let PurchaseRequest = (amount, productName) => {

this.amount = amount

this.productName = productName

}

// 处理方

let Approver = (name, nextApprover) => {

this.name = name

this.nextApprover = nextApprover

}

Approver.prototype.processRequest = () => {

throw new Error()

}

// ConcreteHandler

let Manager = (name, nextApprover) => {

Approver.call(this, name, nextApprover)

}

extend(Manager, Approver)

Manager.prototype.processRequest = (request) => {

if (request.Amount < 10000.0) {

console.log('ok')

} else if (NextApprover != null) {

this.nextApprover.ProcessRequest(request)

}

// ConcreteHandler,副总

let VicePresident = function (name, nextApprover) {

Approver.call(this, name, nextApprover)

}

extend(VicePresident, Approver);

VicePresident.prototype.processRequest = function (request) {

if (request.Amount < 25000.0) {

console.log('ok');

} else if (NextApprover != null) {

this.nextApprover.ProcessRequest(request)

}

// ConcreteHandler，总经理

let President = function (name, nextApprover) {

Approver.call(this, name, nextApprover)

}

extend(President, Approver)

President.prototype.processRequest = function (request) {

if (request.Amount < 100000.0) {

console.log('ok')

} else if (NextApprover != null) {

this.nextApprover.ProcessRequest(request)

}

let requestTelphone = new PurchaseRequest(4000.0, "Telphone")

let requestSoftware = new PurchaseRequest(10000.0, "Visual Studio")

let requestComputers = new PurchaseRequest(40000.0, "Computers")

let manager = new Manager("LearningHard")

let Vp = new VicePresident("Tony")

let Pre = new President("BossTom")

// 设置责任链

manager.NextApprover = Vp

Vp.NextApprover = Pre

// 处理请求

manager.ProcessRequest(requestTelphone)

manager.ProcessRequest(requestSoftware)

manager.ProcessRequest(requestComputers)

Github地址：https://github.com/skillnull/Desi[……]

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

JavaScript设计模式样例十八 —— 命令模式

命令模式(Command 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

let dialog = {

show () {

console.log('show a dialog')

}

let animation = {

start () {

console.log('show animation')

}

let setCommand = (btn, cmd) => {

btn.onclick = () => {

cmd.run()

}

class ShowDialogCommand {

constructor (receiver) {

this.receiver = receiver

}

run () {

this.receiver.show()

}

class StartAnimationCommand {

constructor (receiver) {

this.receiver = receiver

}

run () {

this.receiver.start()

}

setCommand(btn1, new ShowDialogCommand(dialog))

setCommand(btn2, new StartAnimationCommand(animation))

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

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

JavaScript设计模式样例十七 —— 迭代器模式

迭代器模式(Itrator Pattern)

1

2

3

定义：用于顺序访问集合对象的元素，不需要知道集合对象的底层表示。

目的：提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示。

场景：$.each() for..of。

1

2

3

4

5

6

7

8

9

10

11

12

13

let each = (arr, callBack) => {

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

if (callBack && callBack(i, arr[i]) === false) {

break;

}

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

each(arr, (index, value) => {

if (value > 2) return false

console.log(index, value)

})

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

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

JavaScript设计模式样例十六 —— 备忘录模式

备忘录模式(Memento Pattern)

1

2

3

定义：保存一个对象的某个状态，以便在适当的时候恢复对象。

目的：在不破坏封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态。

场景：数据缓存。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

let getPageData = (() => {

let cache = {}

return (page, fn) => {

if (cache[page]) {

// 已有指定缓存数据

fun && fn()

} else {

// 当前没有指定缓存数据

// 获取指定数据data

cache[page] = data

fn && fn()

}

)()

getPageData(1, () => {

// do somthing

})

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

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

JavaScript设计模式样例十四 —— 观察者模式

观察者模式(Observer 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

class Subject {

constructor () {

this.state = 0

this.observers = []

}

getState () {

return this.state

}

setState (state) {

this.state = state

this.notifyAllObsevers()

}

attach (observer) {

this.observers.push(observer)

}

notifyAllObsevers () {

for (let ele of this.observers.values()) {

ele.update()

}

class Observer {

constructor (name, subject) {

this.name = name

this.subject = subject

this.subject.attach(this)

}

update () {

console.log(this.name,this.subject.getState())

}

let subject = new Subject()

let observer = new Observer('observer 1', subject)

subject.setState('hahaha')

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

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

JavaScript设计模式样例十三 —— 模版方法模式

模板方法模式(Template Method 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

// 定义烧水类

class BoilWater {

constructor () {

}

// 烧水

boilWater = () => {

console.log('I am boil the water!')

}

// 沏茶

makeTea = () => {

console.log('大碗茶，上嘞')

}

init = () => {

this.boilWater()

this.makeTea()

}

class Tea extends BoilWater {

constructor () {

super()

}

// 重写沏茶

makeTea = () => {

console.log('头杯茶不喝，喝第三杯')

}

let tea = new Tea()

tea.init()

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

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

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, 设计模式阅读(3738)评论(0)

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