SKILL.NULL - Page 7 of 17

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

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

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

/**

* 比较两个时间的时间差

* @param startTime 开始时间

* @param endTime 结束时间

* @demo compareTime(new Date('2019-12-24 16:02').getTime(), new Date().getTime())

*/

function compareTime (startTime, endTime) {

var retValue = {}

var compareTime = endTime - startTime // 时间差的毫秒数

// 计算出相差天数

var days = Math.floor(compareTime / (24 * 3600 * 1000))

retValue.Days = days

// 计算出相差年数

var years = Math.floor(days / 365)

retValue.Years = years

// 计算出相差月数

var months = Math.floor(days / 30)

retValue.Months = months

// 计算出小时数

var leaveHours = compareTime % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数

var hours = Math.floor(leaveHours / (3600 * 1000))

retValue.Hours = hours

// 计算相差分钟数

var leaveMinutes = leaveHours % (3600 * 1000) // 计算小时数后剩余的毫秒数

var minutes = Math.floor(leaveMinutes / (60 * 1000))

retValue.Minutes = minutes

// 计算相差秒数

var leaveSeconds = leaveMinutes % (60 * 1000) // 计算分钟数后剩余的毫秒数

var seconds = Math.round(leaveSeconds / 1000)

retValue.Seconds = seconds

var resultSeconds = 0

if (years >= 1) {

resultSeconds = resultSeconds + years * 365 * 24 * 60 * 60

}

if (months >= 1) {

resultSeconds = resultSeconds + months * 30 * 24 * 60 * 60

}

if (days >= 1) {

resultSeconds = resultSeconds + days * 24 * 60 * 60

}

if (hours >= 1) {

resultSeconds = resultSeconds + hours * 60 * 60

}

if (minutes >= 1) {

resultSeconds = resultSeconds + minutes * 60

}

if (seconds >= 1) {

resultSeconds = resultSeconds + seconds

}

retValue.resultSeconds = resultSeconds

return retValue

}

2019-10-24by SKILLNULL JavaScript 阅读(5832)评论(0)

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

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

/**

* 监听浏览器标签页的显示与隐藏

*/

