前端 - Page 3 of 12

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, 设计模式阅读(3354)评论(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, 设计模式阅读(3341)评论(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, 设计模式阅读(3257)评论(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)

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, 设计模式阅读(3287)评论(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, 设计模式阅读(3464)评论(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, 设计模式阅读(3139)评论(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