三月 2020 - SKILL.NULL

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

JavaScript设计模式样例十五 —— 状态模式

状态模式(State Pattern)

1

2

3

定义：创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。

目的：允许对象在内部状态发生改变时改变它的行为，对象看起来好像修改了它的类。

场景：游戏角色有跳跃、移动、射击、蹲下等状态设定，如果用if-else或者switch来进行判断，在遇到组合动作的时候，判断会变得非常复杂难读，这时可以使用状态模式来实现。

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 SuperHero {

constructor () {

this.currentState = []

this.states = {

jump () {

console.log('jump')

},

move () {

console.log('move')

},

shoot () {

console.log('shoot')

},

squat () {

console.log('squat')

}

// 更改当前状态

change (arr) {

this.currentState = arr

return this

}

run () {

console.log('..... begin start ......')

this.currentState.forEach(item => this.states[item] && this.states[item]())

return this

}

new SuperHero()

.change(['jump', 'squat'])

.run()

.change(['move', 'shoot'])

.run()

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

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(3278)评论(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, 设计模式阅读(3340)评论(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, 设计模式阅读(3749)评论(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, 设计模式阅读(3739)评论(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, 设计模式阅读(3256)评论(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, 设计模式阅读(3620)评论(0)

2020年三月
一	二	三	四	五	六	日
« 2月				4月 »
						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