class ListenerPageVisibility {

constructor () {

// 设置隐藏属性和改变可见属性的事件的名称

this.hidden = ''

this.visibilityChange = ''

if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support

this.hidden = "hidden"

this.visibilityChange = "visibilitychange"

} else if (typeof document.msHidden !== "undefined") {

this.hidden = "msHidden"

this.visibilityChange = "msvisibilitychange"

} else if (typeof document.webkitHidden !== "undefined") {

this.hidden = "webkitHidden"

this.visibilityChange = "webkitvisibilitychange"

}

this.handleChange = (callBackHidden, callBackVisibility) => {

if (document[this.hidden]) {

// 页面是隐藏状态

callBackHidden && callBackHidden()

} else {

// 页面是展示状态

callBackVisibility && callBackVisibility()

}

/**

* 全局访问点

* @param callBackHidden 页面隐藏执行的回调方法

* @param callBackVisibility 页面显示执行的回调方法

*/

linsternVisibility (callBackHidden, callBackVisibility) {

// 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告

if (typeof document.addEventListener === "undefined" || typeof document[this.hidden] === "undefined") {

console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.")

} else {

// 处理页面可见属性的改变

document.addEventListener(this.visibilityChange, () => {

this.handleChange(callBackHidden, callBackVisibility)

}, false)

}

// 调用实例

let navChange = new ListenerPageVisibility()

navChange.linsternVisibility(

// 页面是隐藏状态执行方法

() => {

// TODO 浏览器标签页处于隐藏状态时,执行的方法

},

// 页面是可见状态执行方法

() => {

// TODO 浏览器标签页处于显示状态时,执行的方法

}

)

2019-10-21by SKILLNULL JavaScript 阅读(5967)评论(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

25

26

27

28

29

30

31

const getSingleton = (() => {

let instance = null

function createInstance() {

let privateAttribute = '我是私有属性'

function privateMethod() {

return `读取：${privateAttribute}`

}

return {

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

publicMethod() {

return privateMethod()

},

setPrivateAttribute(value) {

privateAttribute = value

}

return function () {

if (instance === null) {

instance = createInstance()

}

return instance

}

})()

使用：

1

2

3

4

5

6

7

8

9

const instance1 = getSingleton()

const instance2 = getSingleton()

console.log(instance1 === instance2) // true

// 读取：我是私有属性

console.log(instance1.publicMethod())

instance1.setPrivateAttribute('修改后的私有属性')

// 读取：修改后的私有属性

console.log(instance2.publicMethod())

[……]

2026-08-25by SKILLNULL JavaScript, 设计模式阅读(4569)评论(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, 设计模式阅读(5561)评论(0)

原生JS滚动条位置处理

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// 滚动条位置

var scrollPosition = {

// 位置

result: 0,

// 监听位置

rememberPosition: function () {

var type = 'scroll'

var handle = function () {

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

scrollPosition.result = scrollTop

}

if (window.addEventListener) {

window.addEventListener(type, handle, false)

}

if (window.attachEvent) {

window.attachEvent('on' + type, handle)

}

},

// 设置位置

setPostion: function () {

window.scrollTo(document.body.scrollWidth, scrollPosition.result)

}

2019-09-25by SKILLNULL JavaScript 阅读(6666)评论(0)

前端批量打包下载图片

先引用jquery、jszip、FileSaver，然后封装下载方法：

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

一、引用

二、方法封装

var FunLib = {

// 图片打包下载

download: function (images) {

FunLib.packageImages(images)

},

// 打包压缩图片

packageImages: function (imgs) {

var imgBase64 = []

var imageSuffix = [] // 图片后缀

var zip = new JSZip()

var img = zip.folder("images")

for (var i = 0; i < imgs.length; i++) {

var src = imgs[i].url

var suffix = src.substring(src.lastIndexOf("."))

imageSuffix.push(suffix)

FunLib.getBase64(imgs[i].url).then(function (base64) {

imgBase64.push(base64.substring(22))

if (imgs.length === imgBase64.length) {

for (var i = 0; i < imgs.length; i++) {

img.file(imgs[i].name + imageSuffix[i], imgBase64[i], {base64: true})

}

zip.generateAsync({type: "blob"}).then(function (content) {

saveAs(content, "images.zip")

})

}

}, function (err) {

console.log(err)

})

}

},

// 传入图片路径，返回base64

getBase64: function (img) {

var image = new Image()

image.crossOrigin = 'Anonymous'

image.src = img

var deferred = $.Deferred()

if (img) {

image.onload = function () {

var canvas = document.createElement("canvas")

canvas.width = image.width

canvas.height = image.height

var ctx = canvas.getContext("2d")

ctx.drawImage(image, 0, 0, canvas.width, canvas.height)

var dataURL = canvas.toDataURL()

deferred.resolve(dataURL)

}

return deferred.promise()

}

三、方法调用

FunLib.download([{url:'imageUrl1',name:'图片1'},{url:'imageUrl2',name:'图片2'})]

2019-09-18by SKILLNULL JavaScript 阅读(7079)评论(0)

JavaScript设计模式样例二 —— 策略模式

策略模式(Strategy 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

// 策略算法封装

let strategy = {

add (number1, number2) {

return number1 + number2

},

sub (number1, number2) {

return number1 - number2

},

mul (number1, number2) {

return number1 * number2

},

div (number1, number2) {

return number1 * number2

}

// 策略算法调用封装

function callStratery (strategyType, number1, number2) {

return strategy[strategyType](number1, number2)

}

// 策略算法调用

callStratery(‘add’, 1, 2) // return 3

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

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

JavaScript设计模式样例一 —— 工厂模式

工厂模式(Factory 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

25

26

27

28

29

30

31

let operationFactory = {

createOperate (operate) {

let oper = null

switch (operate) {

case '+':

oper = new operationFactory.OperationAdd()

break

case '-':

oper = new operationFactory.OperationSub()

break

case '*':

oper = new operationFactory.OperationMul()

break

case '/':

oper = new operationFactory.OperationDiv()

break

}

},

OperationAdd () {

// TODO run the addition operation

},

OperationSub () {

// TODO run the subtraction operation

},

OperationMul () {

// TODO run the multiplication operation

},

OperationDiv () {

// TODO run the division operation

}

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

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

2026年八月
一	二	三	四	五	六	日
« 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